HTML 基础
HTML5 标签
doctype 标签
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>
复制代码
段落标签
换行标签
水平标签
强调标签
<b> 要以粗体显示的文字 </b><strong> 要以粗体显示的文字 </strong>
复制代码
图片标签与超链接标签
图片标签
<img src="路径" alt="提示信息" align="对齐方式" border="边框大小" width="宽度" height="高度"/>
复制代码
超链接标签
<a 属性 ="属性值"> 链接显示文本 </a>
复制代码
音频标签视频标签
音频标签
<audio width="640" height="360" src="music.mp3" controls="true">您的浏览器不支持 audio 元素！</ audio >
复制代码
视频标签
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持 audio 元素！</video>
复制代码
列表、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 标签时，将按照从上到下的方式排列。
span 标签
span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 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 个标签通常配合使用，主要对表格数据进行逻辑分组。
表单标签
<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="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 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
类型匹配验证
控制字符数量
验证输入范围
自定义错误消息
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;}
复制代码
伪类选择器
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 样式 > 类样式 >元素选择符
内嵌样式 > 内部样式 > 外部样式
常用的样式属性
字体属性
文本属性
边距和填充
边距是指页面中元素与元素之间的间距，margin 分为上、下、左、右 4 个方向，可以单独设置 margin-top、margin-left、margin-right、margin-bottom，也可以使用复合属性 margin 进行设置。
使用复合属性 margin 设置边距时，存在 4 种方式。
元素的填充也称为内边距，它是指元素内容与边框之间的距离，填充分为上、下、左、右四个方向，可通过 padding-top、padding-left、padding-right、padding-bottom 分别设置四个方向的内边距，也可以通过复合属性 padding 设置。
边框属性
1、border 属性
2、border-radius
列表属性
背景和阴影属性
背景属性
背景图片的定位
background-position: 关键字 | 百分比 | 像素值
复制代码
CSS Sprites
CSS Sprites，在国内也称之为 CSS 精灵，是一种图片网页应用处理方式。它允许将一个页面涉及到的所有零星图片均包含到一张大图中。
其实，CSS Sprites 的目的是通过整合图片，减少对服务器的请求数量以及请求的字节数，从而加快页面的加载速度。
背景的渐变
线性渐变
background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);
复制代码
径向渐变
background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);
复制代码
阴影属性
文字阴影
text-shadow: h-shadow v-shadow blur color;
复制代码
盒子阴影
box-shadow: 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 层（不占用位置）
visibility 属性
CSS 中 visibility 可以隐藏/显示 html 元素包括 div 层（占用位置）
visibility：hidden | visible;
复制代码
盒子浮动
float 属性
float : none | left | right
复制代码
清除浮动
浮动产生的原因：
一个盒子里使用了 CSS float 浮动属性，导致父级对象盒子不能被撑开，这样 CSS float 浮动就产生了。左边盒子使用左浮动，右边盒子使用右浮动，两个盒子被包在另外一个盒子中。
浮动产生的负作用：
背景不能显示
边框不能撑开
margin padding 设置值不能正确显示
清除浮动影响的方法：
1、对父级设置适合 CSS 高度
2、clear: both 清除浮动
3、父级 div 定义 overflow:hidden
盒子定位
静态定位
position 属性的默认值 static 表示 CSS 文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局。
相对定位
相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。
固定定位
绝对定位
绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上。
z-index 属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
页面布局与规划
表格布局
流式布局
瀑布流布局
瀑布流布局是流式布局的一种，是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
<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";
变量命名规则
数据类型
JavaScript 中有 5 种简单数据类型，也称为基本数据类型
undefined
null
boolean
number
string
另外还有一种复杂数据类型——object 对象类型
由于 JavaScript 中的变量是弱类型，可通过 typeof 操作符获取变量的数据类型
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>
复制代码
选择结构
1、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 循环语句
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++; }
复制代码
自定义函数
函数的定义
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>
复制代码
函数的调用
<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
<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：非数字值)
parseFloat () 函数
parseFloat()函数和parseInt()函数类似，只不过它是返回一个浮点数
isNaN () 函数
isNaN() 函数用于判断参数是否是 NaN（不是数字）。如果是 NaN， 那么 isNaN 函数返回 true ，否则返回 false
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 对象常用属性
window 对象常用方法
使用 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，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征
<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 对象可以将当前浏览器页面跳转到某个曾经打开过的页面
可以使用 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 信息，相当于浏览器的地址栏
<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 前缀
<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 属性来引用它
navigator 对象的常用属性如下
<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 会误导浏览器检测，所以可以使用对象检测来嗅探不同的浏览器。但不同的浏览器支持不同的对象，因此对于不同的浏览器，要使用不同的对象来检测
<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 对象
<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 内容
示例：使用 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 元素
示例： 使用 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 元素
示例：当鼠标移动到页面中的菜单上时，修改菜单的背景图像以
<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 中每个节点都具有访问其他节点的属性
示例：使用属性查找节点，并设置其样式
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 时则是文本节点
动态添加和删除节点
添加节点
删除节点
使用 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>
复制代码
示例：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 对象，完成一个猜数游戏
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
var arr = new Array() //数组初始元素个数为0var arr = new Array(4); //创建具有指定大小的Array 对象var arr = new Array(1,2,3); //用指定的元素列表去初始化Array 对象，数组的长度是设置的元素的数目
复制代码
String 对象
当某字符串使用单引号或双引号标注时，可以被当作字符串对象实例进行处理，从而直接调用 String 对象的属性和方法
常用属性：length
常用方法
示例：验证用户输入的电子邮箱和密码是否合法
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 关键字后的小括号中写出这个对象的名称，就可以在其后大括号里的执行语句中直接引用该对象的属性名或方法名，省略对象实例名和点（.）
<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 语句遍历对象属性
<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 开发环境
在页面<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、标签名和多个选择符组成
示例：使用 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>
复制代码
过滤选择器
基本过滤选择器
过滤选择器附加在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，书写时以冒号（：）开头
过滤选择器可以分为
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
示例：使用基本过滤器定位 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 内容出现在匹配元素的任何后代元素中，也认为该元素含有文本内容 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"); }); });
复制代码
可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征来获取元素
不可见元素包括：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>
复制代码
属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，以“[”号开始、以“]”号结束
使用属性过滤选择器锁定 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 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系
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代码略
复制代码
表单选择器
表单对象属性过滤选择器
表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的范畴，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行过滤
示例：使用表单选择器和表单对象属性过滤选择器锁定 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 对象
DOM 对象转换成 jQuery 对象
<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()
示例：在页面中点击“增加图像”按钮后，在 <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() 方法来实现
如果 val() 方法不带参数，表示获取某元素的值
如果 val() 方法带有参数，则表示将参数赋给指定的元素，即设置元素的值
示例：制作页面登录框水印特效
<script type="text/javascript"> $(function() { $("#userEmail").focus(function(){ // 邮箱输入框获得焦点 var text_value = $(this).val(); // 获取当前文本框的值 if(text_value == "xxx@163.com") { $(this).val(""); // 如果符合条件，则清空文本框内容 } }); $("#userEmail").blur(function() { // 邮箱输入框失去焦点 var text_value = $(this).val(); // 获取当前文本框的值 if(text_value=="") { $(this).val("xxx@163.com"); } // 如果符合条件，则设置内容 }); });</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 树中
插入节点
动态创建新元素后，需要执行插入或追加操作
按照元素的层次关系来分，可以分为内部和外部两种方法
1、元素内部插入子节点
示例：在页面的文本框中输入流行的歌曲名和歌手后，将其添加到列表的最前面
<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、元素外部插入同辈节点
示例：在页面中点击“流行歌曲”标题，自动添加歌曲列表项
<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() 方法实现功能
该方法只是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要将该元素的全部行为也进行复制，那么可以通过 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>
复制代码
常用参数
评论