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>……</table> | 表格标签 |
| <tr>……</tr> | 行标签 |
| <td>……</td> | 单元格标签 |
<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>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>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对象
网页中应用图片，只须要调用 <img> 标签，而后在 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() //数组初始元素个数为0var 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>jQuery
为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁应用的JavaScript库包含 jQuery、Prototype、Spry 和 Ext JS
其中应用最宽泛的JavaScrip库是jQuery, 是于2006年创立的一个JavaScript库
集 JavaScript、CSS、DOM 和 Ajax 于一体的弱小框架体系
它的宗旨是以更少的代码实现更多的性能（Write less,do more）
jQuery 基本功能
- 拜访和操作 DOM 元素
- 对页面事件的解决
- 大量插件在页面中的使用
- 与 Ajax 技术的完满联合
- 大幅提高开发效率
搭建 jQuery 开发环境
- 下载 jQuery 文件库（http://jquery.com）
- 引入 jQuery 文件库
在页面<head></head> 标签对中退出如下代码：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"> </script>示例：单击按钮时，暗藏的 <div> 逐步放大并显示进去
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript"> $(document).ready(function() { $("#btn").click(function() { $("#info").show(2000);//show(2000) 示意用 2 秒显示标签 }); });</script><input type="button" value=" 显示 " id="btn"/><div id="info" style= "display:none"> <img src="../img/mobile.jpg" width="350"/></div>- $符号标记：是JQuery对象的简写模式，$()等效于jQuery()，是jQuery程序的标记
- 隐式循环：当应用jQuery查找符合要求的元素后，毋庸一一遍历每一个元素，间接通过jQuery命令操作符合要求的元素
- 链式书写：能够将针对于同一个对象多个操作命令写在一个语句中，还能够插入换行和空格
jQuery 根本选择器
根本选择器
根本选择器是由标签 id、class、标签名和多个选择符组成
| 选择器 | 性能 | 返回值 |
|---|---|---|
| #id | 依据 id 属性值选取元素 | 单个元素 |
| .class | 依据 class 属性值选取元素 | 元素汇合 |
| element | 依据给定的标签名选取元素 | 元素汇合 |
| * | 选取所有元素，包含 html 和 body | 元素汇合 |
| selector1,selector2,…,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素汇合 |
示例：应用jQuery 显示元素并设置其款式
<script type="text/javascript"> $(function() { // 选取 <div> 和 <span> 元素，合并选取 $("div,span").css("display","block"); // 依据 id 属性值选取元素 $("#one").css("color","#f30"); // 依据给定的标签名选取元素 $("span").css("font-size","20px"); // 依据 class 属性值选取元素 $("div.two").css("background-color","#ccc"); $("#one,span").css("border-style","dashed"); });</script><div id="one"> 设置了 div 的 id 属性 </div><div class="two"> 设置了 div 的 class 属性 </div><span> SPAN </span>过滤选择器
根本过滤选择器
过滤选择器附加在所有选择器的前面，通过特定的过滤规定来筛选出一部分元素，书写时以冒号（：）结尾
过滤选择器能够分为
- 根本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
| 选择器 | 性能 | 返回值 |
|---|---|---|
| first() 或 :first | 获取第一个元素 | 单个元素 |
| last() 或 :last | 获取最初一个元素 | 单个元素 |
| :not(selector) | 获取除给定选择器之外的所有元素 | 元 素 集 合， 如$("li:not(.title)") 获 取class 不是 title 的 <li> 元素 |
| :even | 获取索引值为偶数的元素，索引号从 0 开始 | 元素汇合 |
| :odd | 将每一个选择器匹配到的元素合并后一起返回 | 元素汇合 |
| :eq(index) | 获取索引值等于 index 的元素，索引号从 0 开始 | 单个元素，如 $(“li:eq(1)”) 获取索引等于 1 的 <li> 元素 |
| :gt(index) | 获取索引值大于 index 的元素，索引号从 0 开始 | 元素汇合，如 $("li:gt(1)") 获取索引大于但不包含 1 的 <li> 元素 |
| :lt(index) | 获取索引值小于 index 的元素，索引号从 0 开始 | 元素汇合，如 $("li:lt(1)") 获取索引小于但不包含 1 的 <li> 元素 |
| :header | 获取所有题目元素，如 h1~h6 | 元素汇合 |
| :animated | 获取正在执行动画成果的元素 | 元素汇合 |
示例：应用根本过滤器定位 DOM 元素，扭转元素款式
<script type="text/javascript"> $(function() { $("#btnTitle").click(function() { // 独自应用过滤选择器，等同于附加在根本选择器 * 的前面 $(":header").css("color","#f00");}); $("#btnEven").click(function() { // 获取索引值为偶数的 <li> 元素 $("li:even").css("color","#00f");}); $("#btnOdd").click(function() { // 获取索引值为奇数的 <li> 元素 $("li:odd").css("color","#f93");}); });</script>内容过滤选择器
内容过滤选择器依据元素中的文字内容或所蕴含的子元素特色来获取元素
| 选择器 | 性能 | 返回值 |
|---|---|---|
| :contains(text) | 获取含有文本内容为 text 的元素 | 元素汇合 |
| :empty | 获取不蕴含后辈元素或者文本的空元素 | 元素汇合 |
| :has(selector) | 获取含有后辈元素为 selector 的元素 | 元素汇合 |
| :parent | 获取含有后辈元素或者文本的非空元素 | 元素汇合 |
在 :contains(text) 内容过滤选择器中，如果参数 text 内容呈现在匹配元素的任何后辈元素中，也认为该元素含有文本内容 text。如果参数 text 应用英文字母，则有大小写的区别
<input>、<img>、<br> 和 <hr> 等标签属于不蕴含后辈元素和文本的空元素
示例：应用内容过滤选择器查找 DOM 元素，扭转元素款式
$(function() { $("#btnContain").click(function() { // 获取含有文本内容为 A 的 div $("div:contains('A')").css("background-color","#f00"); }); $("#btnEmpty").click(function() { $("div:empty").css("background-color","#0f0"); //获取不蕴含后辈元素或文本的div }); $("#btnHas").click(function() { $("div:has(span)").css("background-color","#00f"); //获取含有后辈元素为span的元素 }); $("#btnParent").click(function() { //获取含有后辈元素或者文本的div元素 $("div:parent").css("background-color","white"); }); });可见性过滤选择器
可见性过滤选择器依据元素是否可见的特色来获取元素
| 选择器 | 性能 | 返回值 |
|---|---|---|
| :hidden | 选取不可见元素 | 元素汇合，如 $(":hidden") 选取所有暗藏的元素 |
| :visible | 选取可见元素 | 元素汇合，如 $(":visible") 选取所有可见的元素 |
不可见元素包含：css 款式中 display 属性值为 none 的元素、type 属性值为 hidden 的 <input> 元素及宽高设置为 0 的元素
示例：应用可见性过滤选择器锁定 DOM 元素，扭转元素款式
<script type="text/javascript"> $(function() { $("#btnShow").click(function() { $(".pic:hidden").show().addClass("current"); }); $("#btnHidden").click(function() { $(".pic:visible").hide(); }); });</script><img src="../img/mobile.jpg" class="pic"/><p><input type="button" value=" 显示 " id="btnShow"/> <input type="button" value=" 暗藏 " id="btnHidden"/></p>属性过滤选择器
属性过滤选择器依据元素的某个属性获取元素，以“[”号开始、以“]”号完结
| 选择器 | 阐明 | 返回值 |
|---|---|---|
| [attribute] | 获取领有该属性的所有元素，如 $('li[title]') 示意获取所有蕴含title 属性的 <li> 元素 | 元素汇合 |
| [attribute=value] | 获取某属性值为 value 的所有元素，如 $('li[title=test2]') 示意获取所有蕴含 title 属性且属性值等于 test2 的 <li> 元素 | 元素汇合 |
| [attribute!=value] | 获取某属性值不等于 value 的所有元素，如 $('li[title!=test2]') 示意获取所有蕴含 title 属性且属性值不等于 test2 的 <li> 元素 | 元素汇合 |
| [attribute^=value] | 选取属性值以 value 结尾的所有元素，如 $('a[href^="mailto:"]') 示意获取所有蕴含 href 属性，且属性值以 mailto: 结尾的 <a> 元素 | 元素汇合 |
| [attribute$=value] | 选取属性值以 value 完结的所有元素，如 $('a[href$=".zip"]') 示意获取所有蕴含 href 属性，且属性值以 .zip 结尾的 <a> 元素 | 元素汇合 |
| [attribute*=value] | 选 取 属 性 值 中 包 含 value 的 所 有 元 素， 如 $('a[href*="jquery.com"]') 示意获取所有蕴含 href 属性且属性值中蕴含 jquery.com的 <a> 元素 | 元素汇合 |
[selector1][selector2]…[selectorN] | 合并多个选择器，满足多个条件，每抉择一次将放大一次范畴，如 $('li[id][title^=test]') 选取所有领有属性 id 且属性 title 以 test结尾的 <li> 元素 | 元素汇合 |
应用属性过滤选择器锁定 DOM 元素，全选筛选框
<script type="text/javascript"> $(function() {// 页面加载事件 $("input[type='button']").click(function() { $("input[name='songs']").attr("checked","checked"); }); });</script><p> 请抉择喜爱的歌曲：<br/> <input type="checkbox" name="songs"/> 小侥幸 <input type="checkbox" name="songs"/> 非酋 <input type="checkbox" name="songs"/> 佛系少女 <input type="checkbox" name="songs"/> 醉赤壁</p><input type="button" value=" 全选 "/>档次选择器
档次选择器通过 DOM 元素之间的档次关系获取元素，其次要的档次关系包含后辈、父子、相邻和兄弟关系。档次选择器由两个选择器组合而成
| 名称 | 语法 | 性能 | 返回值 |
|---|---|---|---|
| 后辈选择器 | selector1 selector2 | 从 selector1 的后辈元素里选取 selector2 | 元素汇合，如 $(“#nav span”) 示意选取 #nav下所有的<span>元素 |
| 子选择器 | selector1>selector2 | 从 selector1 的子元素里选取 selector2 | 元素汇合，如("#nav>span")示意选取 #nav 的子元素<span> |
| 相邻元素选择器 | selector1+selector2 | 从 selector1 前面的第一个兄弟元素里选取 selector2 | 元素汇合，如 $("h2+dl") 示意选取紧邻<h2>元素之后的同辈元素 <dl> |
| 同辈元素选择器 | selector1~selector2 | 从 selector1 前面的所有兄弟元素里选取 selector2 | 元 素 集 合， 如 $("h2~dl") 表 示 选 取<h2> 元素之后所有的同辈元素<dl> |
- selector1 selector2 与 selector1>selector2 所抉择的元素汇合是不同的，前者的档次关系是先人与后辈，而后者是父子关系
- selector1+selector2 能够应用 jQuery 对象的 next() 办法代替
- selector1~selector2 从 selector1 前面的所有兄弟元素里选取 selector2，不能获取后面局部，能够应用nextAll() 办法代替。而 siblings() 办法获取全副的相邻元素，不分前后
- selector1 selector2 与 selector1:has(selector2) 尽管这两个选择器都要求 selector2 是 selector1 的后辈元素，然而前者最终选取的是后辈元素，后者最终选取的是领有这些后辈元素的元素
应用档次选择器锁定 DOM 元素
<script type="text/javascript"> $(function() {// 页面加载结束事件 // 设置题目的色彩 $(":header").css("color","red"); // 设置第一层无序列表的字体色彩 $(":header+ul>li").css("color","green"); // 设置第二层无序列表的字体色彩 $(":header+ul>li>ul>li").css("color","blue"); });</script>html代码略表单选择器
| 选择器 | 性能 | 返回值 |
|---|---|---|
| :input | 获取 <input><textarea><select><button> 元素 | 元素汇合 |
| :text | 获取合乎 [type=text] 的<input> 元素 | 元素汇合 |
| :password | 获取合乎 [type=password] 的 <input> 元素 | 元素汇合 |
| :radio | 获取合乎 [type=radio] 的 <input> 元素 | 元素汇合 |
| :checkbox | 获取合乎 [type=checkbox] 的 <input> 元素 | 元素汇合 |
| :image | 获取合乎 [type=image] 的 <input> 元素 | 元素汇合 |
| :file | 获取合乎 [type=file] 的 <input> 元素 | 元素汇合 |
| :hidden | 参考“可见性过滤选择器” | 元素汇合 |
| :button | 获取 <button> 元素和合乎 [type=button] 的 <input> 元素 | 元素汇合 |
| :submit | 获取合乎 [type=submit] 的 <input> 元素 | 元素汇合 |
| :reset | 获取合乎 [type=reset] 的 <input> 元素 | 元素汇合 |
表单对象属性过滤选择器
表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的领域，能够附加在其余选择器的前面，次要性能是对所抉择的表单元素进行过滤
| 选择器 | 性能 |
|---|---|
| :enabled | 选取可用的表单元素 |
| :disabled | 选取不可用的表单元素 |
| :checked | 选取被选中的 <input>元素 |
| :selected | 选取被选中的 <option> 元素 |
示例：应用表单选择器和表单对象属性过滤选择器锁定 DOM 元素
$(function() {// 页面加载结束事件 $("#pa :button").click(function() { // 选择器 #pa 后的空格示意获取后辈元素 $("#pa :text:enabled").css("border","1px solid red"); }); $("#pb :button").click(function() { $("#pb :radio:checked").parent().css("background-color","#63c"); }); $("#pc :button").click(function() { $("#pc :checkbox:checked").parent().css("background-color","#63c"); }); $("#pd :button").click(function() { var info = " 你最喜爱的球星是：" info += $("#pd :input option:selected").val(); alert(info); }); });DOM 对象
通过传统的 JavaScript 办法拜访 DOM 中的元素，可生成 DOM 对象。如：
var obj=document.getElementById("content")应用JavaScript中的getElementById ()办法，在文档中抉择id="content"的匹配元素，最初将生成的DOM对象贮存在obj变量中
jQuery 对象
应用 jQuery 选择器抉择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具备特有的办法和属性，齐全可能实现传统 DOM 对象的所有性能
应用jQuery操作元素
- 应用选择器获取某个元素
- 应用jQuery对象的办法操作元素
jQuery 对象和 DOM 对象的互相转换
jQuery 对象转换成 DOM 对象
- 应用 jQuery 中的 get() 办法，其语法结构为：get([index])
- 如果get()办法不带参数，get()办法会返回所有匹配元素的DOM对象，并将它们蕴含在一个数组中
DOM 对象转换成 jQuery 对象
- 对于一个 DOM 对象，只须要用 $() 将它包装起来就能够取得对应的 jQuery 对象，其语法结构为：$(DOM 对象 )
- 示例：应用 DOM 对象更改页面中文本字体的色彩
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript"> $(function() { $("h3").click(function() { this.style.color="red";//DOM 对象 }); });</script><body> <h3> 全副商品分类 </h3></body>jQuery 中应用 DOM 操作元素
元素款式的操作
1、间接设置元素款式值：在 jQuery 中，能够通过 css() 办法为某个指定的元素设置款式值
设置单个属性：
jQuery 对象.css(name,value); //其中name为款式名称，value为款式的值同时设置多个属性：
jQuery 对象.css({name:value,name:value,name:value…});示例：在 jQuery 中应用 DOM 设置元素的款式值
<script type="text/javascript"> $(function() { $("#content").click(function() { $(this).css("font-weight","bold"); $(this).css("font-style","italic"); $(this).css("background-color","#eee"); }); });</script><body> <p id="content">Write Less, Do More.</p></body>2、减少类：通过 jQuery 对象的 addClass() 办法减少元素类
减少单个类：
jQuery 对象.addClass(class);同时减少多个类，以空格隔开类名：
jQuery 对象.addClass(class0 class1…);示例：在 jQuery 中应用 addClass(class) 办法，给<p>标签动静增加款式
<style type="text/css"> .cls1{ font-weight:bold; font-style:italic; background-color:#eee; }</style><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript"> $(function() { $("#content").click(function() { $(this).addClass("cls1"); }); });</script><p id="content">Write Less, Do More.</p>3、删除类：与减少 css 类的 addClass() 办法相同，removeClass() 办法则用于删除类
jQuery 对象.removeClass([class]);示例：点击按钮后，删除增加的 <p> 标签款式类
<style type="text/css"> .cls1{ font-weight:bold; font-style:italic; background-color:#eee; }</style>4、 类切换 toggleClass() 模仿了 addClass() 与 removeClass() 实现款式切换的过程 通过 toggleClass() 办法能够为元素切换不同的类
jQuery 对象.toggleClass(class);示例：应用toggleClass(class) 办法，实现减少类款式和删除类款式的切换
<style type="text/css"> .cls1{ font-weight:bold; font-style:italic; background-color:#eee; }</style><script type="text/javascript"> $(function() { 增加类款式的代码略 $("#content").click(function() { $(this).toggleClass("cls1"); }); });</script><p id="content">Write Less, Do More.</p>元素内容和值的操作
操作元素内容的办法包含 html() 和 text()
| 语法格局 | 参数阐明 | 性能形容 |
|---|---|---|
| html() | 无参数 | 用于获取第一个匹配元素的 HTML 内容或文本内容 |
| html(content) | content 参数为元素的HTML内容 | 用于设置所有匹配元素的 HTML 内容或文本内容 |
| text() | 无参数 | 用于获取所有匹配元素的文本内容 |
| text(content) | content 参数为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
示例：在页面中点击“减少图像”按钮后，在 <p> 标签中减少一幅图像
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript"> $(function() { $("input[type='button']").click(function() { // 设置页面中所有 <p> 元素外部的 HTML 代码 $("p").html("<img src='../img/frozen.jpg'/>"); }); });</script><body> <p></p> <input type="button" value=" 减少图像 "/></body>获取或设置元素值：要获取元素的值，能够通过 val() 办法来实现
jQuery 对象.val([val]);如果 val() 办法不带参数，示意获取某元素的值
如果 val() 办法带有参数，则示意将参数赋给指定的元素，即设置元素的值
示例：制作页面登录框水印特效
<script type="text/javascript"> $(function() { $("#userEmail").focus(function(){ // 邮箱输入框取得焦点 var text_value = $(this).val(); // 获取以后文本框的值 if(text_value == "[email protected]") { $(this).val(""); // 如果符合条件，则清空文本框内容 } }); $("#userEmail").blur(function() { // 邮箱输入框失去焦点 var text_value = $(this).val(); // 获取以后文本框的值 if(text_value=="") { $(this).val("[email protected]"); } // 如果符合条件，则设置内容 }); });</script>元素属性的操作
1、获取或设置元素的属性值：通过 attr() 办法能够获取或设置元素的属性值
//获取属性值，参数name示意属性的名称jQuery 对象.attr(name); //设置属性值，参数value示意属性的值jQuery 对象.attr(name,value);//同时设置多个属性jQuery 对象.attr({name0:value0,name1:value1…});//绑定函数，将函数返回值作为元素的属性值jQuery 对象.attr(name,function(index){});示例：在页面中创立一个 <img> 标签，当页面加载结束后，随机展现图片
<script type="text/javascript"> $(function() { var imgs = new Array(); imgs[0]="../img/img_1.jpg"; imgs[1]="../img/img_2.jpg"; imgs[2]="../img/img_3.jpg"; imgs[3]="../img/img_4.jpg"; $("img").attr("src",function(){ // 随机产生 0 到 3 之间的数，即随机产生数组的下标 var i = Math.ceil(Math.random()*3); // 函数的返回值作为 src 的属性值 return imgs[i];});});</script><body><img/></body>2、删除元素的属性 可应用 removeAttr() 办法将元素的属性删除
jQuery 对象.removeAttr(name);jQuery 中应用 DOM 操作节点
创立节点元素
通过函数 $(html) 实现元素的创立
调用新元素的下级或者同辈的相干办法，把新元素增加到 DOM 树中
$(html);插入节点
动态创建新元素后，须要执行插入或追加操作
依照元素的档次关系来分，能够分为外部和内部两种办法
1、元素外部插入子节点
| 语法格局 | 性能形容 |
|---|---|
| append(content) | $(A).append(B) 示意将 B 追加到 A 中，如 $("ul").append($li); |
| appendTo(content) | $(A).appendTo(B) 示意把 A 追加到 B 中，如 $li.appendTo("ul") |
| prepend(content) | $(A).prepend(B) 示意将 B 前置插入到 A 中，如 $("ul").prepend($li) |
| prependTo(content) | $(A).prependTo(B) 示意将 A 前置插入到 B 中，如 $li.prependTo("ul") |
示例：在页面的文本框中输出风行的歌曲名和歌手后，将其增加到列表的最后面
<script type="text/javascript"> $(function() { $("#song").blur(function() { // 输入框中的内容不为空 if($(this).val()!="") { // 创立 li 节点，节点的文本内容是在文本框中输出的 var $li=$("<li>"+$(this).val()+"</li>"); // 将 $li 对象前置插入到 <ul> 元素中 $li.prependTo($("ul")); // 清空输入框中的内容 $(this).val(""); } }); });</script>2、元素内部插入同辈节点
| 语法格局 | 性能形容 |
|---|---|
| after(content) | $(A).after(B) 示意将 B 插入到 A 之后，如 $("ul").after($div); |
| insertAfter(content) | $(A).insertAfter(B) 示意将 A 插入到 B 之后，如 $div.insertAfter("ul") |
| before(content) | $(A).before(B) 示意将 B 插入至 A 之前，如 $("ul").before($div) |
| insertBefore(content) | $(A).insertBefore(B) 示意将 A 插入到 B 之前，如 $div.insertBefore("ul") |
示例：在页面中点击“流行歌曲”题目，主动增加歌曲列表项
<script type="text/javascript"> $(function() { $("h3").click(function() { var $ul=$("<ul></ul>"); var $li1=$("<li> 想起————韩雪 </li>"); var $li2=$("<li> 没那么简略————黄小琥 </li>"); var $li3=$("<li> 指望————郁可唯 </li>"); // 将创立的 <ul> 元素作为 <h3> 元素的同辈元素，插入到 <h3> 元素之后 $(this).after($ul); $ul.append($li1); // 追加 $ul 对象的子节点 $ul.append($li2); $ul.append($li3); });});</script><body> <h3> 流行歌曲 </h3> </body>替换节点
在 jQuery 中，如果要替换元素中的节点，能够应用 replaceWith() 和 replaceAll() 这两种办法
jQuery 对象.replaceWith(content);jQuery 对象.replaceAll(selector);replaceWith() 办法的性能是将所有抉择的元素替换成指定的 HTML 页面元素
replaceAll() 办法的性能是用所抉择的元素替换指定的 <selector> 元素
示例：在页面中点击“替换”按钮，将歌曲列表中的最初一首歌曲替换成其余歌曲
<script type="text/javascript"> $(function() { $("input[type='button']").click(function() { var $li = $("<li> 兴许今天————姚贝娜 </li>"); $("ul li:last").replaceWith($li); }); });</script><body> <h3> 流行歌曲 </h3> <ul> <li> 想起————韩雪 </li> <li> 没那么简略————黄小琥 </li> <li> 指望————郁可唯 </li> </ul> <input type="button" value=" 替换 "/></body>复制节点
在页面中，有时候须要复制某个元素节点。能够通过 clone() 办法实现性能
jQuery 对象.clone();该办法只是复制元素自身，被复制后的新元素不具备任何元素行为。如果须要将该元素的全副行为也进行复制，那么能够通过 clone(true) 实现
示例：在页面中插入一幅图片，当点击此图片时，将其复制并粘贴在右侧
<script type="text/javascript"> $(function() { $("img").click(function() { $(this).clone(true).appendTo($("#p1")); }); });</script><body> <p id="p1"> <img src="../img/img_2.jpg"/> </p></body>删除节点
在操作页面时，删除多余的或指定的页面元素是十分必要的。jQuery 中提供了 remove() 办法来删除元素
jQuery 对象.remove([expr]);其中参数 expr 为可选项，该参数为筛选元素的 jQuery 表达式，通过该表达式将获取指定的元素，并进行删除
示例：在页面中插入无序列表和按钮，点击按钮时，将无序列表最初一项删除
<script type="text/javascript"> $(function() { $("input[type='button']").click(function() { //$("ul li").remove(); // 删除所有的列表项 $("ul li").remove("ul li:last"); // 删除最初一项 }); });</script><body<h3> 流行歌曲：</h3> <ul> <li> 一个像夏天一个像秋天————范玮琪 </li> <li> 想起————韩雪 </li> <li> 没那么简略————黄小琥 </li> <li> 指望———郁可唯 </li> </ul> <input type="button" value=" 删除 "/></body>遍历元素
jQuery 中元素的遍历
在 jQuery 中，能够间接应用 each() 办法实现元素的遍历
jQuery 对象.each(callback);参数 callback 是一个function函数，能够给该函数传递一个index参数，此形参是遍历元素的序号。如果须要在函数体中拜访以后遍历到的元素，能够应用 this 关键字
示例：点击“增加边框”按钮后，给页面图片增加边框并设置其 title 属性
<script type="text/javascript"> $(function() {// 页面加载结束事件 $("input[type='button']").click(function() { $("img").each(function(index, element) { //jQuery 对象 //$(this).css("border","2px solid red"); //$(this).attr("title"," 第 "+(index+1)+" 幅风景画 "); //DOM 对象 this.style.border="2px solid red"; this.title=" 第 "+(index+1)+" 幅风景画 ";});});});</script>jQuery动画与特效
显示暗藏动画成果
show() 法能动静地扭转以后元素的高度、宽度和不透明度，最终显示以后元素
hide() 办法会动静地扭转以后元素的高度、宽度和不透明度，最终暗藏以后元素
jQuery 对象.show(duration,[fn]);jQuery 对象.hide(duration,[fn]);参数duration 示意动画成果运行的工夫，能够应用关键字slow、normal 和fast，别离对应工夫长度0.6 秒、0.4秒和0.2 秒。当不设置值时，示意立刻显示/暗藏元素
可选参数fn 为在动画实现时执行的函数
示例：应用 show() 办法与hide() 办法以动画的形式显示和暗藏图片
<script type="text/javascript"> $(function(){ $("#btn").click(function() { if($(this).val()==" 显示") { $("#pic").show("slow",function() { $(this).css({"border":"1px solid red","padding":"5px"}); }); $(this).val("暗藏"); } else { $("#pic").hide("slow"); $(this).val("显示"); }});});</script>toggle()办法
toggle() 办法会动静地扭转以后元素的高度、宽度和不透明度，最终切换以后元素的可见状态
如果元素是可见的，则切换为暗藏状态；如果元素是暗藏的，则切换为可见状态
jQuery 对象.toggle(duration,[fn]);示例：制作可伸缩的垂直菜单的操作
<style> //其余款式代码略 ul li.down{ background-image:url(../img/down.jpg); }</style>淡入淡出动画成果
fadeIn() 办法能够动静地扭转以后元素的透明度（其余不变），实现淡入的动画成果，最终显示以后元素
fadeOut() 办法能够动静地扭转以后元素的透明度（其余不变），实现淡出的动画成果，最终暗藏以后元素
jQuery 对象.fadeIn(duration,[fn]); jQuery 对象.fadeOut(duration,[fn]);示例：应用 fadeIn() 办法与fadeOut() 办法以淡入淡出的形式显示和暗藏图片
<script type="text/javascript"> $(function(){ $("#btn").click(function() { if($(this).val()==“淡入") { $("#pic").fadeIn("slow",function() { $(this).css({"border":"1px solid red","padding":"5px"}); }); $(this).val(“淡入"); } else { $("#pic").fadeOut("slow"); $(this).val(“淡出"); } }); });</script>fadeToggle()办法
fadeToggle() 办法会动静地扭转以后元素的透明度，最终切换以后元素的可见状态
如果元素是可见的，则通过淡出成果切换为暗藏状态；如果元素是暗藏的，则通过淡入成果切换为可见状态
jQuery 对象.fadeToggle(duration,[fn]);示例：应用fadeToggle()办法实现后三项商品类型的动画成果在淡出和淡入之间切换
<style> //其余款式代码略 ul li.down{ background-image:url(../img/down.jpg); }</style><script type="text/javascript"> $(function(){ $("#menu li.lastItem").click(function() { // 切换菜单 $("#menu li:gt(5):not(:last)").fadeToggle(); // 更换底部箭头方向 $(this).toggleClass("down"); }); });</script>fadeTo() 办法
fadeTo() 办法能够扭转元素的透明度到指定某一个值
fadeTo() 办法能够扭转元素的透明度到指定某一个值参数duration 为动画成果的速度，应用形式与hide()、show() 等办法统一
参数opacity 用于指定不通明值，取值范畴是0 ～ 1（0 代表齐全通明，1 代表齐全不通明）
示例：应用fadeTo ()办法扭转图片的透明度
<script type="text/javascript"> $(function(){ $("#sel").change(function() { var opacity = $(this).val(); $("img").fadeTo(3000,opacity); }); });</script>滑入滑出动画成果
slideDown() 办法会动静地扭转以后元素的高度（其余不变），由上到下滑入，即高度向下增大，使其呈现出一种“滑动”的成果，直至最终显示以后元素
slideUp() 办法会动静地扭转以后元素的高度（其余不变），由下到上滑出，即高度向上减小，直至最终暗藏以后元素
jQuery 对象.slideDown(duration,[fn]);jQuery 对象.slideUp(duration,[fn]);示例：制作图书销售网站中“我的书库”菜单的二级菜单滑入滑出的动画成果
<script type="text/javascript"> $(function(){ $(".secondLi").hover(function() { $(".secondLi ul").slideDown(2000); },function(){ $(".secondLi ul").slideUp(2000); }); });</script>html和css代码略slideToggle()办法
slideToggle() 办法会动静地扭转以后元素的高度（其余不变），最终切换以后元素的可见状态
如果元素是可见的，则通过滑出成果切换为暗藏状态；如果元素是暗藏的，则通过滑入成果切换为可见状态
jQuery 对象.slideToggle(duration,[fn]);示例：应用slideToggle()办法实现二级菜单滑入滑出的动画成果
<script type="text/javascript"> $(function(){ $(".secondLi").click(function() { $(".secondLi ul").slideToggle(2000); }); });</script>html和css代码略自定义动画
简略的动画
animate() 办法能够动静地扭转以后元素的各种 CSS 属性
jQuery 对象.animate(properties,[duration],[fn]);参数 properties 应用一个“名：值”模式的对象来设置须要扭转的 CSS 属性。
animate() 办法只能扭转能够取数字值的 CSS 属性，如宽高，边框粗细，内外边距，元素地位，字体大小，字体间距，背景定位和透明度。
示例：animate() 办法实现图片的放大显示
<script type="text/javascript"> $(function() { $("img").click(function() { $(this).animate({width:"180px",height:"180px"},"slow"); }); });</script><body> <img src="../img/tmac.jpg"/></body>挪动地位的动画
通过 animate() 办法，不仅能够利用动画成果减少元素的长度和宽度，还可能利用动画成果扭转元素在页面中的地位
示例：应用 animate() 办法扭转页面元素的地位
<script type="text/javascript"> $(function() { $("img").click(function() { //属性值前能够加上 "+=" 或 "-=" 运算符号，示意在原先属性值上累加或累减 $(this).animate({left:"+=100px",top:"+=100px",opacity:0.5},3000); }); });</script><body> <img src="../img/tmac.jpg"/></body>队列中的动画
所谓“队列”动画，是指在元素中执行一个以上的多个动画成果，即有多个 animate() 办法在元素中执行
依据这些 animate() 办法执行的先后顺序，造成了动画“队列”，产生“队列”后，动画的成果便按“队列”的程序进行展现
示例：演示队列中动画的应用
<script type="text/javascript"> $(function() { //<div> 元素点击事件 $("div").click(function() { $(this).animate({height:100},"slow"); // 第 1 列 $(this).animate({width:100},"slow"); // 第 2 列 $(this).animate({height:50},"slow"); // 第 3 列 $(this).animate({width:50},"slow"); // 第 4 列 });</script><body> <div> 队列中的动画 </div></body>动画进行
stop() 办法可能完结以后的动画，并立刻进入到下一个动画
jQuery 对象.stop([clearQueue],[gotoEnd]);不带任何参数的 stop() 办法，则会立刻进行以后正在执行的动画，如果前面还有动画要持续，则以以后状态开始接下来的动画
learQueue 参数示意是否清空未执行完的动画队列，gotoEnd 参数示意是否立刻实现正在执行的动画
示例：防止当用户光标进入或移出的速度太快，导致移入移出与对应的动画不统一
<script type="text/javascript"> $(function(){ $(".secondLi").hover(function() { $(".secondLi ul").stop().slideDown(2000); },function(){ $(".secondLi ul").stop().slideUp(2000); }); });</script>html和css代码略Vue.js
创立一个vue我的项目
<!DOCTYPE html><html> <head> <!-- 引入vue --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <meta charset="utf-8" /> <title></title> </head> <body> <!-- 定义一个vive --> <div id="app"> {{ message }} </div> </body> <script type="text/javascript"> // 定义moldel var exmpleData = { message: "hello word" } // 创立一个Vue实例或ViewModel，它连贯View与 Model var vm = new Vue({ el: '#app', data: exmpleData }) </script></html>罕用参数