前端三件套 HTML+CSS+JS基础知识内容笔记
明金同学 -
<!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><html>
<head>文件头</head>
<body>文件主体</body>
</html><html>
<head>
<meta charset="utf-8" />
</head>
<body>文件主体</body>
</html><html>
<head>
<meta charset="utf-8">
<title>窗体标题</title>
</head>
<body>文件主体</body>
</html><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="高度"/><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>一、无序列表
<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><span> 文本 </span><table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
</table><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="password" id="userPwd" name="userPwd" /><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" />控制字符数量
验证输入范围
自定义错误消息
CSS基础语法样式表的分类外部样式表1、链接外部样式： 链接外部样式表是指通过HTML的link链接标签，建立样式文件和网页的关联。<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head><head>
<style type="text/css">
@import "css/style.css";
</style>
</head><head>
<style type=”text/css”>
选择符 {样式属性：属性值;......}
选择符 {样式属性：属性值;......}
</style>
</head><标签名 >......</标签名><p ><style type="text/css">
标签名 {
属性1：属性值1;
属性2：属性值2;
}
</style>1、定义类样式
<style type="text/css">
.类名 {
属性1：属性值1;
}
</style>2、应用类样式
<标签名 > 标签内容 </标签名><style type="text/css">
#ID标识名 {
属性1：属性值1;
属性2：属性值2;
}
</style>p,.red,#header {
color:red;
font-size:12px;
}#header ul li a {
color:red;
font-size:12px;
}p.red {
color: red;
font-size: 23px;
}标签名:伪类名{
属性：属性值;
}<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:12pxfont-weight定义字体的粗细font-weight:boldcolor字体颜色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:solidborder-width设置边框的宽度border-width:1pxborder-color设置边框的颜色border-color:redborderborder复合属性，用于设置边框宽度、样式以及颜色border:1px solid red2、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 参数 44个参数对应左上角、右上角、右下角和左下角列表属性属性名说明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: 关键字 | 百分比 | 像素值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;盒子阴影
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 层（不占用位置）display:none | block;visibility：hidden | visible;float : none | left | right浮动产生的原因：
一个盒子里使用了 CSS float 浮动属性，导致父级对象盒子不能被撑开，这样 CSS float 浮动就产生了。左边盒子使用左浮动，右边盒子使用右浮动，两个盒子被包在另外一个盒子中。
浮动产生的负作用：
背景不能显示边框不能撑开margin padding设置值不能正确显示清除浮动影响的方法：
1、对父级设置适合 CSS 高度
对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。比如我们知道内容高度是 100px+ 上下边框为 2px，这样具体父级高度为 102px。2、clear: both 清除浮动
</div>” 结束前加此div引入“clear:both”样式即可清除浮动。3、父级 div 定义 overflow:hidden
overflow: hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。盒子定位静态定位position 属性的默认值static表示 CSS 文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局。position: static;相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。
position: relative;position: fixed;position: absolute;z-index:数字; /*数学越大层级越高*/瀑布流布局是流式布局的一种，是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
<body>
<h1> 流式布局 </h1>
<img src="logo.jpg">
<p>
流式布局基本没有对文字图片信息的位置控制，它所遵从的是从左至右，然后从上到下的顺序
</p>
</body><body>
<div id="grid">
<div > </div>
<div > </div>
......
<div > </div>
<div > </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>上下结构
上中下结构
上导航中下结构
左窄右宽结构
内容左中右
导航内容左中右
内容右窄左宽
内容左窄右宽
JavaScript基础语法使用方式<script> </Script>标签中直接编写脚本程序代码脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值HTML 文件混合方式<body>
<script type="text/javascript">
document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>");
</script>
</body><script> 标签中引用 JavaScript 文件<body>
<script src="../js/demo1.js" type="text/javascript"></script>
</body><body>
<a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a>
</body>三种使用方式
先声明再赋值 如：var message; message = "hi";同时声明和赋值变量 如：var message = "hi";不声明直接赋值 如：message = "hi";变量命名规则
第一个字符必须是一个字母、下划线（_）或一个美元符号（$）其他字符可以是字母、下划线、美元符号或数字区分大小写不能与关键字同名，如 while、for 和 if 等数据类型JavaScript 中有 5 种简单数据类型，也称为基本数据类型
undefinednullbooleannumberstring另外还有一种复杂数据类型——object对象类型
由于JavaScript中的变量是弱类型，可通过typeof操作符获取变量的数据类型
数据类型数据值typeofnumber类型浮点数、整数numberboolean类型true、falsebooleanstring类型单引号或双引号引起来的若干字符stringnull类型只存在一个值null，表示对象不存在objectundefined类型只存在一个值undefined，表示未赋值或未声明的变量undefinedJavaScript注释单行注释：//多行注释： / 注释内容 /// 声明并初始化一个变量
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>if( 条件表达式 ) {
语句或语句块
}if( 条件表达式 ) {
语句或语句块 1
} else{
语句或语句块 2
}if( 条件表达式 1){
语句或语句块 1
}
else if( 条件表达式 2){
语句或语句块 2
}......
else if( 条件表达式 n){
语句或语句块 n
}
else{
语句或语句块 n+1
}switch（表达式）{
case 取值 1：语句或语句块 1; break;
case 取值 2：语句或语句块 2; break;
......
case 取值 n：语句或语句块 n; break;
default: 语句或语句块 n+1; break;
}while (条件表达式){
语句或语句块
}do {
语句或语句块
}while(条件表达式);for(初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式){
语句或语句块
}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() 函数将字符串转换为整数。它从字符串的开头开始解析，在第一个非整数位置停止解析并返回前面读到的所有整数
如果字符串不是以整数开头，将返回 NaN(Not a Number：非数字值)
parseInt (string) 字符串结果“150cats”150“cats”NaN“6”6“-6”-6“6.56”6parseFloat () 函数parseFloat()函数和parseInt()函数类似，只不过它是返回一个浮点数parseFloat (string)字符串结果“route66.5”NaN“8.5dogs”8.5“6”6“6.56”6.56“.7”0.7isNaN () 函数isNaN() 函数用于判断参数是否是NaN（不是数字）。如果是 NaN， 那么 isNaN 函数返回 true ，否则返回 falseisNaN (参数) 参数结果‘134’false'2a34'true'2.34'false' ' (空格)false'wh'trueeval () 函数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>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 对象常用属性
属性含义document窗口中当前显示的文档对象historyhistory 对象保存窗口最近加载的 URLlocation当前窗口的 URLstatus状态栏文本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对象的 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对象可以将当前浏览器页面跳转到某个曾经打开过的页面
方法描述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对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏
名称描述href 属性返回或设置当前页面的 URLhostname 属性返回 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>
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 对象的实例是唯一的，可以用 window 对象的 navigator 属性来引用它
方法描述javaEnabled()规定浏览器是否启用 JavataintEnabled()规定浏览器是否启用数据污点，仅适用于 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>
使用 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>
示例：使用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>示例： 使用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>示例：当鼠标移动到页面中的菜单上时，修改菜单的背景图像以
<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>
可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素
示例：使用getElementsByClassName() 方法实现斑马线效果
<ul id="ul1">
<li > 通过 id 查找 HTML 元素 </li>
<li> 通过 name 查找 HTML 元素 </li>
<li > 通过标签名查找 HTML 元素 </li>
<li> 通过类名查找 HTML 元素 </li>
<li > 我是带有 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>
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()"/>
如果需要改变 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.border;
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 中每个节点都具有访问其他节点的属性
属性描述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 提供了一些非常有用的内部对象，按使用方式可分为两种
实例对象。在引用该对象的属性和方法时，必须先使用 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 对象有 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>
网页中使用图片，只需要调用 <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>
JavaScript 中的基本数值运算符可以用来进行一些简单的数学计算，而使用Math 对象可以进行更多的高级运算，如平方根、三角函数、对数和随机数等
与其他对象不同，Math 不需要使用new 关键字创建对象的实例
Math对象中常用的方法
方法功能Math.abs(number)返回number 的绝对值Math.ceil(number)对number 向上取整，如Math.ceil(67.6) 返回值是68Math.floor(number)对number 向下取整，如Math.floor (67.6) 返回值是67Math.max(number1,number2)返回number1 与number2 中的较大值Math.min(number1,number2)返回number1 与number2 中的较小值Math.pow(x,y)返回x 的y 次幂Math.random()返回0 和1 之间的伪随机数，可能为0，但总是小于1Math.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];数组变量名[索引号]”的格式来访问每个数组元素数组列表中的第一个元素的索引号为0，其后的每个元素的索引号依次递增，最后的元素索引为数组的长度-1如果数组元素本身是一个数组，那么这个元素称为子数组，可以使用“数组变量名[子数组索引号][子数组中的元素索引号]”的格式来访问子数组中的元素示例：数组列表的用法，遍历数组列表中的元素
<body>
<script type="text/javascript">
var arr=[' 白色',' 紫色',' 橙色',' 红色'];
for(var i=0; i<arr.length;i++) {
document.write(arr[i]+"<br/>");
}
</script>
</body>
数组元素的下标不仅可以是数字，还可以是文本
示例：使用数组文本下标的方式来获取数组中的元素
<body>
<script type="text/javascript">
var arr=[]; // 声明数组变量
arr[' 暖色调']=[' 红色',' 橙色',' 黄色'];
arr[' 冷色调']=[' 绿色',' 青色',' 蓝色'];
document.write("<h2>");
// 输出冷色调的第3 种颜色
document.write(arr[' 冷色调'][2]);
document.write("</h2>");
</script>
</body>
2、Array
JavaScript 中提供了一个名为Array 的内部对象，可用它来创建数组。通过调用Array 对象的各种方法，可以方便地对数组进行排序、删除和合并等操作Array 对象创建数组常用的3种方式var arr = new Array() //数组初始元素个数为0
var arr = new Array(4); //创建具有指定大小的Array 对象
var arr = new Array(1,2,3); //用指定的元素列表去初始化Array 对象，数组的长度是设置的元素的数目当某字符串使用单引号或双引号标注时，可以被当作字符串对象实例进行处理，从而直接调用String 对象的属性和方法
常用属性：length
常用方法
方法描述charAt()返回字符串对象中指定索引处的字符，索引从0 开始，如"Hello World".charAt(3)，返回字符"l"indexOf()返回某个子字符串在目标字符串中首次出现的位置，如"Hello World".indexOf("a")，返回-1，在目标字符串中没有子字符串"a"，故返回-1substr()从指定索引位置开始截取指定长度的字符串， 如"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>
为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁使用的JavaScript库包括 jQuery、Prototype、Spry 和 Ext JS
其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库
集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系
它的主旨是以更少的代码实现更多的功能（Write less,do more）
在页面<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>基本选择器是由标签 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 > 设置了 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") 选取所有隐藏的元素: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" />
<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><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);
});
});
通过传统的 JavaScript 方法访问 DOM 中的元素，可生成 DOM 对象。如：
var obj=document.getElementById("content")使用 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>
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);通过函数 $(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();示例：在页面中插入一幅图片，当点击此图片时，将其复制并粘贴在右侧
<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]);示例：在页面中插入无序列表和按钮，点击按钮时，将无序列表最后一项删除
<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);示例：点击“添加边框”按钮后，给页面图片添加边框并设置其 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>
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项目
<!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>
常用参数
特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。
Tags 标签
前端javascripthtml5csshtml扩展阅读
HTML5离线存储
2020-03-06 14:13:06 []CSGO电竞API数据接口【West S2战队数据】分享使用演示
2020-09-03 07:18:05 []wamp配置局域网访问
2020-09-04 01:12:17 []接口测试工具apipost3.0版本对于流程测试和引用参数变量
2020-09-15 15:12:13 []vs code的使用与常用插件和技巧大全总结
2020-09-17 03:07:47 []没有伞的孩子 [必须] 要学会奔跑
2020-09-17 04:49:49 []学习之apipost3.0文档移动和文档管理教程
2020-09-18 06:19:35 []分享—如何使用apipost模拟手机实现请求发送
2020-09-18 12:15:00 []【分享】apipost如何使用mock测试
2020-09-19 21:59:25 []Apipost使用技巧之分享
2020-09-19 11:44:49 []加个好友，技术交流
