HTML
##1、html的基本结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
主体内容
</body>
</html>
##2、html网页的扩展名
.html或 .htm
index.html或 index.htm在同一个目录中是两个文件
##3、html标签的分类
行级标签 ：
<img src="图片的路径" alt="图片的提示消息" title="图片的提示消息"/> 表示一个图片
<span>内容</span> :用来显示错误提示
<br/> 断行或换行标签
块级标签：
<p> 表示段落标签
<h1>...<h6> 标题标签 ：用来存放内容的标题，文字变黑，变粗
<ul>-<li> 无序列表:type=square(方形)|circle(空心圆)|disc(实心圆)
<ol>-<li> 有序列表
<dl>-<dt>-<dd> 描述列表:适用于图文混编场合
<hr/> 水平分隔线
相对路径和绝对路径：
…/ 回退一次
…/…/ 回退两次
绝对路径表示从指定盘符去找文件，不推荐使用
##4、标签的用法
1、超链接
<a href="要跳转的地址" target="_self|_blank|_top|_parent">文本或图片</a>
2、锚链接
第一步：定义锚
<a name="锚的名字" >文字或图片</a>
第二步：跳转到锚的位置
<href="网页.html/#锚的名字">文字或图片</a>
3、功能性链接
<a href="mailto:zhiling@study.com">联系站长</a>
5、其它标签
1、<strong>和<em>
2、注释
<!-- 注释内容 -->
3、特殊符号：
空格
大于号(>) > 如果时间>晚上6点，就坐车回家
小于号(<) < 如果时间<早上7点，就走路去上学
引号(") " W3C规范中，HTML的属性值必须用成对的"引起来
版权符号 © © 2003-2013
4、图片：
<img src="" alt="" title="" width="" height=""/>
补充：图片常见格式：
.jpg
.png
.gif
.bmp
5. 表格：<table>-<tr>-<dd>
行合并：rowspan="合并的行数"
列合并：colspan="合并的列数"
注意：rowspan或colspan属性都是写在<td>标签中
6.在网页上播放音频或视频文件
a1. <embed src="音频或视频文件的路径"/>
a2. <object src="" /> 不推荐用
html5中新增了播放音频和视频标签
<video src="视频文件的路径" controlls=""/>
<audio src="音频文件路径" .../>
6、表单元素
1.<form action="" method="get|post"></form>
get和post提交数据的区别：
a1.get提交的数据会显示在url的地址栏上，导致信息暴露，不安全，用来提交不是特别重要的数据;post
提交数据不会挂在地址栏上，信息安全性高
a2.get提交的数据有长度限制；而post提交没有长度限制，适合大量数据，如文件上传
2.表单元素
a1. 文本框：
<input type="text" name="名字" id="名字" value="框中的值" maxlength="最大字符数" size="长度" readonly="readonly" />
a2. 密码框 ：
<input type="password" name="名字" id="名字" value="框中的值" maxlength="最大字符数" size="长度" readonly="readonly" />
a3.提交按钮：
<input type="submit" value="按钮上的文字" disabled="disabled"/> :具体自动提交表单的功能
a4.重置按钮：
<input type="reset" value="按钮上的文字"/> :自动清空表单元素的值
a5.图片提交按钮：
<input type="image" src="图片的路径"/> :具体自动提交表单的功能
a6.普通按钮：
<input type="button" value="删除"/>
a7.单选按钮：
<input type="radio" name="名字" value="值" checked="checked"/>
a8.多选按钮：
<input type="checkbox" name="名字" value="值" checked="checked"/>
a9.隐藏域：
<input type="hidden" name="名字" value="值"/>用途：不是给用户输入数据，而是在网页上做标记用
a10.上传域：
<input type="file" name="名字" />用于文件上传功能
a11.下拉列表
<select name="city">
<option value="">请选择城市</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="珠海">珠海</option>
</select>
a12.多行文本域
<textarea cols="列数" rows="行数">多行文本域的内容</textarea>
html5新增的表单元素：
数字类型： <input type="number" name="名字" value="" min="最小值" max="最大值" step="步长"/>
邮箱类型: <input type="email" name="名字" value=""/>
范围控件：<input type="range" name=""/>
日期时间控件：<input type="date|datetime|week|month|..."/>
date:显示年-月-日
datetime-local 显示 年-月-日 时-分
week 显示 年-第x周
month:显示 年-月
<input type="url"/>
<input type="search"/>
常用的表单元素的属性：
readonly:表示只读属性
disable:表示禁用
placeholder:用来给控件中内容进行显示,当控件中输入内容，提示消息会自动清空
pattern: 表示通过正则来验证输入框中的值
required="required"表示输入框是必填项，不能为空
0-130岁之间
1位数 \d 或[0-9]
2位数 [1-9]\d
3位数 1[0-2]\d
130岁独立写： 130
^\d|[1-9]\d|1[0-2]\d|130$
##7、HTML5验证表单
type
已有：
<input type="text" /> 文本输入框
<input type="password" /> 密码输入框
<input type="checkbox" /> 复选框
<input type="radio" /> 单选框
<input type="fill" /> 文件选择框
<input type="hidden" /> 隐藏框
<input type="submit" /> 提交按钮框
<input type="reset" /> 重置按钮框
<input type="button" /> 普通按钮框
新增：
<input type="email" />
表单提交时格式验证，要求@左右各有一个字符即可，错误提示信息可以定制，但外观无法定制（是窗口）
<input type="number" />
呈现一个数字输入框，在提交时会验证数字格式，使用min、max、step指定最小值、最大值、步长
<input type="url" />
提供了URL验证输入框，只要满足字母+冒号即可
<input type="tel" />
提供了电话号码输入框，在手机浏览器中会弹出数字模拟键盘
<input type="color" />
显示一个搜索框，在手机浏览器中会在模拟键盘右下角显示“搜索”按钮
<input type="range" />
显示为一个滑块组件(数值选择组件)，使用min、max、step指定最小值、最大值、步长
<input type="search" />
显示一个颜色选择器
<input type="data" />
显示一个日期选择器
<input type="month" />
显示一个月份选择器
<input type="week" />
显示一个星期选择器
element
已有：
<input />输入框
<select> <option></option></select> 选择框
<textarea></textarea> 文本域输入框
<button></button> 按钮
新增：
<datalist><option>XXXX</option></datalist> 数据列表
<progress></progress> 进度条
<meter></meter> 刻度尺、刻度条
<output></output> 输出框
(1)datalist：数据列表
可用于为另一个输入框提供静态的输入建议
<datalist id="my-list">
<option>XXXX</option>
</datalist>
<input type="text" list="my-list">
(2)progress：进度条
用于显示某个过程的进度信息，若不指定value，则左右无限滚动；若指定了value，则固定为指定的值
<progress min="0" max="1" value="0.5"></progress>
(3)meter：刻度尺、度量衡
通过不同的颜色显示指定的数值在哪个范围“最优”-“合理”-“危险”范围：
最优值在上下限之间：黄-绿-黄
最优值在下限之下：绿-黄-红
最优值在上限之上：红-黄-绿
<meter min="0" max="100" low="30" high="70" optimum="50" value="60"></meter>
min：最小值
max：最大值
low：合理值中最低限度
high: 合理值中最高限度
optimum:最合适的值
value：当前值
(4)output：输出
外观效果与普通的span一样。是语义标签，表示此处的内容是一个计算后的结果的输出。
一般可以使用JS根据其它输入域值的改变修改output中的内容。
attribute
已有：
id 唯一标示
style 样式
title 标题
class 类
name 名称
value 值
type 类型
checked 默认被选中
selected 默认被 选中
disabled 禁止使用
新增：
placeholder 占位符，提示语句
autofocus 自动获得焦点
autocomplete 是否启用自动补全
multiple 多个、多项
form 表单
required 必填
min 最小值
max 最大值
minlength 最小长度
maxlength 最大长度
pattern 正则样式
(1)placeholder：占位符
用于在输入框中显示提示性文字，与value不同，value是可以被提交到服务器的，而placeholder不会被提交
(2)autofocus：自动获得输入焦点
指定当前元素获得输入焦点
(3)autocomplete：是否启用自动补全功能
<input autocomplete="off">
(4)multiple：多个/多项
用于指定input type="file/email"可以有多个输入项，使用英文逗号分隔
<input type="email" multiple>
(5)form：表单
用于指定当前元素(放在表单外部)从属于哪个表单
<form id="f1"></form>
<input form="f1">
(6)required：必填
指定当前输入域内容不能为空
(7)minlength：最小长度
限定当前输入域中字符最少个数
(8)maxlength：最大长度
限定当前输入域中字符最大个数
(9)min：最小值
限定当前数字输入域中数值最小值
(10)max：最大值
限定当前数字输入域中数值最大值
(11)pattern：（正则）样式
限定当前输入域中必须输入符合指定正则表达式的值
<input name="phone" pattern="1[3578]\d{9}">
注意：min/max 与minlength/maxlength的区别：min/max是数字域上的限制，只能限制数字的大小，而 minlength/maxlength是文本域上的限制，是限制字符长度的
**自定义错误：**在提交表单时，如果输入框中的值不是我们想要的，抛出一个自定义的错误提醒。
属性：
valid:true//当前输入是否有效
badInput: false //输入无效，如number框输入abc
patternMismatch: false //正则表达式验证失败
rangeOverflow: false //输入值超过max的限定
rangeUnderflow: false //输入值小于min的限定
tooLong : false //输入的字符数超过
maxlength
tooShort :false //输入的字符数小于
minlength
stepMismatch : false //输入的数字不符合step限制
typeMismatch : false //输入值不符合email、url的验证
valueMissing : false //未输入值，违反了required要求
customError : false //是否存在自定义错误
特性：
(1)只要有一个验证方面错误，某个属性就为true，valid值为false
(2)只有没有任何验证错误，所有的属性都为false，valid才能为true
(3)上述的每个错误在浏览器内部都有一个预定义的错误提示消息
(4)所有的错误消息中，只要存在“自定义的错误消息”，浏览器只显示自定义的错误消息，优先级高于浏览器预定义的错误消息
(5)当前没有自定义错误消息，所以customError : false
设置自定义错误消息的方法：
input.setCustomValidity('错误提示消息'); //这个相当于将input.validity.customError:true
取消自定义错误消息的方法：
input.setCustomValidity(""); //这个相当于将input.validity.customError:false
如：
var username = document.getElementById("username");
if(username.validity.valueMissing==true){
username.setCustomValidity("用户名不能为空");
}else if(username.validity.patternMismatch==true){
username.setCustomValidity("用户名必须是3到12之间的字母数字组合");
}
CSS
1、css声明
###1-1、内部样式
在head标签中使用style标签声明（此声明一般声明当前网页的公共样式或者给某个标签的单独样式）
<style type="text/css">
hr{
width: 50%;
height: 20px;
color: red;
background-color: red;
}
</style>
###1-2、内联样式
在标签上使用style属性进行声明（此声明会将css样式直接作用于当前标签）
<hr style="background-color: blue;height:50px;"/>
###1-3、外部样式
在head标签中使用link标签引入外部声明好的css文件（此声明相当于调用,解决了不同网页间样式重复使用的问题，一次声明，随处使用）
<link rel="stylesheet" type="text/css" href="css/my.css"/>
问题：
不同的声明给同一个标签操作了同一个样式，会使用谁的？
如果Css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。
##2、css选择器
2-1、选择器分类
1、基本选择器
标签选择器：标签名{样式名1：样式值1;……}
作用：会将当前网页内的所有该标签增加相同的样式
id选择器:标签的id属性值{样式名1：样式值1;……}
作用：给某个指定的标签添加指定的样式
类选择器：. 类选择器名{样式名1：样式值1;……}
作用：给不同的标签添加相同的样式
全部选择选择器：*{样式名1：样式值1;……}
作用：选择所有的HTML标签，并添加相同的样式
2、复合选择器
组合选择器（并集选择器）：选择器1,选择器2,……{样式名1：样式值1;……}
作用：解决不同的选择器之间重复样式的问题
子标签选择器（后代选择器）选择器1 子标签选择器{样式名1：样式值1;……}
属性选择器：标签名[属性名=属性值]{样式名1：样式值1;……}
作用：选择某标签指定具备某属性并且属性值为某属性值的标签
交集选择器：选择器1.选择器2. …{样式名1：样式值1;……}
3、选择器优先级别：标签选择器<类选择器<ID选择器
###2-2、选择器的使用
1、声明css代码域
2、使用选择器选择要添加样式的标签（根据需求）
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
3、书写样式单
边框设置：
border:solid 1px;
字体设置:
font-size:10px; //设置字体大小
font-family:"黑体"; //设置字体的格式
font-weight：bold; //设置字体加粗
字体颜色设置：
color:颜色;
背景颜色设置：
background-color:颜色;
背景图片设置：
background-img:url(图片的相对路径);
background-repeate:no-repeate;设置图片不重复
bacground-size:cover;图片平铺整个页面
高和宽设置：
width:20px; //宽
height:20px; //高
浮动设置
float:left|right
行高设置
line-height:10px;
3、css样式
###3-1、文本样式
color: 文字的颜色(前景色)
direction:rtl|ltr: 文字方向
text-decoration:none|underline|overline(上划线)|line-through
text-align:left|right|center; 文字对齐方式
font-size:20px; 字体大小
font-weight:100|200|bold; 字体粗细
font-family:"微软雅黑"|"隶体" 字体
font-style:italic|normal 字体样式，斜体，正常
font: 文字的缩写
line-height:20px ; 行高
letter-spacing:5px ; 字符间隔
white-space:nowrap:文字空白
word-spacing:3px 单词间距
text-shadow: blue 10px 10px 2px; 文字阴影 ：颜色，水平偏移，垂直偏移 模糊程度(0表示不模糊)
###3-2、背景样式
background-color:#ccc; 背景颜色
background-image:url(image/bg.jpg) 背景图
background-repeat:repeat-x|repeat-y|repeat|no-repeat; 背景图平铺方式
background-position:-20px 10px; 或left ,right, top, bottom, center ; 背景图的偏移
background;#ccc url(image/bg.jpg) no-repeat -20px 10px; 缩写 ?
background-size: length|percentage|cover|contain;
a1.length:设置背景图像的高度和宽度。如果只设width，高度可以写在auto,自适应
a2.percentage:以父元素的百分比来设置背景图像的宽度和高度。
a3.cover :把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
a4.contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
###3-3、列表样式
list-style:none|circle|square|...; 设置列表的样式
list-style-image:url(im.jpg); //列表的图标
! 注意：设内容在容器内垂直方向居中： height和line-height设为相同
###3-4、浮动样式
float:left | right //设置左浮动、右浮动
clear: //清除浮动
父容器塌陷问题：
a1.给父容器设height
a2.overflow:hidden;
a3.父级添加伪类after
container:after{
content: '';
display: block;
clear: both;
}
float浮动的特性：
a1.块级元素浮动之后，失去块级特性，其它元素会跟在其后
a2.浮动后，可能会出现文字环绕效果
a3.浮动之后，可能会父容器塌陷情况
布局：
1、float:left|right
2、display:block|inline|none;
3、visibility: visible|hidden
display:block 元素以块状显示;visibility:visible 设元素显示，但设为hidden时，元素会隐藏，但是会占用空间
如果display:none;元素隐藏，但是不会占用空间
###3-5、超链接伪类
a:hover: 悬停样式
a:visited:访问后的样式
a:link ;超链接的样式
a:active ;激活的样式(点击时的样式)
样式编写的顺序： link-->visited-->hover-->active
love hate 的单词来记
4、css盒子模型
###4-1、div标签：
块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
特点：
默认宽度是页面的宽度，但是可以设置。
高度默认是没有的，但是可以设置。(可以顶开)
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
###4-2、盒子模型：
1、盒子模型：所学的行级，块级标签（所有的标签）都是容纳数据的盒子
2、盒子模型的属性：
外边距:margin
作用：用来设置元素和元素之间的间隔。
居中设置:margin:0px auto;上下间隔是0px,水平居中。
可以根据需求单独的设置上下左右的外边距。
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域：
作用：改变内容区域的大小。
设置宽和高即可改变内容区域的大小。
圆角矩形：
border-radius: 100px 100px 0px 0px;
背景色渐变：
background: linear-gradient(to bottom,#CCCCFF,#FFFFFF);
盒子实际的高度=内容的高度+上下填充高度+上下边框的高度
盒子实际的宽度=内容的宽度+左右填充的宽度+左右边框的宽度
注意事项：
1、外边距不会增加容器的宽度，设了上外边距，下外边距无效，设了左外边距，右外边距无效
2、填充padding设值时，会增加容器的宽高
5、css定位
5-1、相对定位（relative）
position:relative;
作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
可以使用top,left,right,bottom来进行设置。
注意：其他元素的位置是不改变的。
5-2、绝对定位（absolute）
position:absolute;
作用：可以使用元素参照界面或者相对父元素来进行移动
注意：如果父级元素成为参照元素，必须使用相对定位属性，默认情况下是以界面为基准进行移动的。
5-3、固定定位（fixed）
position:fixed;
作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
以上定位都可以使用top,left,right,bottom来进行移动。
z-index:此属性是用来声明元素的显示级别的。
JavaScript
1、JavaScript
简称js,是一种广泛应用于客户端网页（浏览器）开发的脚本语言
1-1、JS的用途
a1.表单验证—可以用来减轻服务器端压力，减少客户端与服务器端的交互次数
a2.页面动态效果
a3.页面内容的动态改变
！注意：Html服务于内容，CSS服务于表现，js服务于行为
1-2、JS的组成
a1. ECMAScript--Javascript的基本语法规范：负责变量定义，数据类型，循环，判断，函数等语法
a2.BOM--浏览器对象模型(Brower ObjectModel):负责浏览器的地址定位，前进，后退等操作
a3.DOM—文档对象模型(Document ObjectModel):负责页面元素的处理
1-3、JS使用语法结构
<script language="javascript" type="text/javasript" charset="utf-8">
//javascript语句
</script>
1-4、JS脚本分类
a1.行内js
<input type="button" value="弹出消息框"onclick="javascript:alert(‘欢迎您’);" />
a2.内部js
<script>document.write("helloworld");</script>
a3.外部js
<script type="text/javasript" src="hello.js"></script>
2、JS的声明
###2-1、在head标签中使用script标签进行js代码域的声明
<script type="text/javascript">
alert("这是我的第一个js")
</script>
作用：声明js代码域
特点:js的代码只会作用于当前网页
###2-2、在head标签中使用script标签引入外部声明好的js文件
<script src="相对路径" type="text/javascript" charset="utf-8"></script>
作用：引入外部声明好的js文件
特点：实现js代码的重复使用，避免代码的冗余。
注意：
因为js在HTML文档中是一门单独的语言，可以声明在文档中的任意位置
一般情况下声明在head标签中。
3、JS的变量
3-1、js的变量声明及数据类型：
1、js中的所有变量声明只有var关键字。
var a=123;
var A=1234;
var a1=3.1415926;
var a2="js";
var a3='k';
var a4=true;
var a5=new Date();
alert(a);
！注意：
a、js的变量名是严格区分大小的。
b、js中的字符串可以使用双引号也可以使用单引号。
c、js中可以声明同名变量，不会报错，后面的会将前面的声明覆盖。(重要)
2、中的数据类型：数据类型判断关键字（typeof）
【1】number:数字类型
var b=456;
var b1=1.23;
alert(typeof b1);
【2】string：字符串类型
var b="今天天气真好，适合学习";
var b1='l';
alert(typeof b1);
【3】boolean:布尔类型
var b=true;
var b1=false;
alert(typeof b1);
【4】object：对象类型
var b=new Date();
alert(typeof b);
【5】null:空对象赋值，主要是和undefined进行区分。
var c=null;
alert(c);
！注意：变量声明不赋值的情况下，默认值是undefined，在js代码中尽可能的给声明的变量赋初始值。
3-2、js中的数据转换
1、其他类型转换为number 类型
使用Number(其他类型的数据);
string 类型的数字字符: 对应的number数字
string 非数字字符: NaN(number类型)
boolean true: 1
boolean false: 0
object 有具体的值: 数字
object null: 0
2、其他类型转换为boolean 类型
使用Boolean(其他类型的数据);
number 正数或者负数： true
number 0: false
string 非空字符串: true
string 空字符串 "": false
object 具体的对象: true
object null: false
声明不赋值的变量: false
3-3、变量的作用域
局部变量： 只有本函数内部可以使用,可以是数据，也可以是函数
全局变量: 所有函数都可以使用,只要不是写在function中的变量都叫全局变量
4、JS中的运算符
4-1、运算符
1、算术运算符：
加法：+
减法：-
乘法：*
除法：/
余数：%
number类型的和number类型的
number类型和boolean类型(true–1,false–0)
number类型和string类型(,/,%,-)
string类型和string类型的数字(,/,%,-)
string类型数字和boolean类型(*,/,%,-)
!注意：在算术运算中如果两边的数据类型不是number的话，会使用Number()强转后在进行运算；字符串的加法会作为字符链接，不会运算。在字符串中“+”符合代表的是字符串的连接符，不会参与运算
2、逻辑运算符：
! & && | || (与java中的一致);
var a=true;
var b=true;//false
alert(a&b);
if(a&b){
alert("haha");
}
3、关系运算符：返回值为true 或者fasle
!=；>=；<=；>；<
4、自增运算符：
++:a++ ++a；–；+=；-=:
4-2、"“与”="的使用
1、等值运算符:==
先判断类型，类型一致则直接比较。类型不一致，则先使用Number()进行强转后再进行比较。
2、等同运算符:===
先判断类型，类型一致则再比较内容，内容一致则返回true，内容不一致则返回false；类型不一致则直接false
！注意：null和undefined在做==判断时候返回true
5、JS中的逻辑结构
###5-1、if结构
单分支结构：if(判断条件){执行体}
双分支：if(判断条件){执行体}else{执行体}
多分支：if(判断条件){执行体}else if(判断条件){执行体}……else{执行体}
###5-2、swicth选择结构
switch (a){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
!注意：判断的变量可以是number类型也可以是string类型，但是不要混用。
###5-3、循环结构
for(变量;条件;迭代条件){循环体}循环
while(循环条件){循环体}
do{循环体}while(循环条件)
6、JS数组
###6-1、数组的声明
var arr=new Array();//声明一个空数组对象
var arr=new Array(length)//声明一个指定长度的数组
var arr=[元素]//声明数组(最常用);
！注意：js中的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变。
###6-2、数组的赋值和取值
数组可以存储任意类型的数据
数组名[角标]=值;//角标可以是任意的正整数或者是0
数组的取出：
数组名[角标]//返回当前角标对应存储的值
如果角标不存在，返回undefined;
###6-3、数组的length属性
作用1：数组名.length//返回当前数组的长度。
作用2：数组名.length=新的值//动态的改变数组的长度
！注意：length>原有长度，则使用空进行填充。length<原有长度，则从后面进行截取，最后的数据会被删除。
###6-4、数组的遍历
1、普通for循环：
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
2、for-in：
for(var i in arr){
alert(i);//获取的是角标
}
###6-5、数组的操作
1、数组的合并：arr.concat(b,c);//数组的合并
var b=["今天天气不错","适合学习"];
var c="js";
var d=arr.concat(b,c,c);//数组的合并
alert(d);
alert(d.length);
2、数组指定间隔符转换字符串:var b=arr.join("-");
var b=arr.join("-");
alert(typeof b);
3、数组移除最后一个元素并返回:var ele=arr.pop();
var ele=arr.pop();
alert(ele);
4、数组的追加，返回新的长度：var ln=arr.push(“lol”);//追加的元素可以是一个数组，但是为作为一个角标值存在
var ln=arr.push("lol");
var ln2=arr.push(["66",77]);
alert(arr);
5、数组的移除第一个元素:var ele=arr.shift();
var ele=arr.shift();
alert(ele);
alert(arr);
6、数组的在开始位置插入指定元素:var a=arr.unshift(“又是周五了”);
var a=arr.unshift("又是周五了");
alert(a);
7、数组删除指定位置元素：var arr2=arr.splice(1,3,“a”);
var arr2=arr.splice(1,3,"a");
alert(arr);
7、JS函数
完成某些特定功能所编写的代码,类似于java中的方法
作用:功能代码块的封装。减少代码的冗余。
7-1、js函数的组成
1、函数的声明：
方式一:function 函数名(形参名1,形参名2……){执行体}
方式二:var 函数名=new Function("形参1","形参2"……,"函数执行体");
！注意：此声明表明在js中函数是作为对象存在的。
方式三:var 变量名=function(形参名1,形参名2……){函数执行体}
2、函数的参数
js中的函数在调用时，形参可以不赋值，不会报错
js中的函数在调用时，形参赋值可以不全部赋值，不会报错，但是实参会依次进行赋值。
3、函数的返回值
在js中如果函数有返回值则直接返回，没有返回值默认返回undefined
！注意：js的代码声明区域和执行区域是一起的，都是在js代码的代码域中。
4、函数的执行符:
在js中函数的执行符值()；没有小括号则函数名其实就是一个变量；加上小括号则会函数会被执行。
5、函数作为实参传递
在js中函数是可以作为实参进行传递的。
function testobj(a){
alert(a());
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam());
7-2、js 函数分类
1、系统函数
window.typeof(变量):返回变量的数据类型
parseInt(字符变量); //将字符串转成整数类型
parseFloat(字符串);//将字符串转成小数类型
isNaN(变量);//判断变量是否为数字，不是数字返回true,是数字返回false
alert(变量);//弹出警告框
confirm(字符串);//弹出确认框
prompt(字符串); //弹出一个输入框,少用
open(url,窗口特征);//打开一个新窗口
window.open("计算.html","aaaa","menubar=1,status=yes,width=300px,height=300px,scrollbar=yes");
close(); //关闭当前网页,在不同的浏览器下效果不同
setTimeout(函数，毫秒数); //指定毫秒数执行一次函数,做定时器
setInterval(函数，毫秒数) ;// 指定毫秒数周期执行函数,做定时器
clearTimeout(); //清除计时器
clearInterval(); //清除计时器
history();//访问历史页面
go(-1) //访问上一个页面
eval(字符串):把字符串当做javascript代码来执行
isFinite() : 用来检查输入是否是一个既非 Infinity也非NaN的数字
Infinity : 无穷大
encodeURI()和encodeURIComponent():
2、 自定义函数
function 函数名(参数列表)｛...｝
3、匿名函数:
场合：
a1. <input type="button" value="" onclick="javascript:alert('我是警告框');"/>
a2.定义匿名函数
//第一步：定义匿名函数
var f = function(){
js代码块
}
//第二步：调用匿名函数
f();
8、JS的事件机制
解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
作用：主要是结合js的函数来使用。
8-1、js事件分类
内容:
1、单双击事件:
onclick 当鼠标单击的时候会触发
ondblclick 当鼠标双击的时候会被触发
2、鼠标事件:
onmouseover 当鼠标悬停在某个HTML元素上的时候触发
onmousemove 当鼠标在某个HTML元素上移动的时候触发
onmouseout 当鼠标在某个HTML元素上移出的时候触发
3、键盘事件:
onkeyup 当键盘在某个HTML元素上弹起的时候触发
onkeydown 当键盘在某个HTML元素上下压的时候触发
4、焦点事件:
onfocus 当某个HTML元素获取焦点的时候触发
onblur 当某个HTML元素失去焦点的时候触发
5、页面加载事件:
onload 当页面加载成功后触发。
6、元素内容或值改变事件:
onchange 元素内容或值发生变化事件,文本框，密码框 ，number,email,textarea,select选项等
7、表单提交事件:
onsubmit 表单提交时触发
8、网页滚动事件：
onscroll
！注意:
js中添加事件的第一种方式：
在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
js中的事件只有在当前HTML元素上有效。
一个HTML元素可以添加多个不同的事件。
一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔
8-2、js事件使用
1、给合适的HTML标签添加合适的事件:
onchange----select下拉框
onload------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件------用户会进行鼠标移动操作的。
键盘事件------用户会进行键盘操作的HTML元素。
2、给HTML元素添加多个事件时，注意事件之间的冲突:
举个栗子：单击和双击
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
3、事件的阻断:
当事件所监听的函数的将返回值返回给事件时：
false：则会阻断当前事件所在的HTML标签的功能
true:则继续执行当前事件所在的HTML标签的功能
4、超链接调用js函数:
<a href="javascript:函数名()">调用js函数</a>
9、JS对象
9-1、js中的类
1、类的声明:
function 类名(形参1，形参2……){
this.属性名1=形参1;
this.属性名2=形参2;
……
this.属性名=fn
}
function Penson(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.show=function(){
alert(name+age+sex);
}
}
2、类的使用:
var 对象名=new 类名(实参1，实参2……);
var p1 = new Penson("张三",10,"男");
p1.show();
3、注意：
js中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充。
类的"继承"：prototype关键字
同过prototype关键字实现了不同对象之间的数据共享。
function Person(name,age){
Person.prototype=new User();
this.name=name;
this.age=age;
this.fav="唱歌";
}
function User(uname,pwd){
this.uname=uname;
this.pwd=pwd;
}
使用prototype
Person.prototype.test=function(){alert("嘿嘿")};
Person.prototype=new User();
User.prototype.testU=function(){alert("我是user")};
User.prototype.student=new Student();
2、使用类
var p1=new Person("张三",32);
p1.address="北京市";
alert(p1.address);
alert(p1.name);
var p2=new Person("李四",23);
alert(p2.name);
alert(p1.test===p2.test);//false;
alert(p1.test===p2.test);
p1.testU();
4、作用:
实现某个类的所有子对象的方法区对象的共享，节省内存
9-2、js创建自定义对象
1、对象的作用：用来存储整体数据。
2、原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据。来保证数据的完成性
3、应用：Ajax中会使用。
4、使用：
创建自定义对象
var 对象名=new Object();
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
var 对象名={};
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
一般用来存储数据，不会再自定义对象中存储函数对象。
js中的对象属性和内容是可以自定义的扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。
9-3、常用对象及方法
1、String对象学习
var str=new String("abcdefg");//声明String对象存储字符串
var str2="MNP";//简写形式
alert(str);
【1】字符串大小写的转换
alert(str.toUpperCase());//将字符串转换为大写
alert(str2.toLowerCase());//将字符串转换为小写
【2】字符串的切割
var s="哈哈,嘿嘿,呵呵";
var s1=s.split(",");//按照指定的字符切割字符串，返回数组。
alert(s1.length);
【3】字符串的截取
var s="abcdef";
alert(s.substr(1,3));//从指定的开始位置截取指定长度的子字符串
alert(s.substring(1,3));//从指定的开始位置和指定的结束位置截取子字符串，含头不含尾。
【4】查找子字符串第一次出现的角标
var s="abcdefg";
alert(s.indexOf("dd"));//返回指定子字符串第一次出现的角标，没有则返回-1;
2、Date对象
【1】创建Date对象
var d=new Date();
alert(d);
【2】获取当前年份
alert(d.getYear());//返回的是1900年开始距今的年分数
alert(d.getFullYear());//返回的是当前的年份
alert(d.getMonth()+1);//返回的当前月份的角标值，需要+1
alert(d.getDate());//返回的是当前的日期数
alert(d.getDay());//返回的是当前的星期数，但是周天会返回值为0;
alert(d.getHours());//返回当前时间的小时数
alert(d.getMinutes());//返回当前时间的分钟数
alert(d.getSeconds());//返回当前时间的秒数
alert(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
3、Math对象学习
！注意：Math在使用的时候不能new，使用Math.方法名调用即可。
【1】创建随机数字
alert("Math.random():"+Math.random());//返回0-1之间的随机数字，含0不含1。
alert(1000+Math.random()*9000);
【2】向下取整
alert(Math.floor(1000+Math.random()*9000));
【3】向上取整
alert(Math.ceil("12.34"));
【4】四舍五入
alert(Math.round(12.12));
alert(Math.round(12.65));
【5】数值比较:求取最小值，求取最大值
alert(Math.min(12,13,5,78));//获取最小值
alert(Math.max(12,3,4,56));//获取最大值
【6】保留小数位数
alert(99.999999.toFixed(2));//保留两位小数
4、Global对象学习
！注意：改对象从不直接使用并且不能new，也是就直接写方法名调用即可。
【1】使用eval将字符串转换为可执行的js代码
var str="var a=123";
eval(str);
alert(a);
【2】使用isNaN判断是否值NaN
alert(isNaN("123"));
【3】获取字符中的浮点数
alert(parseFloat("12.34a34a"));
10、BOM（Browser Object Model）
BOM浏览器对象模型：是规范浏览器对js语言的支持(js调用浏览器本身的功能)。
BOM的具体实现是window对象
10-1、window对象
1、window对象的使用
1、window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。
2、框体方法
alert:警告框 提示一个警告信息，没有返回
confirm:确认框 提示用户选择一项操作（确定/取消）
点击确定 返回true
点击取消 返回false
prompt:提示框， 提示用某个信息的录入或者说收集
点击确定，返回当前用书录入的数据，默认返回空字符串
点击取消,返回null
3、定时和间隔执行方法
setTimeout:指定的时间后执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前定时器的id
setInterval:每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前间隔器的id
clearTimeout:用来停止指定的定时器
参数：定时器的id
clearInterval:用来停止指定的间隔器
参数：间隔器的id
4、子窗口方法
window.open('子页面的资源(相对路径)','打卡方式','配置');
示例：window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
！注意:关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。
2、子页面调用父页面的函数
window.opener.父页面的函数
2、window对象常用属性：
1、地址栏属性:location
window.location.href="新的资源路径（相对路径/URL）"
window.location.reload()重新加载页面资源
2、历史记录属性
window.history.forward() 页面资源前进，历史记录的前进。
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
！注意window.history.go(0)相当于刷新。
3、屏幕属性
window.srceen.width;//获取屏幕的宽度分辨率
window.screen.height;//获取屏幕的高度分辨率
4、浏览器配置属性
主体面板属性(document)
10-2、History对象
用来访问历史网页
常用的方法：
go(1):在历史页中前进一页
go(-1):回退到上一页
back();回退到上一页 相当于 history.go(-1)
forward();在历史页中前进一页,相当于history.go(1);
10-3、Location对象
常用的属性：
href:表示跳转到指定的url，相当于超链接
location.href="http://www.baidu.com";
常用的方法：
reload(); //刷新当前网页（或重新加载当前网页）
例：location.reload();
replace(url);//重新打开一个新页面来替换当前页
location.replace("http://www.baidu.com");//相当于location.href="url"
10-4、Document对象（DOM）
1、document对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。
2、使用document（获取HTML元素对象）
直接获取方式：
document.getElementById(id):通过id
document.getElementByName(name): 通过name属性值
document.getElementByTagName(TagName):通过标签名
document.getElementByClassName(ClassName):通过class属性值
间接获取方式：
parentNode：得到父节点
childNodes：得到所有字节点
firstChild：第一个字节点
lastChild：最后一个字节点
nextSibling；下一个弟节点
previousSibling：上一个兄节点
11、JS操作html元素属性
11-1、获取元素对象
元素对象名.属性名//返回当前属性的属性值。----固有
元素对象名.getAttribute(“属性名”);//返回自定义属性的值-----自定义
声明函数---固有属性
//获取属性值
function testField(){
//获取元素对象
var inp=document.getElementById("uname");
//获取元素属性值
alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
}
声明函数---自定义属性
//获取
function testOwnField(){
//获取元素对象
var inp=document.getElementById("uname");
//获取自定义属性的值
alert(inp.getAttribute("abc"));
}
11-2、操作元素属性
元素对象名.属性名=属性值
元素对象名.setAttribute(“属性名”,“属性值”);//修改自定义属性的值----自定义
声明函数---固有属性
//修改元素属性值
function testField2(){
//获取元素对象
var inp=document.getElementById("uname");
//修改元素属性
inp.value="哈哈";
inp.type="button";
}
声明函数---自定义属性
//修改
function testOwnField2(){
//获取元素对象
var inp=document.getElementById("uname");
//修改自定义属性的值
inp.setAttribute("abc","呵呵");
}
注意：
尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。
12、JS操作html元素内容
12-1、获取元素内容
元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
元素对象名.innerHTML//返回当前元素对象的文本内容，不包括HTML标签
function getContext(){
//获取元素对象
var div=document.getElementById("div01");
//获取元素内容
alert(div.innerHTML);
alert(div.innerText);
}
12-2、修改元素内容
元素对象名.innerHTML=“新的值”//会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+“新的值”//追加效果
元素对象名.innerText=“新的值”//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerHTML="<b>你先上，皇军给你殿后，八嘎</b>";
div.innerText="<b>你先上，皇军给你殿后，八嘎</b>";
}
13、JS操作html元素样式
1、css样式属性：
font-size:15px ; //设置字体大小
font-weight:bold; //设置字体粗细
font-family:微软雅黑; //设置字体样式
font //缩写
text-align:left; //内容位置
line-height:20px; //行高
2、js中的元素样式属性：
fontSize:15px //字体大小
fontWeight:bold; //字体粗细
fontFamily:微软雅黑; //字体样式
font //缩写
textAlign:left; //内容位置
lineHeight:20px; //行高
3、设置元素显示与隐藏：
元素.style.display="block"; //元素显示
元素.style.display="none"; //元素隐藏，会释放元素所占的位置
元素.style.visibility="visible"; //元素显示
元素.style.visibility="hidden"; //元素隐藏，释放元素所占的位置
13-1、通过style属性操作元素样式
元素对象名.style.样式名=“样式值”//添加或者修改
元素对象名.style.样式名=""//删除样式
注意:以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
function testOperCss(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//添加元素样式
showdiv.style.backgroundColor="#FFA500";
//js修改元素样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border="";
}
13-2、通过className操作元素样式
元素对象名.className=“新的值”//添加类选择器样式或者修改类选择器样式
元素对象名.className=""//删除类样式。
function testOperCss2(){
//获取元素对象
var div01=document.getElementById("div01");
//获取
alert(div01.className);
//添加或者修改
div01.className="common2";
//删除
div01.className="";
}
14、JS操作HTML文档结构
14-1、使用innerHTML操作元素内容
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有子节点
父节点.removeChild(子节点对象)//删除指定的子节点。
---------------------------------------------------------------------------------------------------
function testAdd(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//给div追加上传按钮
showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='删除' onclick='delInp(this)'/></div>";
}
function delInp(btn){
//获取父级div
var showdiv=document.getElementById("showdiv");
//获取要删除的子div
var cdiv=btn.parentNode;
//父div删除子div
showdiv.removeChild(cdiv);
}
14-2、使用createElement及appendChild创建添加新元素
//获取元素对象
var obj=document.createElement("标签名");
元素对象名.appendChild(obj);
---------------------------------------------------------------------------------------------------
function testOper2(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//创建input元素对象
var inp=document.createElement("input");
inp.type="file";
//创建按钮元素对象
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
//创建换行符
var br=document.createElement("br");
//将创建的元素对象存放到div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
15、JS操作表格
###15-1、删除行
行对象.rowIndex //返回行对象的角标
表格对象.deleteRow(要删除的行对象的角标);
function delRow(btn){
//获取table对象
var ta=document.getElementById("ta");
//获取要删除的行对象
var tr=btn.parentNode.parentNode;
//删除行
ta.deleteRow(tr.rowIndex);
}
###15-2、修改单元内容
单元格对象.innerHTML=“新的内容”;
行对象.cells//返回当前行所有的单元格对象的数组
function updateRow(btn){
//获取行对象
var tr=btn.parentNode.parentNode;
//获取行对象
var cell=tr.cells[3];
//判断cell.innerHTML的值是否是数字
if(!isNaN(Number(cell.innerHTML))){
//修改单元格内容
cell.innerHTML="<input type='text' value='"+cell.innerHTML+"'onblur='updateRow2(this)'/>";
}
}
function updateRow2(inp){
//获取单元格对象
var cell=inp.parentNode;
//实现保存
cell.innerHTML=inp.value;
}
###15-3、选择删除
function chooseDel(){
//获取表格对象
var ta=document.getElementById("ta");
//获取要删除的行号
var chks=document.getElementsByName("chk");
for(var i=1;i<chks.length;i++){
if(chks[i].checked){
//删除行
ta.deleteRow(i);
i--;
}
}
}
###15-4、添加新行
function addRow(){
//获取table表格对象
var ta=document.getElementById("ta");
//添加行
var tr=ta.insertRow(1);
//添加单元格
var cell0=tr.insertCell(0);
cell0.innerHTML="<input type='checkbox' name='chk'/>";
var cell1=tr.insertCell(1);
cell1.innerHTML=document.getElementById("uname").value;
var cell2=tr.insertCell(2);
cell2.innerHTML="李思";
var cell3=tr.insertCell(3);
cell3.innerHTML="49.88";
var cell4=tr.insertCell(4);
cell4.innerHTML="5";
var cell5=tr.insertCell(5);
cell5.style.textAlign="center";
cell5.innerHTML="<input type='button' value='修改数量' onclick='updateRow(this)'/><input type='button' value='删除' onclick='delRow(this)'/>";
}
###15-5、复制行
function copyRow(){
//获取表格对象
var ta=document.getElementById("ta");
//获取选择行对象
var chks=document.getElementsByName("chk")
for(var i=0;i<chks.length;i++){
if(chks[i].checked){
var tr=ta.insertRow(ta.rows.length);
//复制行
tr.innerHTML=ta.rows[i].innerHTML;
}
}
}
###15-6、隔行变色
function operCss(){
//获取所有的行对象数组
var trs=document.getElementById("ta").rows;
//遍历
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="green";
}
}
}
HTML页面代码
<body>
<h3 align="center">操作表格学习</h3>
<input type="button" name="" id="" value="删除" onclick="chooseDel()"/>
<input type="button" name="" id="" value="添加行" onclick="addRow()"/>
<input type="button" name="" id="" value="复制行" onclick="copyRow()"/>
<input type="button" name="" id="" value="隔行变色" onclick="operCss()"/>
书名：<input type="text" name="uname" id="uname" value="" />
<hr />
<table border="1px" id="ta">
<tr style="text-align: center;font-weight: bold;">
<td width="50px" align="left"><input type="checkbox" name="chk" value="0" id="ck" onclick="chooseAll()"/></td>
<td width="200px">书名</td>
<td width="100px">作者</td>
<td width="100px">价格</td>
<td width="200px">购买数量</td>
<td width="200px" >操作</td>
</tr>
<tr id="t1">
<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
<td>java从入门到放弃</td>
<td>wollo</td>
<td>43.50</td>
<td>3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
<td>javaScript入门</td>
<td>高淇</td>
<td>77.60</td>
<td>2</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="2" /></td>
<td>Spring入门</td>
<td>卢俊杰</td>
<td>78.88</td>
<td>3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
</table>
</body>
16、JS操作form表单
###16-1、String对象
属性:
length //字符串长度
prototype //原型
constructor
方法:
charAt(index) //得到index索引处的字符
charCodeAt() //得到字符的ASCII值 A-Z为65到90 a-z 97到122 0-9是45到57
concat() //拼接字符串
fromCharCode() //将 Unicode 编码转为字符。
indexOf() //严格区分大小写查找子字符串在原始字符串第一次出现的索引，找不到返回-1，
lastIndexOf(); //严格区分大小写查找子字符串在原始字符串最后一次出现的索引，找不到返回-1，
match() ; //字符串匹配正则表达式，返回匹配的内容，匹配不上返回null
replace() //字符串匹配字符串或正则表达式，进行替换，返回替换后的字符串，匹配不上返回原字符串
search() //字符串查找子字符串，返回找到的字符串，找不到返回null
slice()
split() ; //按指定分隔符进行分隔字符串，到数组中
substr() ; "Hello".substr(1,3);从索引1开始，取3个长度的子字符串
substring() //Hello".substring(1,3);从索引1开始,到索引为3-1处的子字符串
toLowerCase() //转小写
toUpperCase() //转大写
valueOf()
常见字符对应的ASCII码
a-z： 97-122
A-Z： 65-90
0-9： 48-57
###16-2、操作表单
1、获取form表单对象
使用id:var fm=document.getElementById("fm");
使用name属性:var frm=document.frm;
2、获取form下的所有表单元素对象集合
fm.elements
3、form表单的常用方法
表单对象.submit();//提交表单数据。
4、form的属性操作：
表单对象名.action="新的值"//动态的改变数据的提交路径
表单对象名.method="新的值"//动态的改变提交方式
5、js表单元素的通用属性
只读模式:
readonly="readonly"//不可以更改，但是数据可以提交
关闭模式：
disabled="disabled"//不可以进行任何的操作，数据不会提交。
6、js操作多选框、单选框
被选中状态下在js中checked属性值为true,未选中状态为false;
7、js操作下拉框：
被选择的option对象在js中selected属性值为true，未选中为false
###16-3、校验表单
<script type="text/javascript">
//常见验证码
function createCode(){
//创建随机四位数字
var code=Math.floor(Math.random()*9000+1000);
//获取元素对象
var span=document.getElementById("codeSpan");
//将数字存放到span中
span.innerHTML=code;
}
//验证用户名
function checkUname(){
//获取用户的用户名信息
var uname=document.getElementById("uname").value;
//创建校验规则
var reg=/^[\u4e00-\u9fa5]{2,4}$/
//获取span对象
var span=document.getElementById("unameSpan");
//开始校验
if(uname=="" || uname==null){
//输出校验结果
span.innerHTML="用户名不能为空";
span.style.color="red";
return false;
}else if(reg.test(uname)){
//输出校验结果
span.innerHTML="用户名ok";
span.style.color="green";
return true;
}else{
//输出校验结果
span.innerHTML="用户名不符合规则";
span.style.color="red";
return false;
}
}
//验证密码
function checkPwd(){
//获取用户的密码信息
var pwd=document.getElementById("pwd").value;
//创建校验规则
var reg=/^[a-z]\w{5,7}$/;
//获取span对象
var span=document.getElementById("pwdSpan");
//开始校验
if(pwd=="" ||pwd==null){
//输出校验结果
span.innerHTML="*密码不能为空";
span.style.color="red";
return false;
}else if(reg.test(pwd)){
//输出校验结果
span.innerHTML="*密码ok";
span.style.color="green";
return true;
}else{
//输出校验结果
span.innerHTML="*密码格式不正确";
span.style.color="red";
return false;
}
checkPwd2();
}
//校验确认密码
function checkPwd2(){
//获取第一次密码
var pwd=document.getElementById("pwd").value;
//获取确认密码
var pwd2=document.getElementById("pwd2").value;
//获取span对象
var span=document.getElementById("pwd2Span");
//比较两次密码是否相同
if(pwd2==""||pwd2==null){
span.innerHTML="确认密码不能为空";
span.style.color="red";
return false;
}else if(pwd==pwd2){
span.innerHTML="确认密码ok";
span.style.color="green";
return true;
}else{
span.innerHTML="两次密码不一致";
span.style.color="red";
return false;
}
}
//校验手机号
function checkPhone(){
return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
}
//校验邮箱
function checkMail(){
return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
}
//校验籍贯
function checkAddress(){
//获取用户选择的数据
var sel=document.getElementById("address").value;
//获取span
var span=document.getElementById("addressSpan");
//校验
if(sel!=0){
span.innerHTML="籍贯选择成功";
span.style.color="green";
return true;
}else{
span.innerHTML="籍贯不能为请选择";
span.style.color="red";
return false;
}
}
//校验爱好
function checkFav(){
//获取所有的爱好
var favs=document.getElementsByName("fav");
//获取span
var span=document.getElementById("favSpan");
//遍历
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
span.innerHTML="爱好选择成功";
span.style.color="green";
return true;
}
}
span.innerHTML="爱好至少选则一项";
span.style.color="red";
return false;
}
//校验是否同意公司协议
function checkAgree(){
document.getElementById("sub").disabled=!document.getElementById("agree").checked;
}
//提交判断
function checkSub(){
checkUname();
checkPwd();
checkPwd2();
checkPhone();
checkMail();
checkAddress();
checkFav();
return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
}
---------------------------------------------------------------------------------------------------
//封装校验:相同的保留，不同的传参。
function checkField(id,reg){
//获取用户数据
var inp=document.getElementById(id);
var va=inp.value;
var alt=inp.alt;
//创建校验规则
//获取span对象
var span=document.getElementById(id+"Span")
//开始校验
if(va=="" ||va==null){
//输出校验结果
span.innerHTML=alt+"不能为空";
span.style.color="red";
return false;
}else if(reg.test(va)){
//输出校验结果
span.innerHTML=alt+"ok";
span.style.color="green";
return true;
}else{
//输出校验结果
span.innerHTML=alt+"不符合规则";
span.style.color="red";
return false;
}
}
</script>
17、正则表达式
17-1、正则表达式
一种字符串匹配的模式，可以用来检查一个字符串是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。
正则表达式的定义
普通方式：var 变量名 = /表达式/附加参数；
构造函数： var 变量名 = new RegExp(“表达式”,”附加参数”);
附加参数有三个：
i: 表示不区分大小写
g: 表示全局匹配
m : 表示多行匹配(文本域)
17-2、使用正则
1、exec()：检索字符中是正则表达式的匹配，返回找到的值，并确定其位置,如果没有匹配到，则返回null
调用方法： reg.exec(字符串);
2、test()方法(核心)：检索字符串中指定的值，返回true或false
调用方法： reg.test(字符串);
3、match()：正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null
调用方法：字符串.match(正则)
4、replace();
调用方法：字符串.replace(正则,替换后的内容)
例子：var reg=/1a/;
var str="1b";
alert(str.replace(reg,"he")); //结果为 he
17-3、常见的正则符号(核心)
^ :--------表示正则以字符模式开始
$ :--------表示正则以字符模式结束
[0-9] :----代表0-9之间的某一个数字
[a-zA-Z]:--表示某一个英文字母（包括大写和小写）
[-]：------表示 –
\d :------代表0-9之间的某个数字,等同于[0-9]
\D :------表示非数字,即除了0-9以外的其他所有字符,也可以写成[0-9]
\s :-------空格
\S :-------非空格
\w :-------字母，数字和下划线中间的某一个,等同于[a-zA-Z0-9]_
\W :-------非字母数字下划线,等同于[a-zA-Z0-9_
. :--------表示任意字符
? :--------表示前面的正则可以出现0次或者1次
+ :-------表示前面的正则可以出现1次或者多次(1次以上)
* :-------表示前面的正则可以出现任意次数（0次或者多次）
{m} :------表示正则正好出现m次
{m,} :-----表示正则出现m次以上（包含m次）
{m,n}:-----表示正则出现的次数在m-n次之间
加入有两个正则表达式：X,Y
XY：-------表示两个正则表达式是并且的关系
(X|Y)：----表示两个正则之间是或者的关系
[a-z]：----任意字母 []中的表示任意一个都可以
[^a-z]：---非字母 []中^代表除了
[abc]：----abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符
[\u4e00-\u9fa5] ：所有中文
！注意：|的优先级很低，需要（）来改变优先级
JQuery
##1、jQuery介绍
什么是jQuery？
jQuery 全称 javaScript Query是js的一个框架。本质上仍然是js。jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。（write less do more）
jQuery的特点：
支持各种主流的浏览器。
使用特别简单
拥有便捷的插件扩展机制和丰富的插件
声明使用jquery：
引入jQuery文件
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
声明js代码域
<script type="text/javascript">
jQuery操作代码
</script>
注意：
1、一定不要二合一操作
2、js、jQuery是动态的脚本语言，用来操作HTML的，让网页和用户之间互动
HTML用来格式化展示信息
CSS用来增加网页样式
都是由浏览器解析执行的
3、所有的网页都是存储在服务器端，运行在浏览器端。
4、所有的网页都是服务器实时的根据请求发送给浏览器执行的。
5、所有的网页数据可以实现动态的拼接。
##2、jQuery的封装原理
1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。
2、使用对象封装，将代码封装到对象中.但是对象如果被覆盖，则全部失效，风险极高。
3、使用工厂模式,将代码进行封装，但是并没有解决问题
4、将封装的函数名字去除，避免覆盖。但是函数没有办法调用了。
5、匿名自调用，可以在页面加载的时候调用一次。但是不能重复调用，并且数据没有办法获取
6、使用闭包,将数据一次性挂载到window对象下
闭包原理:在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。
(function(obj){
//var bjsxt={};
obj.test=function(){
alert("工厂");
}
alert("匿名自调用");
})(window)
##3、jQuery的选择器
基本选择器
id选择器：选择一个具有给定id属性的单个元素。
$("#id") == document.getELementById("id");
如：$( "#myDiv" )； //得到id为myDiv的元素对象
标签选择器：根据给定（html）标记名称选择所有的元素。
$("element") == document.getElementByTagName("element");
如：$("div"); //得到元素标签名为div的所有元素对象
类选择器：选择给定样式类名的所有元素。
$(".class") == document.getElementByClassName("class");
如：$(".myClass"); //的到class值为myClass的所有元素对象
复合选择器
组合选择器（并集选择器）:将每一个选择器匹配到的元素合并后一起返回。
$("selector1, selector2, ... ,selectorN")
如：$("div,span,p.myClass") //得到div、span、p、.myClass所有元素对象
子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。
$("parent > child")
如：$("form > input") //得到form下面的所有直接input元素对象
层级选择器：
$("parent > child"):选择所有指定“parent”元素中指定的"child"的直接子元素
如：$("form > input")
$("prev ~ siblings"):匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
如：$("form ~ input")
$("prev + next"):选择所有紧接在 “prev” 元素后的 “next” 元素
如：$("label + input")
属性选择器：选择所有具有指定属性的元素，该属性可以是任何值。
$(element[attribute])
如：$("div[id]") //得到所有含有 id 属性的 div 元素
过滤选择器：根据过滤添加得到所有匹配元素对象。
$("input:checked"); //有checked属性的input框
$("tr:even"); //得到偶数行tr
$("tr:odd"); //得到奇数行tr
$("li:eq(1)"); //得到索引为1的li
$("li:gt(1)"); // 得到索引大于1的li
$("li:lt(1)"); // 得到索引大于1的li
$("li:first"); // 得到第一个li
$("li:last"); // 得到最后一个li
:gt(n) 大于n的元素 如：$("li:gt(1)").show();
:lt(n) 小于n的元素 如：$("li:gt(1)").show();
:eq(n) 等于n的元素 如：$("li:gt(1)").show();
:first 第一个元素 如：$("li:gt(1)").show();
:last 最后的元素 如：$("li:gt(1)").show();
:even 偶数行元素 如：$("li:even").show();
:odd 奇数行元素 如：$("li:odd").show();
:hidden 隐藏的元素 如：$("p:hidden").show();
:visible 显示的元素 如：$("p:visible").hide();
:not 不是指定元素 如$("p").not($("div p.selected"))从段落集合中移除满足 "div p.selected" 的元素。
注意：
jQuery中选择器获取的是存储了HTML元素对象的数组。
jQuery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。jquery对我们 提供了多种多样的选择器来选择需要操作的HTML元素对象。
##4、jQuery操作元素的属性
获取:
对象名.attr(“属性名”) //返回当前属性值
注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。
修改
对象名.attr(“属性名”,“属性值”);
addClass( className ) //为匹配的元素添加指定的样式类名
attr( attributeName ) //获取匹配的元素的属性的值
html() //获取匹配元素的HTML内容
prop( propertyName ) //获取匹配的元素的属性（property）值
removeAttr( attributeName ) //为匹配的元素移除一个属性（attribute）
removeClass( [className ] ) //移除集合中匹配元素一个，多个或全部样式
removeProp( propertyName ) //为匹配的元素删除一个属性（property）
text() //得到匹配元素文本，包括他们的后代
toggleClass( className ) //为匹配的元素添加或删除一个或多个样式类（class）
val() //获取匹配的元素当前值
<script type="text/javascript">
function testField(){
//获取元素对象
var uname=$("#uname");
//获取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testField2(){
//获取元素对象
var uname=$("#uname");
uname.attr("type","button");
}
</script>
##5、jQuery操作内容
1、获取
对象名.html()//返回当前对象的所有内容，包括HTML标签。
对象名.text()//返回当前对象的文本内容，不包括HTML标签
2、修改
对象名.html(“新的内容”)//新的内容会将原有内容覆盖，HTML标签会被解析执行
对象名.text(“新的内容”)//新的内容会将原有内容覆盖，HTML标签不会被解析
<script type="text/javascript">
//声明函数
function testHtml(){
//获取元素对象
var showdiv=$("#showdiv");
//获取元素的内容
alert(showdiv.html());
}
function testHtml2(){
//获取元素对象
var showdiv=$("#showdiv");
//修改元素内容
showdiv.html(showdiv.html()+"<i>今天天气真好，适合抓鬼子</i>");
}
function testText(){
//获取元素对象
var showdiv=$("#showdiv");
//获取元素内容
alert(showdiv.text());
}
function testText2(){
//获取元素对象
var showdiv=$("#showdiv");
//修改元素内容
showdiv.text("<i>今天天气真好，适合抓鬼子</i>");
}
</script>
##6、jQuery操作样式
1、使用css()
对象名.css(“属性名”)//返回当前属性的样式值
对象名.css(“属性名”,“属性值”)//增加、修改元素的样式
对象名.css({“样式名”:“样式值”,“样式名”:“样式值”……})//使用json传参，提升代码书写效率。
2、使用addClass()
对象名.addClass(“类选则器名”)//追加一个类样式
对象名.removeClass(“类选择器 名”)//删除一个指定的类样式
css( propertyName ) //获取元素的样式属性
width() //获取元素宽度
height() //获取元素高度
innerHeight() //获取元素高度值,包括padding，但是不包括border
innerWidth() //获取元素宽度值,包括padding，但是不包括border
offset() //获取元素相对于文档的坐标
position() //获取元素相对于父元素的坐标
<script type="text/javascript">
//jQuery操作样式---css()
function testCss(){
//获取元素对象
var showdiv=$("#showdiv");
//操作样式--增加
showdiv.css("background-color","orange");
//操作样式--获取
alert(showdiv.css("width"));
}
function testCss2(){
//获取元素对象
var div=$("#div01");
//操作样式
div.css({"border":"solid 1px","width":"300px","height":"300px"});
}
jquery操作样式--addClass()
function testAddClass(){
//获取元素对象
var div=$("#div01");
//操作元素样式
div.addClass("common");
}
function testAddClass2(){
//获取元素对象
var div=$("#div01");
//操作元素样式
div.addClass("dd");
}
function testRemoveClass(){
//获取元素对象
var div=$("#div01");
//删除元素样式
div.removeClass("dd");
}
</script>
##7、jQuery操作元素的文档结构
遍历子元素：children( )
遍历同辈元素：next( )、prev( )、siblings( )
遍历前辈元素：parent( )、parents( )
其他遍历方法：each( ) 、end( )、find( )、eq( )、first( )
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
wrapAll() 为元素外层包裹一层元素，添加父元素
wrapInner() 在匹配元素里的内容外包一层结构，内容外包裹一个子元素
4、替换
replaceAll( target ) 用匹配元素替换目标元素
5、删除
remove() 将匹配元素从DOM中删除，移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据
empty() 移除匹配元素的所有子节点，不仅移除子元素（和其他后代元素），同样移除元素里的文本
detach() 删除的元素不删除数据和事件
6、复制
clone() 复制所有匹配的元素，包括所有匹配元素、匹配元素的下级元素、文字节点
<script type="text/javascript">
内部插入
function testAppend(){
//获取元素对象
var div=$("#showdiv");
//使用内部插入
div.append("<i>，饭</i>");
}
function testAppendTo(){
//获取元素对象
var div=$("#showdiv");
//使用appendTo()
$("#u1").appendTo(div);
}
function testPrepend(){
//获取元素对象
var div=$("#showdiv");
//使用prepend()
div.prepend("<i>你好，</i>");
}
外部插入
function testAfter(){
//获取元素对象
var div=$("#showdiv");
//使用after外部插入
div.after("<b>今天天气不错，适合学习</b>");
}
function testBefore(){
//获取元素对象
var div=$("#showdiv");
//使用before外部插入
div.before("<b>今天天气不错，适合学习</b>")
}
function testEmpty(){
$("#showdiv").empty()
}
</script>
##8、jQuery中的事件
元素对象.bind(“事件名”,fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
1、js中的是一次添加，多次添加时覆盖的效果
jQuery是追加的效果，可以实现给一个事件添加不同的监听函数。
元素对象.unBind(“事件名”)//移除指定的元素对象的指定事件
2、js方式添加的事件不能移除。
元素对象.one(“事件名”,fn)//给指定的元素对象添加一次性事件，事件被触发执行一次即失效。
3、可以给事件添加多个一次函数，unBind可以用来解绑
页面载入事件
$(document).ready(fn);
页面载入成功后会调用传入的函数对象
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。
<script type="text/javascript">
//js动态添加事件
function testThing(){
//获取元素对象
var btn=document.getElementById("btn2");
//添加事件
btn.onclick=function(){
alert("我是js方式");
}
}
//jquery
//测试bind绑定
function testBind(){
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")});
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2w2222")});
}
//测试unBind解绑
function testUnfBind(){
$("#btn3").unbind("click");
}
//测试one
function testOne(){
$("#btn3").one("click",function(){alert("我是one")});
}
//页面载入事件
//js方式
window.onload=function(){
alert("我是js方式页面加载");
}
window.onload=function(){
alert("我是js方式页面加载2222");
}
//jquery方式
$(document).ready(function(){
alert("我是jQuery");
})
$(document).ready(function(){
alert("我是jQuery22222");
})
</script>
9、jQuery操作表格
1、jquery操作checkbox
操作checkbox的选择状态使用prop()方法
prop(“checked”)//返回选择的状态，选择返回true,未选返回false
prop(“checked”,true)//置为选择状态
prop(“checked”,false)//置为未选状态
使用each进行遍历
对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数
this表示js对象
$(this)表示jQuery对象
parents(“标签名”)//获取指定的上级元素对象
parent()
2、jQuery操作表格
<script type="text/javascript">
//隔行变色功能
$(function(){
$("#btn1").click(function(){
//获取所有的行对象
$("tr:odd").css("background-color","orange");
})
})
//全选
$(function(){
//获取被选中的checkbox对象
$("#btn2").click(function(){
$("input[type='checkbox']").prop("checked",true);
})
})
//取消全部选择
$(function(){
//获取被选中的checkbox对象
$("#btn3").click(function(){
$("input[type='checkbox']").prop("checked",false);
})
})
//反选
$(function(){
$("#btn4").click(function(){
$("input[type='checkbox']").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
})
})
//选择奇数行
$(function(){
$("#btn5").click(function(){
$("input[type='checkbox']:odd").prop("checked",true);
})
})
//删除选择的行
$(function(){
$("#btn6").click(function(){
$(":checkbox:checked").each(function(){
$(this).parents("tr").remove();
})
})
})
//在最后一行添加新的行
$(function(){
$("#btn7").click(function(){
$("tr:last").after("
<tr>
<td><input type='checkbox'name='chk'id='chk'value=''/></td>
<td>126666</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>"
);
})
})
</script>
##10、jQuery中的动画效果
基本
show() 显示隐藏的匹配元素。
hide() 隐藏匹配的元素。
滑动
slideDown() 用滑动动画显示一个匹配元素。
slideUp() 用滑动动画隐藏一个匹配元素。
slideToggle() 用滑动动画显示或隐藏一个匹配元素。
淡入淡出
fadeIn() 通过淡入的方式显示匹配元素。
fadeOut() 通过淡出的方式隐藏匹配元素。
fadeTo() 调整匹配元素的透明度。
fadeToggle() 通过匹配的元素的不透明度动画，来显示或隐藏它们。
自定义
animate() 根据一组 CSS 属性，执行自定义动画。
stop() 停止匹配元素当前正在运行的动画。
delay() 设置一个延时来推迟执行队列中后续的项。
finish() 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
如：
<html>
<head>
<title>动画效果</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--声明css代码域-->
<style type="text/css">
#showdiv{
height: 300px;
background-color: orange;
display: none;
}
#div01{
height: 300px;
background-color:#8A2BE2;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
function test(){
$("#showdiv").show(3000);
$("#div01").hide(3000);
/*$("#showdiv").hide(3000);
$("#div01").show(3000);*/
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").slideUp(2000);
$("#showdiv").fadeOut(3000);
}
</script>
</head>
<body onload="test()">
<div id="showdiv">
</div>
<div id="div01">
</div>
</body>
</html>
##11、案例（菜单）
<html>
<head>
<title>菜单案例</title>
<meta charset="UTF-8"/>
<!--声明css-->
<style type="text/css">
ul li{
list-style-type: none;
}
#na{
position: relative;
left: 20px;
}
</style>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
var flag=false;
//页面载入
$(function(){
$("ul>label").bind("mouseover",function(){
/*if(flag){
$("#na").slideUp(1000);
$("#naImg").attr("src","img/close.gif");
flag=true;
}else{*/
$("#na").slideDown(1000);
$("#naImg").attr("src","img/open.gif");
//flag=true;
});
$("ul>label").bind("mouseout",function(){
//if(flag){
$("#na").slideUp(1000);
$("#naImg").attr("src","img/close.gif");
//flag=true;
/*}else{
$("#na").slideDown(1000);
$("#naImg").attr("src","img/open.gif");
flag=true;
}*/
});
})
</script>
</head>
<body>
<h3>jQuery-菜单案例</h3>
<hr />
<ul>
<img src="img/open.gif" id="naImg"/> <label for="">国际动态</label>
<div id="na" style="display: none;">
<li><img src="img/item.gif" alt="" /><label for="">国内新闻</label></li>
<li><img src="img/item.gif" alt="" /><label for="">国际新闻</label></li>
</div>
</ul>
<div id="div01" style="height: 100px;width: 100px; background-color: royalblue; display: none;">
</div>
<div id="div01" style="height: 100px;width: 100px; background-color: orange;">
</div>
</body>
</html>
扫一扫
1477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
