HTML基础
HTML5标签
doctype 标签
| HTML 版本 | doctype 声明 |
|---|---|
| HTML5 | <!doctype html> |
| XHTML1.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| HTML4.0 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
html标签
<html>
文件的全部内容
</html>
head标签
<html>
<head>文件头</head>
<body>文件主体</body>
</html>
meta标签
<html>
<head>
<meta charset="utf-8" />
</head>
<body>文件主体</body>
</html>
title标签
<html>
<head>
<meta charset="utf-8">
<title>窗体标题</title>
</head>
<body>文件主体</body>
</html>
body标签
<html>
<head>
<meta charset="utf-8">
<title>窗体标题</title>
</head>
<body>
body 标签里面的文本
<!--body 标签里面的文本 -->
</body>
</html>
文本和超链接标签
标题标签
<h1> 这是 h1 标签效果 </h1>
<h2> 这是 h2 标签效果 </h2>
<h3> 这是 h3 标签效果 </h3>
<h4> 这是 h4 标签效果 </h4>
<h5> 这是 h5 标签效果 </h5>
<h6> 这是 h6 标签效果 </h6>
段落标签
<p> 段落正文内容 </p>
换行标签
一行文本 <br> 另起一行
水平标签
<hr 属性 =" 属性值 ">
强调标签
<b> 要以粗体显示的文字 </b>
<strong> 要以粗体显示的文字 </strong>
图片标签与超链接标签
图片标签
<img src="路径" alt="提示信息" align="对齐方式" border="边框大小" width="宽度" height="高度"/>
| 属性 | 说明 | 默认值 |
|---|---|---|
| src | 图 片 地 址， 接 受 GIF、JPG 及 PNG 格式。若图片文件与该 html 文件处于同一目录，则只写文件名称，否则必须添加正确的相对路径或绝对路径 | left |
| width、height | 设定线条厚度。以像素作单位 | 2 |
| align | 设定线条长度。可以是绝对值（以像素为单位）或相对值 | 100% |
| alt | 设定线条颜色。#0000FF 代表蓝色，也可以采用颜色的名称，即 color=“blue” | 黑色 |
| noshade | 设定线条为平面显示，若取消此项则具有阴影或立体 | — |
超链接标签
<a 属性 ="属性值"> 链接显示文本 </a>
| 属性 | 说明 | 默认值 |
|---|---|---|
| href | 链接的目标 URL | — |
| target | 在何处打开目标 URL。仅在 href 属性存在时使用 | _self |
音频标签视频标签
音频标签
<audio width="640" height="360" src="music.mp3" controls="true">
您的浏览器不支持 audio 元素！
</ audio >
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果是 autoplay，则音频在就绪后马上播放 |
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 |
| end | 数字值 | 定义播放器在音频流中的何处停止播放。默认声音会播放到结尾 |
| loopend | 数字值 | 定义在音频流中循环播放停止的位置，默认是end 属性的值 |
| loopstart | 数字值 | 定义在音频流中循环播放的开始位置。默认是start 属性的值 |
| playcount | 数字值 | 定义音频片断播放多少次，默认是 1 |
| src | url地址 | 所播放音频的 url地址 |
| start | 数字值 | 定义播放器在音频流中开始播放的位置。默认声音在开头进行播放 |
视频标签
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 audio 元素！
</video>
| 属性 | 值 | 描述 | ||
|---|---|---|---|---|
| autoplay | autoplay | 如果是 autoplay，则视频在就绪后马上播放 | ||
| src | url地址 | 所播放视频的 url地址 | ||
| perload | none | metadata | auto | 用于指定视频或音频数据是否预加载：none（不进行预加载）、metadata（只预加载媒体的元数据）和 auto（预加载全部视频或音频） |
| loop | loop | 用于指定是否循环播放视频或音频 | ||
| poster | url地址 | 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像 | ||
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 | ||
| width | 数字值 | 用于指定视频的宽度 | ||
| height | 数字值 | 用于指定视频的高度 |
列表、div 以及 span 标签
列表标签
一、无序列表
<ul type="项目符号类，取值为 disc（默认值，实心圆）、circle（空心圆环）和 square（正方形）">
<li> 第 1 项 </li>
<li> 第 2 项 </li>
</ul>
二、有序列表
<ol type="序列类型" start="序号起始值">
<li> 第一项 </li>
<li> 第二项 </li>
</ol>
三、自定义列表
<dl>
<dt> 名词 1<dd> 解释 1
<dt> 名词 2<dd> 解释 2
<dt> 名词 3<dd> 解释 3
</dl>
div 标签
div标签没有特定的含义，只是作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。
<div>
其他标签或内容
</div>
span标签
span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
<span> 文本 </span>
表格标签
| 标签 | 描述 | ||
|---|---|---|---|
| …… | |||
| - | 表格标签 | ||
| 行标签 | |||
| …… | 单元格标签 |
……
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
</table>
colspan 表示跨越的列数，rowspan 表示跨越的行数
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
其他相关标签
- 表格标题标签 *caption *，用于描述整个表格的标题。
- 表格表头 *th *，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。
- 表格数据的分组标签 *thead *、 *tbody * 和 *tfoot *，这 3 个标签通常配合使用，主要对表格数据进行逻辑分组。
表单标签
| 表单控件标签写法 | 说明 |
|---|---|
<input type="text"> | 单行文本输入框。使用的是 input 标签和 type 属性 |
<input type="submit"> | 将表单中的信息提交给表单中 action 属性所指向的地址 |
<input type="checkbox"> | 复选框 |
<input type="radio"> | 单选钮 |
<input type="password"> | 密码输入框（输入的文字用 * 表示） |
<select> | 下拉框 |
<textArea> | 多行文本输入框 |
<form name="表单名字" action="URL" method="get/post">
表单元素
</form>
get方式提交：使用 get 方式提交数据时，表单数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，但缺点是数据长度不能太长。
post方式提交：使用 post 时，表单数据是与 URL 分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比 get 慢。
输入框
**文本框：**表单中最常用的输入元素就是文本框（text），它提供给用户输入的单行文本信息，如用户名的输入。文本框的用法很简单，只需将 input 标签的 type 属性设置为 text 即可。
<input name="表单元素名称" type="text" id="表单元素名称" value="值" />
| input标签属性 | 说明 |
|---|---|
| type | 指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text |
| name | 指定表单元素的名称 |
| value | 指定表单元素的初始值 |
| size | 指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位 |
| maxlength | 指定可在 text 或 password 元素中输入的最大字符串，默认无限制 |
| checked | 此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性 |
| readonly | 当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改 |
密码框： 密码框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”。
<input type="password" id="userPwd" name="userPwd" />
**多行文本域：**多行文本域用于显示或输入两行或两行以上的文本，它使用的标签是 textarea。
<textarea name="指定名称" cols="列数" rows="行数">
文本域的内容
</textarea>
单选按钮
<input type ="radio" name="名称" value ="值" checked="checked" />
复选框
<input type ="checkbox" name="名称" checked="checked" />
下拉框
<select name="指定列表的名称" size="行数">
<option value="可选择的值" selected="selected"> 显示项的内容 </option>
<option value="可选择的值"> 显示项的内容 </option>
</select>
表单验证
<input type="text" name="usr_name" required="required" />
required 属性可应用于大多数 input 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
类型匹配验证
| type 属性 | 说明 |
|---|---|
| 在提交表单时，会自动验证值是否符合 e-mail 格式要求 | |
| url | 在提交表单时，会自动验证值是否符合 url 格式要求 |
| number | 在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定 |
| range | 在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及 step 属性进行数值的限定，显示为滑动条 |
| date | 用于选取年、月、日 |
控制字符数量
验证输入范围
自定义错误消息
CSS基础语法
样式表的分类
外部样式表
1、链接外部样式： 链接外部样式表是指通过HTML的link链接标签，建立样式文件和网页的关联。
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
2、导入样式表： 在网页中，还可以使用@import方法导入样式表。
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
内嵌样式表
<head>
<style type=”text/css”>
选择符 {样式属性：属性值;......}
选择符 {样式属性：属性值;......}
</style>
</head>
行内样式表
<标签名 style="样式属性：属性值;" >......</标签名>
<p style="color:red; font-size:30px; font-family:黑体;">
CSS基本选择器
标签选择器
<style type="text/css">
标签名 {
属性1：属性值1;
属性2：属性值2;
}
</style>
类选择器
1、定义类样式
<style type="text/css">
.类名 {
属性1：属性值1;
}
</style>
2、应用类样式
<标签名 class="类名"> 标签内容 </标签名>
ID选择器
<style type="text/css">
#ID标识名 {
属性1：属性值1;
属性2：属性值2;
}
</style>
CSS 扩展选择器
组合选择器
p,.red,#header {
color:red;
font-size:12px;
}
包含选择器（后代选择器）
#header ul li a {
color:red;
font-size:12px;
}
交集选择器
p.red {
color: red;
font-size: 23px;
}
伪类选择器
标签名:伪类名{
属性：属性值;
}
| 常用伪类 | 含义 | 应用场景 |
|---|---|---|
| a:link | 未单击访问时的超链接样式（未访问） | 常用，超链接主样式 |
| a:visited | 单击访问后的超链接样式（已访问） | 区分是否已被访问 |
| a:hover | 鼠标悬浮在超链接上的样式（鼠标悬停） | 常用，实现动态效果 |
| a:active | 鼠标单击未释放的超链接样式（正被点击） | 少用，通常与 link 一致 |
CSS的特性
CSS继承性
CSS3 的继承性，亦称为样式表的层叠性。样式表的继承规则是，所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多层样式叠加在一起，但另行更改除外。
<body>
<p>段落文字</p>
<p id="p1">段落文字</p>
</body>
body {
font-size: 12px;
font-style: italic;
}
#p1 {
font-size: 30px;
}
这里标签p中的内容会继承body定义的属性，即示例中的段落文字同样会以斜体的12像素大小的文字显示，除非定义新的样式。
CSS3 层叠性和优先级
如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。
如果多个选择器定义的样式规则发生了冲突，则 CSS 按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式。
CSS 规定选择器总原则是：越特殊的样式，优先级越高。
选择符优先级从高到低：
行内样式 > ID样式 > 类样式 >元素选择符
内嵌样式 > 内部样式 > 外部样式
常用的样式属性
字体属性
| 属性名 | 说明 | 举例 |
|---|---|---|
| font | 设置字体的所有样式属性 | font:bold 12px 宋体 |
| font-family | 定义字体类型 | font-family: 宋体 |
| font-size | 定义字体大小 | font-size:12px |
| font-weight | 定义字体的粗细 | font-weight:bold |
| color | 字体颜色 | color:red;( 颜 色 取 值 可 以 为颜 色 的 英 文 单 词， 也 可 以 采 用#000000-#FFFFFF 之间的取值） |
文本属性
| 属性名 | 说明 | 应用场景 |
|---|---|---|
| line-height | 设置行高（即行间距），常用取值为 25px、28px | 布局多行文本 |
| text-align | 设 置 对 齐 方 式， 常 用 的 取 值 为left、right 以及 center | 各种元素对齐 |
| letter-spacing | 设 置 字 符 间 距， 常 用 的 取 值 为3px、8px | 加大字符间间隔 |
| text-ecoration | 设 置 文 本 修 饰， 常 用 的 取 值 为underline（下划线）、none | 加下划线，中划线等 |
边距和填充
边距是指页面中元素与元素之间的间距，margin 分为上、下、左、右 4 个方向，可以单独设置 margin-top、margin-left、margin-right、margin-bottom，也可以使用复合属性 margin 进行设置。
使用复合属性 margin 设置边距时，存在 4 种方式。
元素的填充也称为内边距，它是指元素内容与边框之间的距离，填充分为上、下、左、右四个方向，可通过padding-top、padding-left、padding-right、padding-bottom分别设置四个方向的内边距，也可以通过复合属性padding设置。
边框属性
1、border 属性
| 属性名 | 说明 | 示例 |
|---|---|---|
| border-style | 设置边框的样式，取值：none 无边框、solid 实线以及 dashed 虚线等 | border-style:solid |
| border-width | 设置边框的宽度 | border-width:1px |
| border-color | 设置边框的颜色 | border-color:redborder |
| border | 复合属性，用于设置边框宽度、样式以及颜色 | border:1px solid red |
2、border-radius
| 语法 | 说明 |
|---|---|
| border-radius：参数 1 | 参数 1：4 个角 |
| border-radius：参数 1 参数 2 | 参数 1：左上角、右下角参数 2：左下角、右上角 |
| border-radius：参数 1 参数 2 参数 3 | 参数 1：左上角参数 2：左下角、右上角参数 3：右下角 |
| border-radius：参数 1 参数 2 参数 3 参数 4 | 4个参数对应左上角、右上角、右下角和左下角 |
列表属性
| 属性名 | 说明 |
|---|---|
| list-style-type | 用于设定列表项的符号，取值：None（无）、Disc（实心圆）、Circle（空心圆）、Square（实心方块）。 |
| list-style-image | 用于设定图像作为列表项目符号，其值为图像对应的url。 |
| list-style-position | 用于设定项目符号在列表项的位置，取值：inside、outside（默认值）。 |
| list-style | 复合属性，用于设置列表属性，其顺序为：list-style-type、list-style-position、list-style-image。 |
背景和阴影属性
背景属性
| 属性 | 说明 |
|---|---|
| background-color | 用于设置元素的背景颜色 |
| background-image | 用于设置元素的背景图片 |
| background-repeat | 用于设置元素的背景图片重复方式 |
| background-position | 用于设置元素的背景图片位置 |
| background-size | 用于设置元素的背景图片大小 |
| background | 复合属性，用于设置元素的背景效果 |
| background-repeat的值 | 默认值，表示背景图像在纵向和横向上平铺 |
|---|---|
| no-repeat | 表示背景图像不平铺 |
| repeat-x | 表示背景图像只在水平方向上平铺 |
| repeat-y | 表示背景图像只在垂直方向上平铺 |
背景图片的定位
background-position: 关键字 | 百分比 | 像素值
| 取值 | 说明 |
|---|---|
| 关键字 | 水平方向：left、center、right；垂直方向：top、center、bottom。 |
| 百分比 | 使用百分比表示背景位置，常用的数值：水平方向：0%（左） 50%（中） 100%(右)垂直方向：0%（上） 50%（中） 100%(下) |
| 像素值 | 背景图片左顶点相对于元素左顶点的偏移量，当为正值时，水平向右、垂直向下偏移，当为负值时，水平向左、垂直向上偏移。 |
CSS Sprites
CSS Sprites，在国内也称之为 CSS 精灵，是一种图片网页应用处理方式。它允许将一个页面涉及到的所有零星图片均包含到一张大图中。
其实，CSS Sprites 的目的是通过整合图片，减少对服务器的请求数量以及请求的字节数，从而加快页面的加载速度。
背景的渐变
线性渐变
background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);
| 取值 | 说明 |
|---|---|
<angle> | 通过角度来确定渐变的方向。角度是指水平线和渐变线之间的角度，逆时针方向计算。 |
<direction> | 通过代表方向的关键词来确定渐变的方向。 |
<color_stop> | 用于指定终止色，其中可以设置多个终止色，用于实现多种颜色之间的渐变。 |
径向渐变
background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);
| 取值 | 说明 |
|---|---|
<position> | 主要用来定义径向渐变的圆心位置。 |
<shape> | 主要用来定义径向渐变的形状。包括两个值“circle”（圆形）和“ellipse”（椭圆形）。 |
<size> | 主要用于设置渐变半径的大小，从而用来确定径向渐变的结束形状大小。可以设置数值、百分比以及关键字。 |
<color_stop> | 径向渐变线上的终止色 |
阴影属性
文字阴影
text-shadow: h-shadow v-shadow blur color;
| 取值 | 说明 |
|---|---|
| h-shadow | 必需，阴影的水平距离。 |
| v-shadow | 必需，阴影的垂直距离。 |
| blur | 可选，阴影的模糊半径。 |
| color | 可选，阴影的颜色。 |
盒子阴影
box-shadow: h-shadow v-shadow blur spread color;
| 取值 | 说明 |
|---|---|
| h-shadow | 必需，阴影的水平距离。 |
| v-shadow | 必需，阴影的垂直距离。 |
| blur | 可选，阴影的模糊半径。 |
| spread | 可选，阴影的大小 |
| color | 可选，阴影的颜色。 |
盒子模型
标准文档流
块状标签和行内标签
在 CSS 中将 HTML 中标签分为块状标签和行内标签
1、常见的块状标签
标题（<h1>~<h6>）、
段落（<p>）、
水平线（<hr/>）、
列表（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）、
表格（<table>）、
层（<div>）、
表单 (<form>)
2、常见的行内标签
图像（<img>）、范围（<span>）、换行（<br/>）、超链接（<a>）
行内标签与块状标签的区别：
1、排列方式不同
行内元素按照
从左到右的方式进行排列，多个行内元素显示在同一行，只有当一行排列完毕后，才会开始一个新行。块状元素各占据一行，则按照自上而下的方式进行排列。
2、内嵌元素不同
块状元素可以包含行内元素和块状元素。行内元素不能包含块状元素，只能包含
文本或者其他
行内元素。
3、属性设置不同
行内元素与块状元素的属性设置不同，主要体现在
盒子模型中，行内元素设置width 属性、height 属性时无效，但可以设置 line-height 属性，再设置margin 属性、padding 属性时，对于上下方向上的设置无效。
display 属性
CSS 中 display 可以隐藏 HTML 元素包括 div 层（不占用位置）
display:none | block;
visibility 属性
CSS 中 visibility 可以隐藏/显示 html 元素包括 div 层（占用位置）
visibility：hidden | visible;
盒子浮动
float属性
float : none | left | right
| 参数 | 说明 |
|---|---|
| left | 表示文本或图像会移动到父元素的左侧 |
| right | 表示文本或图像会移动到父元素的右侧 |
| none | 是默认值，表示文本或图像会显示于它在文档中出现的位置 |
清除浮动
浮动产生的原因：
一个盒子里使用了 CSS float 浮动属性，导致父级对象盒子不能被撑开，这样 CSS float 浮动就产生了。左边盒子使用左浮动，右边盒子使用右浮动，两个盒子被包在另外一个盒子中。
浮动产生的负作用：
- 背景不能显示
- 边框不能撑开
- margin padding设置值不能正确显示
清除浮动影响的方法：
1、对父级设置适合 CSS 高度
- 对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。比如我们知道内容高度是 100px+ 上下边框为 2px，这样具体父级高度为 102px。
2、clear: both 清除浮动
- 在父级 “
</div>” 结束前加此div引入“clear:both”样式即可清除浮动。
3、父级 div 定义 overflow:hidden
- 对父级CSS选择器加
overflow: hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
盒子定位
静态定位
position 属性的默认值static表示 CSS 文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局。
position: static;
相对定位
相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。
position: relative;
固定定位
position: fixed;
绝对定位
绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上。
position: absolute;
z-index 属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index:数字; /*数学越大层级越高*/
页面布局与规划
表格布局
- HTML5 的表格标签除了以网格形式显示数据以外，还可以被应用于对网页内容的布局。
- 传统表格布局方式实际上利用了 table 标签所具有的无边框特性，因此可以将网页中的内容按版式划分放入表格的各单元格中，从而实现复杂的排版组合。
流式布局
瀑布流布局
瀑布流布局是流式布局的一种，是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
<body>
<h1> 流式布局 </h1>
<img src="logo.jpg">
<p>
流式布局基本没有对文字图片信息的位置控制，它所遵从的是从左至右，然后从上到下的顺序
</p>
</body>
masonry 实现瀑布流布局
masonry 是一个 javascript 插件，通过该插件可以轻松实现瀑布流布局，和 CSS 中 float 的效果不太一样的地方在于 float 先水平排列，然后再垂直排列，使用 masonry 则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。
<body>
<div id="grid">
<div class="grid-item a"> </div>
<div class="grid-item b"> </div>
......
<div class="grid-item d"> </div>
<div class="grid-item e"> </div>
</div>
</body>
<style type="text/css">
#grid { width: 1000px;margin: 0 auto;}
.grid-item { width: 200px; float: left;}
.a { background: lightblue; height: 200px;}
.b { background: lightcoral; height: 300px;}
.c { background: lightgreen; height: 500px;}
.d { background: lightsalmon; height: 350px;}
.e { background: lightseagreen; height: 150px;}
</style>
<script src="masonry.pkgd.min.js"></script>
<script type="text/javascript">
var msnry = new Masonry('#grid', {
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
div布局
上下结构
上中下结构
上导航中下结构
左窄右宽结构
内容左中右
导航内容左中右
内容右窄左宽
内容左窄右宽
JavaScript基础语法
使用方式
<script> </Script>标签中直接编写脚本程序代码- 脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件
- 将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值
HTML 文件混合方式
<body>
<script type="text/javascript">
document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>");
</script>
</body>
JS 文件引用方式
- 创建 JavaScript 文件，命名为demo1.js html
- 页面，在
<script>标签中引用 JavaScript 文件
<body>
<script src="../js/demo1.js" type="text/javascript"></script>
</body>
HTML代码嵌入方式
<body>
<a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a>
</body>
JavaScript核心语法
变量
三种使用方式
- 先声明再赋值 如：var message; message = “hi”;
- 同时声明和赋值变量 如：var message = “hi”;
- 不声明直接赋值 如：message = “hi”;
变量命名规则
- 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
- 其他字符可以是字母、下划线、美元符号或数字
- 区分大小写
- 不能与关键字同名，如 while、for 和 if 等
数据类型
JavaScript 中有 5 种简单数据类型，也称为基本数据类型
- undefined
- null
- boolean
- number
- string
另外还有一种复杂数据类型——object对象类型
由于JavaScript中的变量是弱类型，可通过typeof操作符获取变量的数据类型
| 数据类型 | 数据值 | typeof |
|---|---|---|
| number类型 | 浮点数、整数 | number |
| boolean类型 | true、false | boolean |
| string类型 | 单引号或双引号引起来的若干字符 | string |
| null类型 | 只存在一个值null，表示对象不存在 | object |
| undefined类型 | 只存在一个值undefined，表示未赋值或未声明的变量 | undefined |
JavaScript注释
- 单行注释：//
- 多行注释： /* 注释内容 */
// 声明并初始化一个变量
var v = 5;
/* 使用 for 循环输出 Hello5 次 */
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
/*
这些注释不会显示在页面上，
但是可以通过页面的源代码查看到
*/
顺序结构
顺序结构，顾名思义就是程序按照语句出现的先后顺序依次执行
<body>
<script type="text/javascript">
document.write(" 程序开始执行……<br/>");
document.write(" 程序正在执行中……<br/>");
document.write(" 程序执行完毕……<br/>");
</script>
</body>
选择结构
- 选择结构：需要根据特定的条件执行不同的语句
- JavaScript中选择结构使用if语句和switch语句
- if 语句有 3 种形式：单分支、双分支和多分支
1、if 单分支语句
if( 条件表达式 ) {
语句或语句块
}
2、if 双分支语句
if( 条件表达式 ) {
语句或语句块 1
} else{
语句或语句块 2
}
3、if 多分支语句
if( 条件表达式 1){
语句或语句块 1
}
else if( 条件表达式 2){
语句或语句块 2
}......
else if( 条件表达式 n){
语句或语句块 n
}
else{
语句或语句块 n+1
}
4、switch 语句
switch（表达式）{
case 取值 1：语句或语句块 1; break;
case 取值 2：语句或语句块 2; break;
......
case 取值 n：语句或语句块 n; break;
default: 语句或语句块 n+1; break;
}
循环结构
while 循环语句
while (条件表达式){
语句或语句块
}
do-while循环语句
do {
语句或语句块
}while(条件表达式);
for循环语句
for(初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式){
语句或语句块
}
break 语句和 continue 语句
JavaScript跳转语句：break语句和continue语句
break语句用于中断循环
continue语句用于跳过本次循环要执行的剩余语句，然后开始下一次循环
var i = 1;
var sum = 0;
while (i <= 20) {
if (i % 2 != 0) {
i++;
continue; // 是奇数就结束本次循环，开始下一次循环
}
sum = sum + i;
if (sum > 30) {
document.write( "当加到：" + i + "时，累加和已经超过 30");
break; // 累加和超过 30，跳出循环
}
i++;
}
自定义函数
函数的定义
- 函数就是为了完成程序中的某些特定功能而进行专门定义的一段程序代码
- 函数包括自定义函数和系统函数
- 使用函数可以实现特定的功能，在使用函数前必须对函数进行定义，代码放置在
<script></script>标签之间
function 函数名 (形式参数 1, 形式参数 2,…, 形式参数 n){
语句
}
使用 function 关键字。function 后是函数名，JavaScript 中的函数不必说明返回值的类型。
函数的命名规则与变量名的命名规则相同。
函数名后的 () 可以包含若干参数，也可以选择不带任何参数。
最后是一对 {}，包含具体实现程序中的某些特定功能的若干语句或脚本代码
<body>
<script type="text/javascript">
// 参数 width、height 表示使用此函数时，要传递所求的长方形的宽度和高度值
function getArea (width,height) {
var result = width*height;
document.write(" 面积为：+ result);
}
</script>
</body>
函数的调用
- 函数是不会自动执行的，调用一个函数的方法是使用函数名称，并且在函数名后用括号包含所需要传入的参数值
- 调用函数的语句也需要放置在
<script>和</script>里
<body>
<script type="text/javascript">
//1、函数的创建
// 参数 width、height 表示使用此函数时，要传递所求的长方形的宽度和高度值
function getArea (width, height) {
var result = width * height;
document.write(" 面积为：+ result);
}
</script>
//2、函数的使用
<h1> //宽度是：3，高度是：4 的长方形
<script type="text/javascript">getArea(3,4);</script>
</h1>
</body>
函数的参数
函数参数作用：调用函数时将数据传递给被调函数的方式
JavaScript中函数参数的特殊性
- 函数声明了参数，调用时也可以不传递参数，这在其他编程语言中是会出现编译错误的
- 不管函数声明时有多少个参数，调用函数时可以传递若干个参数值给函数，并且实际传递的参数值还可以在函数内部获得
在函数被调用时，一个 arguments 对象就会被创建，它只能使用在函数体中，以数组的形式来管理函数的实际参数
函数的返回值
函数的返回值能够将一个函数内部产生的结果返回给外部语句使用
实现函数返回值的语句是 return
return 返回值 ;
<script type="text/javascript">
// 创建有返回值的函数
function getArea(width,height) {
var result = width * height;
return result;
}
</script>
<h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
<script type="text/javascript">
// 调用有返回值的函数
var area = getArea(3,4);
document.write(area);
</script>
</h1>
匿名函数
语法一：
(function (形式参数列表){
语句
}）(实际参数列表);
<script type="text/javascript">
// 定义函数
function(width,height) {
// 计算长方形的面积
}
</script>
<h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
<script type="text/javascript">
// 调用匿名的函数
(function(width,height){
// 输出长方形的面积
document.write(width*height);
})(3,4);
</script>
</h1>
语法二：
var 变量 = (function (形式参数列表){
语句
} ）;
变量(实际参数列表);
<script type="text/javascript">
// 定义函数
var area=function(width,height) {
document.write(width*height);
};
</script>
<h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
<script type="text/javascript">
// 调用函数
area(3,4);
</script>
</h1>
变量的作用域
- 变量的作用域主要分为全局变量和局部变量两种
- 全局变量是在函数体外部声明的，可以在任何地方，包括函数的内部使用
- 局部变量是在函数体内声明的，只能在函数体内使用。局部变量随着函数的结束而消失
<script type="text/javascript">
var width=40;
function showWidth(){
var width=50;
document.write("<h3> 宽度是："+width+"</h3>");
}
showWidth();
document.write("<h3> 宽度是："+width+"</h3>");
</script>
系统函数
parseInt () 函数
parseInt()函数将字符串转换为整数。它从字符串的开头开始解析，在第一个非整数位置停止解析并返回前面读到的所有整数如果字符串不是以整数开头，将返回 NaN(Not a Number：非数字值)
| parseInt (string) | |
|---|---|
| 字符串 | 结果 |
| “150cats” | 150 |
| “cats” | NaN |
| “6” | 6 |
| “-6” | -6 |
| “6.56” | 6 |
parseFloat () 函数
parseFloat()函数和parseInt()函数类似，只不过它是返回一个浮点数
| parseFloat (string) | |
|---|---|
| 字符串 | 结果 |
| “route66.5” | NaN |
| “8.5dogs” | 8.5 |
| “6” | 6 |
| “6.56” | 6.56 |
| “.7” | 0.7 |
isNaN () 函数
isNaN()函数用于判断参数是否是NaN（不是数字）。如果是 NaN， 那么 isNaN 函数返回 true ，否则返回 false
| isNaN (参数) | |
|---|---|
| 参数 | 结果 |
| ‘134’ | false |
| ‘2a34’ | true |
| ‘2.34’ | false |
| ’ ’ (空格) | false |
| ‘wh’ | true |
eval () 函数
eval()函数运行是以字符串形式表示的 JavaScript 代码串，并返回执行代码串后的结果
JavaScript事件介绍
事件
JavaScript 是基于对象、采用事件驱动的脚本语言
事件：用户使用鼠标或键盘在浏览器窗口或页面元素上执行的操作
事件源：产生事件的元素
事件处理程序：对事件进行处理的程序或函数
事件驱动：将一段程序代码与某个事件源上发生的事件进行绑定，当触发此事件，浏览器就会自动执行与之绑定的程序代码
事件与处理程序的绑定
在JavaScript 中，有两种方式将对象事件与处理程序代码进行绑定
1、在事件源对象所对应的 HTML 页面标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码
<script type="text/javascript">
function changeSize() {
var obj=document.getElementById("text");
obj.style.fontSize = "30px";
}
</script>
<p id="text" onClick="changeSize()"> 事件与处理程序的绑定 </p>
2、可以直接在 JavaScript 代码中设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码
<p id="text"> 事件与处理程序的绑定 </p>
<script type="text/javascript">
function changeSize() {
var obj = document.getElementById("text");
obj.style.fontSize="30px";
}
document.getElementById("text").onclick=changeSize;
</script>
</p>
JavaScript的常用事件
鼠标事件
onclick 事件：鼠标单击页面元素时触发的事件
<script type="text/javascript">
function showGender(obj) {
alert("你选择的性别是："+obj.value);
}
</script>
<h2> 性别：
<input type="radio" value=" 男 " name="gender" onClick="showGender(this)"/> 男
<input type="radio" value=" 女 " name="gender" onClick="showGender(this)"/> 女
</h2>
其他事件
onload 事件：页面加载完成后立即发生
<body>
<script type="text/javascript">
window.onload = function() {
alert(" 页面加载完成 ");
}
</script>
</body>
onblur 事件：光标或者焦点离开元素后触发的事件
<body>
<p>请输入密码：<input type="password" id="txtPwd" onblur="checkPwd(this)"/></p>
<script type="text/javascript">
function checkPwd(obj) {
var pwd = obj.value;
if (pwd.length >= 6){
alert("密码输入正确");
}else {
alert("密码的长度必须是 6 位或以上");
}
}
</script>
</body>
onchange事件：输入框的值发生了变化或者改变下拉列表框的选项时会触发的事件
<script type="text/javascript">
function changeLink(obj) {
var site = obj.value;
if(site != "请选择") {
window.open(site);
}
}
</script>
表单事件
单击表单元素的“提交按钮”会触发form标签的 onsubmit 事件，浏览器对这个事件的默认处理方式是提交数据给 action 属性指定的页面进行处理
如果要阻止提交数据到指定的页面，就需要编写一个事件处理程序来改变浏览器对form标签的 onsubmit 事件的默认处理方式
<script type="text/javascript">
function check() {
// 获取输入在 id="name" 文本框中的内容
var userName = document.getElementById("name").value;
if(userName.trim().length>0) {
return true;
} else {
alert(" 请输入用户名 ");
return false;
}
}
</script>
<form action="info.html" onSubmit="return check()">
<p> 用户名：<input type="text" id="name"/></p>
<p><input type="submit" value="提交"/></p>
</form>
浏览器对象模型
BOM 是浏览器对象模型的简称。JavaScript 将整个浏览器窗口按照实现的功能不同拆分成若干个对象
一个完整的 BOM 主要包括 window 对象、history 对象、location 对象和 document 对象等
BOM中，整个对象的层次关系如下图
window 对象
window 对象处于对象模型的第一层，对于每个打开的窗口系统都会自动将其定义为window 对象
window 对象常用属性
| 属性 | 含义 |
|---|---|
| document | 窗口中当前显示的文档对象 |
| history | history 对象保存窗口最近加载的 URL |
| location | 当前窗口的 URL |
| status | 状态栏文本 |
window 对象常用方法
| 方法 | 说明 |
|---|---|
| prompt | 显示可提示用户输入的对话框 |
| alert | 显示带有一个提示消息和一个确定按钮的警示框 |
| confirm | 显示一个带有提示信息、确定和取消按钮的确认框 |
| close | 关闭浏览器窗口 |
| open | 打开一个新的浏览器窗口，加载给定URL所指定的文档 |
| setTimeout | 在设定的毫秒数后调用函数或计算表达式 |
| setInterval | 按照设定的周期（以毫秒计）来重复调用函数或表达式 |
| clearInterval | 取消重复设置，与setInterval对应 |
使用window对象创建对话框
alert() 方法弹出警告对话框
<body>
<script type="text/javascript">
var age = 23;
var name = "张三";
window.alert(" 我是：" + name + "\n 年龄是：" + age);
</script>
</body>
1234567
prompt() 方法创建提示对话框
<body>
<script type="text/javascript">
var name = window.prompt(" 请输入昵称：");
window.alert("欢迎你："+ name);
</script>
</body>
confirm() 方法创建确认对话框
<body>
<script type="text/javascript">
var flag = window.confirm(" 确认删除吗 ?");
if(flag) {
window.alert(" 执行删除操作 ");
} else {
window.alert(" 取消删除操作 ");
}
</script>
</body>
使用window对象操作窗口
window对象的 open() 方法和 close() 方法用于打开和关闭窗口
open方法的第一个参数是新窗口的URL，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征
| 名称 | 说明 |
|---|---|
| height、width | 窗口文档显示区的高度、宽度，单位为像素 |
| left、top | 窗口与屏幕左边、顶端的距离，单位为像素 |
<body>
<script type="text/javascript">
var newWin;
window.onload = function(){
newWi n = window.open("adv.html","adv","width=800,height=500,left=275,top=118");
}
</script>
<h2>主页面</h2>
<a href="javascript:newWin.close()">关闭广告</a>
</body>
history对象
history对象保存了当前浏览器窗口中打开页面的一个历史记录列表，使用 history对象可以将当前浏览器页面跳转到某个曾经打开过的页面
| 方法 | 描述 |
|---|---|
| back() | 后退一个页面，相当于浏览器后退按钮 |
| forward() | 前进一个页面，相对于浏览器前进按钮 |
| go() | 打开一个指定位置的页面 |
可以使用
history.go(-1)和history.go(1)代替histroy.back()和history.forward()
<body>
<a href="http://www.baidu.com"> 打开百度页面 </a><br/>
<a href="javascript:window.history.forward()"> 前进 </a><br/>
<a href="javascript:window.history.back()"> 后退 </a><br/>
<a href="javascript:window.history.go(1)"> 前进 </a><br/>
<a href="javascript:window.history.go(-1)"> 后退 </a>
</body>
location对象
location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏
| 名称 | 描述 |
|---|---|
| href 属性 | 返回或设置当前页面的 URL |
| hostname 属性 | 返回 Web 主机的域名 |
| pathname 属性 | 返回当前页面的路径和文件名 |
| port 属性 | 返回 Web 主机的端口（80 或 443） |
| protocol 属性 | 返回所使用的 Web 协议（http:// 或 https://） |
| reload() 方法 | 重新加载当前页面，相对于浏览器的刷新按钮 |
| assign() 方法 | 加载新的文档 |
<script type="text/javascript">
window.onload = function() {
var info = document.getElementById("info");
info.innerHTML=" 主机域名：" +
window.location.hostname+"<br/> URL 地址："+
window.location.href +"<br/> 主机端口："+
window.location.port +"<br/>Web 协议："+
window.location.protocol+"<br/> 页面的路径和文件名：" + window.location.pathname;
}
function changURL() {
// 获取选择的列表项的值
var url = document.getElementById("sel").value;
window.location.href = url; // 设置当前浏览器窗口地址栏的 URL
}
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yh9q7Au5-1664292864616)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]
screen对象
window.screen 对象包含了用户屏幕的相关信息，在编写时可以不使用window前缀
| 属性 | 描述 |
|---|---|
| availWidth | 返回显示屏幕的可用宽度（除 Windows 任务栏之外） |
| availHeight | 返回显示屏幕的可用高度（除 Windows 任务栏之外） |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
| pixelDepth | 返回显示屏幕的颜色分辨率（比特每像素） |
| width | 返回显示器屏幕的宽度 |
| height | 返回显示器屏幕的高度 |
<h3> 你的屏幕：</h3>
<script type="text/javascript">
document.write(" 总宽度 / 高度 :");
document.write(screen.width+"*"+screen.height);
document.write("<br/>");
document.write(" 可用宽度 / 高度 :");
document.write(screen.availWidth+"*"+screen.availHeight);
document.write("<br/>");
document.write(" 色彩深度 :");
document.write(screen.colorDepth);
document.write("<br/>");
document.write(" 色彩分辨率 :");
document.write(screen.pixelDepth);
</script>
navigator对象
navigator对象包含了浏览器的有关信息
navigator 对象的实例是唯一的，可以用 window 对象的 navigator 属性来引用它
| 方法 | 描述 |
|---|---|
| javaEnabled() | 规定浏览器是否启用 Java |
| taintEnabled() | 规定浏览器是否启用数据污点，仅适用于 IE 浏览器（Data Tainting） |
navigator对象的常用属性如下
| 属性 | 描述 |
|---|---|
| appCodeName | 返回浏览器的代号 |
| appMinorVersion | 返回浏览器的次级版本 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| browserLanguage | 返回当前浏览器的语言 |
| cookieEnabled | 返回浏览器中是否启用 cookie 的布尔值 |
| cpuClass | 返回浏览器系统的 CPU 等级 |
| onLine | 返回系统是否处于联机模式的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| systemLanguage | 返回操作系统使用的默认语言 |
| userAgent | 返回由客户机发送服务器的 user-agent 头部的值 |
| userLanguage | 返回操作系统的自然语言设置 |
<body>
<div id="info"></div>
<script type="text/javascript">
var info = "<p> 浏览器代号 :" + navigator.appCodeName + "</p>";
info+="<p> 浏览器名称 :"+navigator.appName+"</p>";
info+="<p> 浏览器版本 :"+navigator.appVersion+"</p>";
info+="<p> 是否处于联机模式 :"+navigator.onLine+"</p>";
info+="<p> 启用 Cookies:"+navigator.cookieEnabled+"</p>";
info+="<p> 硬件平台 :"+navigator.platform+"</p>";
info+="<p> 用户代理 :"+navigator.userAgent+"</p>";
info+="<p> 是否启用 Java:"+navigator.javaEnabled()+"</p>";
document.getElementById("info").innerHTML=info;
</script>
</body>
由于 navigator 会误导浏览器检测，所以可以使用对象检测来嗅探不同的浏览器。但不同的浏览器支持不同的对象，因此对于不同的浏览器，要使用不同的对象来检测
| 集合 | 描述 |
|---|---|
| 返回对文档中所有嵌入式对象的引用 | |
| plugins[] | 该集合是一个 plugin 对象的数组，其中的元素代表浏览器已经安装的插件。plugin对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表 |
| 虽然 plugins[ ] 数组是由 IE4 定义的，但是在 IE4 中它却总是空的，因为 IE4 不支持插件和 plugin 对象 |
<body>
<h2> 你的浏览器安装了以下插件：</h2>
<script type="text/javascript">
var plug = navigator.plugins;
for (var i=0; i<plug.length;i++){
document.write(plug[i].name+"<br/>")
}
</script>
</body>
文档对象模型
**DOM（Document Object Model）**是文档对象模型的简称
DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树
可以把HTML 文档中的每个成分看成一个节点，所以 DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点
- 整个文档是一个文档节点
- 每个HTML 标签是一个元素节点
- 包含在HTML 元素中的文本是文本节点
- 每个HTML 属性是一个属性节点
注释属于注释节点 HTML 文档中的节点彼此间都存在关系，类似一张家族图谱
<html>
<head>
<meta charset="utf-8">
<title> 文档对象模型节点的特点 </title>
</head>
<body>
<h1> 文档对象模型概述</h1>
<p>DOM: 文档对象模型</p>
</body>
</html>
- 除文档根节点之外的每个节点都有父节点
- 大部分元素节点都有子节点
- 当节点共享同一个父节点时，它们就是同辈
- 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推
- 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推
整个HTML 文档在DOM 中是一个document 对象
| 属性 | 含义 |
|---|---|
| bgColor | 页面的背景颜色 |
| fgColor | 文本的前景颜色 |
| title | 页面标题 |
<body>
<h2>document 对象的常用属性</h2>
<script type="text/javascript">
document.title="document 对象的常用属性";
document.bgColor="blue";
document.fgColor="white";
</script>
</body>
通过 id 查找 HTML 元素
使用 document.getElementById(id) 方法可以通过 id 获取 HTML 页面的元素
<p id="intro"> 你好，世界！ </p>
<p>本案例演示了 <b>getElementById</b> 的用法！ </p>
<script type="text/javascript">
var x=document.getElementById("intro");
document.write("<p> 该文本来自 id 为 intro 的段落 :"+x.innerHTML+"</p>");
</script>
innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容
- 使用 document.getElementsByName(name) 方法可以通过name获取页面元素
- 参数 name 为必选项，为字符串类型
- 返回值为数组对象，如果无符合条件的对象，则返回空数组
示例：使用getElementsByName() 方法模拟购物车的全选功能
<script type="text/javascript">
function check() {
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
chs[i].checked = cb1.checked;
}
}
function checkItem() {
var checked=0;
var notchecked=0;
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
if(chs[i].checked) {
checked++;
} else {
notchecked++;
}
}
if(checked == chs.length){
cb1.checked=true;
}else
if(notchecked == chs.length){
cb1.checked=false;
}else{
cb1.checked=false;
}
}
</script>
通过 name 查找 HTML 元素
- 使用 document.getElementsByName(name) 方法可以通过name获取页面元素
- 参数 name 为必选项，为字符串类型
- 返回值为数组对象，如果无符合条件的对象，则返回空数组
示例： 使用getElementsByName() 方法模拟购物车的全选功能
<script type="text/javascript">
function check() {
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
chs[i].checked = cb1.checked;
}
}
function checkItem() {
var checked=0;
var notchecked=0;
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
if(chs[i].checked) {
checked++;
}else{
notchecked++;
}
}
if(checked == chs.length){
cb1.checked=true;
}else if(notchecked == chs.length){
cb1.checked=false;
}else{
cb1.checked=false;
}
}
</script>
通过标签名查找 HTML 元素
- 使用 document.getElementsByTagName(tagname) 方法可以通过标签名访问页面元素
- 参数 tagname 为必选项，为字符串类型
- 返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组
示例：当鼠标移动到页面中的菜单上时，修改菜单的背景图像以
<script type="text/javascript">
var navUl = document.getElementById("nav");
var lis = navUl.getElementsByTagName("li");
for (var i=0; i<lis.length;i++) {
lis[i].onmouseover=function() {
this.style.backgroundImage="url(../img/bg2.gif)";
}
lis[i].onmouseout=function() {
this.style.backgroundImage="url(../img/bg1.gif)";
}
}
</script>
通过类名查找 HTML 元素
- 使用 document.getElementsByClassName(classname) 方法可以通过类名访问页面元素
- 参数 classname为必选项，是字符串类型，指需要获取的元素类名
- 返回值为NodeList 对象，表示指定类名的元素集合。可通过节点列表中的节点索引号来访问列表中的节点
可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素
示例：使用getElementsByClassName() 方法实现斑马线效果
<ul id="ul1">
<li class="box"> 通过 id 查找 HTML 元素 </li>
<li> 通过 name 查找 HTML 元素 </li>
<li class="box"> 通过标签名查找 HTML 元素 </li>
<li> 通过类名查找 HTML 元素 </li>
<li class="box"> 我是带有 box 样式的列表项 </li>
</ul>
<script type="text/javascript">
window.onload=function() {
var ul1=document.getElementById("ul1");
var box=ul1.getElementsByClassName("box");
for(var i=0; i<box.length;i++) {
box[i].style.background="yellow"; }}
</script>
使用document 对象改变 HTML输出流
JavaScript 中的 document 对象能够动态地创建 HTML 内容。document.write() 方法可用于直接向 HTML 的输出流写内容
示例：页面中动态输出当前的日期
不要在文档加载完成之后使用
document.write()方法，这样做会覆盖该文档中所有的内容
使用document对象改变HTML内容
修改 HTML 内容最简单的方法是使用 innerHTML 属性
document.getElementById(id).innerHTML = 新的 HTML 内容
**示例：**使用 innerHTML 在页面中动态添加内容
<script type="text/javascript">
function insert() {
var obj = document.getElementById("content");
obj.innerHTML="<h2> 我是动态添加的内容 </h2>"
}
</script>
<div id="content"> </div>
<input type="button" value="向页面中添加内容" onClick="insert()"/>
使用document对象改变HTML样式
如果需要改变 HTML 元素的样式，可使用以下语法
document.getElementById(id).style.property= 新样式
<script type="text/javascript">
function insert() {
var obj = document.getElementById("content");
obj.innerHTML="<h2> 我是动态添加的内容 </h2>"
}
function changeStyle() {
var content = document.getElementById("content");
content.style.borderColor="red";
content.style.color="orange";
content.style.borderStyle="solid";
content.style.borderWidth="2px";
}
</script>
<div id="content"> </div>
<input type="button" value=" 向页面中添加内容 " onClick="insert()"/>
<input type="button" value=" 修改页面样式 " onClick="changeStyle();"/>
每个 HTML 对象都有用于访问 CSS 样式的 style 属性，style 对象中包含一系列与 CSS 属性相对应的属性
style 对象的属性同CSS的属性命名不同，它删除了“-”，第一个单词后面的每个单词首字母大写
使用document对象改变HTML属性
document.getElementById(id).attribute= 新属性值
示例：添加修改 HTML 样式
<p>
<img id="image" src="../img/smiley.gif" width="160" height="120"/>
</p>
<p>
<input type="button" value="更换图片" onClick="changePic()"/>
</p>
<script type="application/javascript">
function changePic() {
var img = document.getElementById("image");
img.src = "../img/landscape.jpg";
}
</script>
DOM 节点操作
可以根据层级关系来查找节点，在 DOM 中每个节点都具有访问其他节点的属性
| 属性 | 描述 |
|---|---|
| parentNode | 当前节点的父节点引用 |
| childNodes | 当前节点的所有子节点 |
| firstChild | 当前节点的第一个子节点 |
| lastChild | 当前节点的最后一个子节点 |
| previousSibling | 当前节点的前一个兄弟节点 |
| nextSibling | 当前节点的后一个兄弟节点 |
示例：使用属性查找节点，并设置其样式
function getChildren() {
var div1 = document.getElementById("test");
var ps = div1.childNodes;
for(var i=0; i<ps.length;i++) {
// 如果子节点是元素节点
if(ps[i].nodeType==1) {
ps[i].style.color="blue";
}
}
}
function getParent() {
var div1=document.getElementById("test");
var parent=div1.parentNode;
parent.style.backgroundColor="pink";
}
childNodes 属性，它返回当前节点的所有子节点，其中子节点包括元素节点、属性节点和文本节点
通过节点对象的 nodeType 属性可以判断属于哪种类型的节点
当 nodeType 是 1 时就是元素节点；nodeType 为 2 时是属性节点；nodeType 为 3 时则是文本节点
动态添加和删除节点
添加节点
- 使用 createElement 创建节点
- 使用 appendChild(node) 方法将指定的节点追加到现有节点的末尾
删除节点
- 使用 removeChild 删除节点
使用 DOM 删除元素时，需要清楚地知道要删除元素的父元素
示例：动态添加和删除节点
<input type="button" value="添加" onClick="ins()"/>
<input type="button" value="删除" onClick="del()"/>
<script type="text/javascript">
var sel=document.createElement("select");
var option1=document.createElement("option");
option1.value="yellow";
option1.innerHTML=" 黄色 ";
sel.appendChild(option1);
var option2=document.createElement("option");
option2.value="red";
option2.innerHTML=" 红色 ";
sel.appendChild(option2);
var option3=document.createElement("option");
option3.value="blue";
// 创建一个文本节点
var txt=document.createTextNode(" 蓝色 ");
option3.appendChild(txt);
sel.appendChild(option3);
//select 的 onchange 事件处理
sel.onchange=function() {
document.body.bgColor=this.value;
}
// 将 select 中的第一个元素节点移动到 select 子节点的末尾
sel.appendChild(sel.firstChild);
function ins() {
document.body.appendChild(sel);
}
// 删除 select 节点
function del() {
document.body.removeChild(sel);
}
</script>
JavaScript对象
JavaScript 的内部对象
JavaScript 提供了一些非常有用的内部对象，按使用方式可分为两种
实例对象。在引用该对象的属性和方法时，必须先使用 new 关键字创建一个对象实例，然后再使用“对象实例名 . 成员”的格式来进行访问
静态对象。在引用该对象的属性和方法时不需要使用 new 关键字来创建对象实例，可以直接使用“类名 . 成员”的格式来进行访问
Object对象
Object 对象提供了一种创建自定义对象的简单方式，因为它不需要开发人员定义构造函数
在程序运行时可以为JavaScript 对象添加属性，因此使用 Object 对象创建出自定义对象非常简便
对象的属性可以使用索引运算符“[ ]”进行访问
示例：Object 对象的用法
<script type="text/javascript">
var person = new Object();
person.name="Tom";
person.age=25;
function getAttr(attr) {
alert(person[attr]);
}
</script>
<p><input type="button" value=" 显示姓名 " onClick="getAttr('name')"/> </p>
<p><input type="button" value=" 显示年龄 " onClick="getAttr('age')"/></p>
Date对象
通过创建 Date 对象，可以获取本地计算机中的日期与时间
初始化 Date 对象有 4 种方式
new Date() // 当前日期和时间
new Date(milliseconds) // 返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
示例：Date 对象的用法
<script type="text/javascript">
var now = new Date();
document.write(now+"<br/>");
var date1 = new Date("October 13, 1975 11:13:00")
document.write(date1+"<br/>");
var date2 = new Date(79,5,24)
document.write(date2+"<br/>");
var date3 = new Date(79,5,24,11,33,0)
document.write(date3+"<br/>");
var date4 = new Date(60*60*1000);
document.write(date4);
</script>
| 方法 | 功能 |
|---|---|
| getDate() | 返回一个月中的某一天（1 ～ 31） |
| getDay() | 返回一周中的某一天（0 ～ 6），0 为周日，1 为周一，以此类推 |
| getFullYear() | 以四位数返回年份 |
| getHours() | 返回小时（0 ～ 23） |
| getMilliseconds() | 返回毫秒 |
| getMinutes() | 返回分钟（0 ～ 59） |
| getMonth() | 返回月份（0 ～ 11），0 为一月，1 为二月，以此类推 |
| getSeconds() | 返回秒数（0 ～ 59） |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数 |
示例：Date 对象中方法的使用
<span id="myclock"></span>
<script type="text/javascript">
function showTime() {
var now = new Date();
var year = now.getFullYear(); // 获取年份
var month = now.getMonth()+1; // 获取月份
var day = now.getDate(); // 获取日
var hour = now.getHours(); // 获取小时
var minutes = now.getMinutes(); // 获取分钟
var seconds = now.getSeconds(); // 获取秒
var week = now.getDay();
var weekStr;
switch(week){
case 0:
weekStr="星期天";
break;
case 6:
weekStr="星期六";
break;
case 5:
weekStr="星期五";
break;
case 4:
weekStr="星期四";
break;
case 3:
weekStr="星期三";
break;
case 2:
weekStr="星期二";
break;
case 1:
weekStr="星期一";
break;
}
document.getElementById("myclock").innerHTML=year+" 年 "+ checkTime(month)+" 月 "+checkTime(day)+" 日 <br/>"+weekStr+"<br/>" +checkTime(hour)+":"+checkTime(minutes)+":"+checkTime(seconds);
｝
function checkTime(i) {
if(i<10){
i="0"+i; // 在小于 10 的数字前加一个 0
}
return i;
}
// 每隔 500 毫秒取一次当前的时间
window.setInterval("showTime()",500);
window.onload = showTime;
</script>
示例：使用 Date 对象进行倒计时，显示距离国庆节的剩余时间
<span id="time"></span>
<script type="text/javascript">
function remainTime() {
var now = new Date();// 当前时间
var year = now.getFullYear();
var month = now.getMonth()+1;
// 如果当前月份超过 10 月，则计算下一年的 10 月 1 日
if(month>=10) year+=1;
var future = new Date(year,9,1);
var remain = future.getTime()-now.getTime();// 毫秒
// 计算剩余的天数
var days = parseInt(remain/(24*60*60*1000));
// 计算剩余的小时数
var hours = parseInt(remain/(60*60*1000)%24);
// 计算剩余的分钟数
var minutes = parseInt(remain/(60*1000)%60);
var seconds = parseInt(remain/1000%60); // 计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
document.getElementById("time").innerHTML="<h2> 距离国庆节还剩 <br/>" +days+" 天 "+hours+" 小时 " +minutes+" 分钟 " + seconds+" 秒 </h2>";
}
function checkTime(i) {
if(i<10) i="0"+i; // 将 0 ～ 9 的数字前面加上 0
return i;
}
window.onload=remainTime;
window.setInterval("remainTime()",500);
</script>
Image对象
网页中使用图片，只需要调用 标签，然后在 src 属性中设置图片的绝对路径或相对路径即可
如果实现动画或者图像效果，则需要使用图像缓存技术，让用户对图像效果获得较好的体验，使用这种技术需要借助Image对象
示例：页面中显示一幅默认图像和一个按钮，点击按钮后，快速切换至另一幅图片
<head>
<meta charset="utf-8">
<title> 使用图像缓存技术</title>
<script type="text/javascript">
var picObj = new Image();
picObj.src="../img/pc.jpg";
function changePic() {
document.getElementById("pic").src=picObj.src;
}
</script>
</head>
<body>
<p><img src="../img/mobile.jpg" id="pic" width="200"/></p>
<p><input type="button" value=" 切换" onClick="changePic()"/></p>
</body>
Math对象
JavaScript 中的基本数值运算符可以用来进行一些简单的数学计算，而使用Math 对象可以进行更多的高级运算，如平方根、三角函数、对数和随机数等
与其他对象不同，Math 不需要使用new 关键字创建对象的实例
Math对象中常用的方法
| 方法 | 功能 |
|---|---|
| Math.abs(number) | 返回number 的绝对值 |
| Math.ceil(number) | 对number 向上取整，如Math.ceil(67.6) 返回值是68 |
| Math.floor(number) | 对number 向下取整，如Math.floor (67.6) 返回值是67 |
| Math.max(number1,number2) | 返回number1 与number2 中的较大值 |
| Math.min(number1,number2) | 返回number1 与number2 中的较小值 |
| Math.pow(x,y) | 返回x 的y 次幂 |
| Math.random() | 返回0 和1 之间的伪随机数，可能为0，但总是小于1 |
| Math.round(number) | 返回最接近number 的整数 |
| Math.sqrt(number) | number 的平方根 |
示例：使用Math对象，完成一个猜数游戏
var number=Math.floor(1+10*Math.random()); // 获取1 到10 之间的整数
function guess_click() {
var info = document.getElementById("guess").value; // 获取用户输入的内容
if(info.trim()!=null && info.trim()!="" && !isNaN(info)) {
var input=Math.floor(info); // 向下取整
if(number == input) {
alert(" 猜对了!");
} else if( number > input) {
alert(" 猜小了！ ");}
else {
alert(" 猜大了!");
}
} else {
alert(" 请输入整数"); }
}
数组
1、数组列表
数组列表用于表示一组数据的集合，它由一对方括号（[]）包围，列表中的每个元素用逗号分隔，数组元素可以是任意类型的数据（包括其他数组），数组的定义
var arr=["happy",12,45.6];
- 每个数组变量都有一个length属性，表示该数组中元素的个数
- 定义一个数组变量后，就可以使用“
数组变量名[索引号]”的格式来访问每个数组元素- 数组列表中的第一个元素的索引号为0，其后的每个元素的索引号依次递增，最后的元素索引为数组的长度-1
- 如果数组元素本身是一个数组，那么这个元素称为子数组，可以使用“
数组变量名[子数组索引号][子数组中的元素索引号]”的格式来访问子数组中的元素
示例：数组列表的用法，遍历数组列表中的元素
<body>
<script type="text/javascript">
var arr=[' 白色',' 紫色',' 橙色',' 红色'];
for(var i=0; i<arr.length;i++) {
document.write(arr[i]+"<br/>");
}
</script>
</body>
数组元素的下标不仅可以是数字，还可以是文本
示例：使用数组文本下标的方式来获取数组中的元素
<body>
<script type="text/javascript">
var arr=[]; // 声明数组变量
arr[' 暖色调']=[' 红色',' 橙色',' 黄色'];
arr[' 冷色调']=[' 绿色',' 青色',' 蓝色'];
document.write("<h2>");
// 输出冷色调的第3 种颜色
document.write(arr[' 冷色调'][2]);
document.write("</h2>");
</script>
</body>
2、Array
- JavaScript 中提供了一个名为Array 的内部对象，可用它来创建数组。通过调用Array 对象的各种方法，可以方便地对数组进行排序、删除和合并等操作
- Array 对象创建数组常用的3种方式
var arr = new Array() //数组初始元素个数为0
var arr = new Array(4); //创建具有指定大小的Array 对象
var arr = new Array(1,2,3); //用指定的元素列表去初始化Array 对象，数组的长度是设置的元素的数目
String对象
当某字符串使用单引号或双引号标注时，可以被当作字符串对象实例进行处理，从而直接调用String 对象的属性和方法
常用属性：length
常用方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回字符串对象中指定索引处的字符，索引从0 开始，如"Hello World".charAt(3)，返回字符"l" |
| indexOf() | 返回某个子字符串在目标字符串中首次出现的位置，如"Hello World".indexOf(“a”)，返回-1，在目标字符串中没有子字符串"a"，故返回-1 |
| substr() | 从指定索引位置开始截取指定长度的字符串， 如"Hello World".substr(2,3)，返回"llo"。第一个参数表示从索引为2 的字符开始截取，即"l"，第二个参数表示截取的长度 |
| substring() | 返回指定索引范围内的字符串， 如"Hello World".substring(2,3)，返回"l"，返回索引2和3 间的字符串，并且包括索引2 对应的字符，不包括索引3 对应的字符 |
| toLowerCase() | 将字符串转化为小写 |
| toUpperCase() | 将字符串转化为大写，如"Hello World".toUpperCase()，返回" HELLO WORLD" |
| split() | 返回按照指定分隔符拆分的若干子字符串数组，如var arr=“hello,world”.split(“,”);arr 是数组变量，其中第一个元素是"hello"，第二个元素是"world" |
示例：验证用户输入的电子邮箱和密码是否合法
function $(id) {
// 获取HTML 页面中指定id 的元素
return document.getElementById(id);
}
function check() {
if(checkEmail() && checkPwd()) {
return true;
}
return false;
}
function checkEmail() {
var email = $("email").value;
var obj=$("span_email");
obj.innerHTML="";
if(email=="") {
obj.innerHTML="Email 地址不能为空";
return false;
}
if(email.indexOf("@")==-1) {
obj.innerHTML="Email 地址格式不正确，必须包含@";
return false;
}
if(email.indexOf(".")==-1) {
obj.innerHTML="Email 地址格式不正确，必须包含.";
return false;
}
return true;
}
function checkPwd() {
var pwd = $("pwd").value;
var obj = $("span_pwd");
obj.innerHTML="";
if(pwd=="") {
obj.innerHTML="密码不能为空";//使用innerHTML 属性设置标签中的内容
return false;
}
if(pwd.length<6) {
obj.innerHTML=" 密码必须等于或大于6 个字符";
return false;
}
return true;
}
对象的创建
类（class）是一个模板，模板描述了本类中所有对象共同的属性和行为
定义JavaScript 类，需要编写一个函数，函数名为对象的类名，在函数体中定义属性和方法，即JavaScript 中的函数也是对象
用function 创建类时，要求属性和方法必须使用this 关键字来引用，表示当前类的实例。
示例：使用编写函数的方式创建类
<script type="text/javascript">
// 创建Book 类型
function Book(name,author,price) {
this.name=name;
this.author=author;
this.price=price;
this.show = function() {
alert(" 书名："+this.name+"\n 作者："+this.author+"\n 价格："+this.price);
};
}
var book=new Book("《钢铁是怎样炼成的》","奥斯特洛夫斯基","26.00 元");
book.show();
</script>
对象常用语句
1、with 语句
在一段连续的程序代码中，在with 关键字后的小括号中写出这个对象的名称，就可以在其后大括号里的执行语句中直接引用该对象的属性名或方法名，省略对象实例名和点（.）
with (对象名称){
执行语句块
}
<script type="text/javascript">
function showTime() {
var time = new Date();
with(time) {
var hh=getHours(); // 获取小时
var mm=getMinutes(); // 获取分钟
var ss=getSeconds(); // 获取秒
}
document.getElementById("time").innerHTML=hh+":"+mm+":"+ss;
}
window.setInterval("showTime()",500);
window.onload=showTime;
</script>
<span id="time"></span>
2、for…in 语句
对某个对象的所有属性进行循环操作，它将某个对象的所有属性名称逐一赋值给一个变量，不需要事先知道对象属性的个数
根据索引取出每个数组元素
for (变量 in 对象){
执行语句
}
使用for…in 语句遍历对象属性
<script type="text/javascript">
function Person() {
this.name=" 张三";
this.age="24";
this.gender=" 男";
}
var person = new Person();
var info="";
for(var prop in person) {
info +=prop+"<br/>";
}
document.write(info);
</script>
