HTML、CSS、Javascript、jQuery、Xml

2022 年 1 月 14 日
筆記
JAVA

HTML

HTML简介

Hyper Text Markup Language （超文本标记语言）简写：HTML。通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

代码示例：

<!DOCTYPE html> <!--约束，声明-->
<html lang="en"> <!--htmL标签表示htmL的开始，lang="zh_CN"表示中文html，lang="en"表示英文html,标签中一般分为两部分,分别是: head和body
-->
<head> <!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
	<meta charset="UTF-8"> <!--表明当前页面使用UTF
-8字符集-->
	<title>标题</title>
</head>
<body> <!--body标签是html页面显示的主题内容-->
	hello
</body>
</html>

注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。

HTML 文件的书写规范

<html>	表示整个 html 页面的开始
	<head>	头信息
		<title>标题</title>	标题
	</head>
	<body>	body 是页面的主体内容
		页面主体内容
	</body>
</html>	表示整个 html 页面的结束

Html 的代码注释

HTML 标签介绍

标签的格式:

<标签名>封装的数据</标签名>
标签名大小写不敏感。
标签拥有自己的属性。

i. 分为基本属性：
```
bgcolor="red"
```
可以修改简单的样式效果

ii. 事件属性：
```
 onclick="alert('你好！')"
```
可以直接设置事件响应后的代码。
标签又分为，单标签和双标签。

i. 单标签格式：
```
<标签名 />	br 换行	hr 水平线
```
ii. 双标签格式:
```
 <标签名> ...封装的数据...</标签名>
```

标签的语法

<!-- ①标签不能交叉嵌套 -->

正确：<div><span>早安，玛卡巴卡</span></div> 
错误：<div><span>早安，玛卡巴卡</div></span>

<hr/>

<!-- ②标签必须正确关闭 -->

<!-- i.有文本内容的标签： -->



正确：<div>早安，玛卡巴卡</div> 
错误：<div>早安，玛卡巴卡

<hr />

<!-- ii.没有文本内容的标签： -->正确：<br />错误：<br><hr />

<!-- ③属性必须有值，属性值必须加引号 -->正确：<font color="blue">早安，玛卡巴卡</font> 错误：<font color=blue>早安，玛卡巴卡</font> 错误：<font color>早安，玛卡巴卡</font><hr />

<!-- ④注释不能嵌套 -->正确：<!-- 注释内容 --> <br/>错误：<!--	<!-- 这是错误的 html 注释	-->	--><hr />

注意事项：

html 代码不是很严谨。有时候标签不闭合，也不会报错。

常用标签介绍

font 字体标签

<body><!-- 字体标签需求1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。font     标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸) color 属性修改颜色face 属性修改字体size 属性修改文本大小--><font color="red" face="宋体" size="7">我是字体标签</font></body>

特殊字符

一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (。

要在 HTML 文档中显示小于号，我们需要这样写：< 或者 <

使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。

注意：实体对大小写敏感。

特殊字符表：

标题标签

<body><!-- 标题标签需求1：演示标题1 到标题6 的h1 - h6 都是标题标签h1 最大h6 最小align 属性是对齐属性left	左对齐(默认)center	剧中right	右对齐--><h1 align="left">标题 1</h1><h2 align="center">标题 2</h2><h3 align="right">标题 3</h3><h4>标题 4</h4><h5>标题 5</h5><h6>标题 6</h6><h7>标题 7</h7></body>

超链接

在网页中所有点击之后可以跳转的内容都是超连接

<body><!-- a 标签是 超链接href 属性设置连接的地址target 属性设置哪个目标进行跳转_self	表示当前页面(默认值)_blank	表示打开新页面来进行跳转--><a href="//localhost:8080">百度</a><br/><a href="//localhost:8080" target="_self">百度_self</a><br/><a href="//localhost:8080" target="_blank">百度_blank</a><br/></body>

列表标签

<body><!--ul 是无序列表 type 属性可以修改列表项前面的符号 li 是列表项 --><ul type="none"><li>赵四</li><li>刘能</li><li>小沈阳</li><li>宋小宝</li></ul></body>

<body><!--ol 是有序列表 type 属性可以修改列表项前面的符号 li 是列表项 --><ol type="a">    <li>赵四</li>    <li>刘能</li>    <li>小沈阳</li>    <li>宋小宝</li></ol></body>

img 标签

img 标签可以在 html 页面上显示图片。

src 属性可以设置图片的路径
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

在JavaSE 中路径也分为相对路径和绝对路径.

相对路径:从工程名开始算
绝对路径:盘符目录/文件名

在web 中路径分为相对路径和绝对路径两种

相对路径:

. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件,相当于 ./文件名（./ 可以省略）

绝对路径:

正确格式是: //ip:port/工程名/资源路径
错误格式是: 盘符目录/文件名

<img src=".\img\图片1.jpg" width="600" height="500" border="1" alt="美女找不到了"/><img src="img\图片1.jpg" width="600" height="500" border="1" alt="美女找不到了"/>

表格标签

table 标签是表格标签
border 设置表格边框
width 设置表格宽度
height 设置表格高度
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置表格相对于页面的对齐方式
b 是加粗标签
cellspacing 设置单元格间距

<table align="center" border="1" height="500" width="500" cellspacing="1">    <tr>        <th>1</th>        <th>2</th>        <th>3</th>    </tr>    <tr>        <td><b>a</b></td>        <td>b</td>        <td>c</td>    </tr></table>

跨行跨列表格

colspan 属性设置跨列
rowspan 属性设置跨行

新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。

<table width="500" height="500" cellspacing="0" border="1">    <tr>        <td colspan="2">1.1</td>        <td>1.3</td>        <td>1.4</td>        <td>1.5</td>    </tr>    <tr>        <td rowspan="2">2.1</td>        <td>2.2</td>        <td>2.3</td>        <td>2.4</td>        <td>2.5</td>    </tr>    <tr>        <td>3.2</td>        <td>3.3</td>        <td>3.4</td>        <td>3.5</td>    </tr>    <tr>        <td>4.1</td>        <td>4.2</td>        <td>4.3</td>        <td colspan="2" rowspan="2">4.4</td>    </tr>    <tr>        <td>5.1</td>        <td>5.2</td>        <td>5.3</td>    </tr></table>

iframe框架标签 (内嵌窗口)

iframe 框架标签 (内嵌窗口)

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面

ifarme 和a 标签组合使用的步骤:

在 iframe 标签中使用 name 属性定义一个名称
在 a 标签的 target 属性上设置iframe 的 name 的属性值

<iframe src="3.标题标签.html" width="500" height="500" name="abc"></iframe>    <ol>        <li><a href="4.超链接.html" target="abc">超链接</a></li>        <li><a href="3.标题标签.html" target="abc">标题标签</a></li>    </ol>

表单标签

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。

隐藏域，自我评价（多行文本域）。重置，提交。

form 标签就是表单
input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked=”checked”表示默认选中
input type=checkbox 是复选框 checked=”checked”表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected=”selected”设置默认选中
textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）

rows 属性设置可以显示几行的高度

cols 属性设置每行可以显示几个字符宽度

   <form>       用户名称：<input type="text" value="请输入姓名"/><br/>       用户密码：<input type="password" maxlength="5"/><br/>       性别：<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex"/>女<br/>       兴趣爱好：<input type="checkbox" name="hobby" checked="checked"/>Java<input type="checkbox"  name="hobby"/>C++<input type="checkbox"  name="hobby" checked="checked">Python<br/>       国籍：<select>                <option>请选择国籍</option>                <option selected="selected">中国</option>                <option>美国</option>                <option>日本</option>            </select><br/>       自我评价：<textarea rows="10" cols="20">爱你哟</textarea><br/><hr>       <input type="reset" value="reset"/><br/>       <input type="submit" value="submit"/><br/>       <input type="button" value="这是一个按钮"><br/>       <input type="file"><br/>       <input type="hidden" value="avc"/>   </form>

表单格式化

<form>    <h1 align="center">用户注册</h1>    <table align="center">        <tr>            <td>用户名称：</td>            <td><input type="text" value="请输入姓名"/></td>        </tr>        <tr>            <td>用户密码：</td>            <td><input type="password" maxlength="5"/></td>        </tr>        <tr>            <td>性别：</td>            <td><input type="radio" name="sex" checked="checked" />男                <input type="radio" name="sex"/>女            </td>        </tr>        <tr>            <td>兴趣爱好：</td>            <td>                <input type="checkbox" checked="checked" name="hobby"/>Java                <input type="checkbox" name="hobby"/>C++                <input type="checkbox" checked="checked" name="hobby">Python            </td>        </tr>        <tr>            <td>国籍：</td>            <td><select>                <option>请选择国籍</option>                <option selected="selected">中国</option>                <option>美国</option>                <option>日本</option>            </select></td>        </tr>        <tr>            <td>自我评价：</td>            <td><textarea rows="10" cols="20">爱你哟</textarea></td>        </tr>        <hr>        <tr>            <td><input type="reset" value="reset"/></td>            <td align="center"><input type="submit" value="submit"/></td>            <td><input type="hidden" value="avc"/></td>        </tr>        <tr>            <td><input type="button" value="这是一个按钮"></td>            <td><input type="file"></td>        </tr>    </table></form>

表单提交细节

form 标签是表单标签

action 属性设置提交的服务器地址

method 属性设置提交的方式 GET(默认值)或 POST

表单提交的时候，数据没有发送给服务器的三种情况：

1.表单项没有 name 属性值

2.单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器

3.表单项不在提交的 form 标签中

GET 请求的特点是：

1.浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value

2.不安全

3.它有数据长度的限制

POST 请求的特点是：

1.浏览器地址栏中只有 action 属性值

2.相对于 GET 请求要安全

3.理论上没有数据长度的限制

<form action="//localhost:8080" method="post">    <h1 align="center">用户注册</h1>    <table align="center">        <tr>            <td>用户名称：</td>            <td><input type="text" value="请输入姓名" name="username"/></td>        </tr>        <tr>            <td>用户密码：</td>            <td><input type="password" maxlength="5" name="password"/></td>        </tr>        <tr>            <td>性别：</td>            <td><input type="radio" name="sex" checked="checked" value="boy"/>男                <input type="radio" name="sex" value="girl"/>女            </td>        </tr>        <tr>            <td>兴趣爱好：</td>            <td>                <input type="checkbox" checked="checked" name="hobby" value="java"/>Java                <input type="checkbox" name="hobby" value="c++"/>C++                <input type="checkbox" checked="checked" name="hobby" value="python">Python            </td>        </tr>        <tr>            <td>国籍：</td>            <td><select>                <option>请选择国籍</option>                <option selected="selected" name="nation" value="中国">中国</option>                <option name="nation" value="美国">美国</option>                <option name="nation" value="日本">日本</option>            </select></td>        </tr>        <tr>            <td>自我评价：</td>            <td><textarea rows="10" cols="20" name="text">爱你哟</textarea></td>        </tr>        <hr>        <tr>            <td><input type="reset" value="reset"/></td>            <td align="center"><input type="submit" value="submit"/></td>            <td><input type="hidden" value="avc"/></td>        </tr>        <tr>            <td><input type="button" value="这是一个按钮"></td>            <td><input type="file"></td>        </tr>    </table></form>

其他标签

div 标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

<div>div 标签 1</div><div>div 标签 2</div><span>span 标签 1</span><span>span 标签 2</span><p>p 段落标签 1</p><p>p 段落标签 2</p>

CSS

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

语法规则

选择器：浏览器根据“选择器”决定受CSS 样式影响的HTML 元素（标签）。

属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

例如：

p{	color:red;	font-size:30px;}

注：一般每行只描述一个属性

CSS 注释：/注释内容/

CSS和 HTML的结合方式

style 标签专门用来定义 css 样式代码

第一种

分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。

solid：实线

px：像素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div style="border: 1px solid red;">div标签1</div>    <div style="border: 1px solid red;">div标签1</div>    <span style="border: 1px solid red">span标签</span>    <span style="border: 1px solid red">span标签</span></body></html>

这种方式的缺点？

如果标签多了。样式多了。代码量非常庞大。
可读性非常差。
Css 代码没什么复用性可方言

第二种

style标签内全部都是css的内容。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/        div{            border: 1px            solid            red;        }        span{            border: 1px            solid            blue        }    </style></head><body>    <div>div标签1</div>    <div>div标签1</div>    <span>span标签</span>    <span>span标签</span></body></html>

只能在同一页面内复用代码，不能在多个页面中复用 css 代码。

维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

第三种

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。

使用 html 的 <link rel=“stylesheet” type=“text/css” href=“./styles.css” /> 标签导入 css 样式文件。

css文件内容：

div{    border: 1px solid red;}span{    border: 1px solid blue}

html文件代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" type="text/css" href="cssmode.css"/></head><body>    <div>div标签1</div>    <div>div标签1</div>    <span>span标签</span>    <span>span标签</span></body></html>

CSS选择器

标签名选择器

标签名选择器的格式是：

标签名{	属性：值;}

标签名选择器，可以决定哪些标签被动的使用这个样式。

!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS 选择器</title><style type="text/css"> div{border: 1px solid yellow; color: blue;font-size: 30px;}span{border: 5px dashed blue; color: yellow;font-size: 20px;}</style></head><body>    <div>div 标签 1</div>	<div>div 标签 2</div>	<span>span 标签 1</span>	<span>span 标签 2</span></body></html>

id 选择器

id 选择器的格式是：

#id 属性值{	属性：值;}

id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

但只能用一次，class选择器可以重复用

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ID 选择器</title><style type="text/css">#id001{color: blue; font-size: 30px;border: 1px yellow solid;}#id002{color: red;font-size: 20px;border: 5px blue dotted ;}</style></head><body><div id="id002">div 标签 1</div><div id="id001">div 标签 2</div></body></html>

class选择器（类选择器）

class 类型选择器的格式是：

.class 属性值{	属性：值;}

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>class 类型选择器</title><style type="text/css">.class01{color: blue; font-size: 30px;border: 1px solid yellow;}.class02{color: grey; font-size: 26px;border: 1px solid red;}</style></head><body><!--需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。--><div class="class02">div 标签 class01</div><div class="class02">div 标签</div><span class="class02">span 标签 class01</span><span>span 标签 2</span></body></html>

组合选择器

组合选择器的格式是：

选择器 1，选择器 2，选择器 n{	属性：值;}

组合选择器可以让多个选择器共用同一个 css 样式代码。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>class 类型选择器</title><style type="text/css">.class01 , #id01{ color: blue; font-size: 20px;border: 1px yellow solid;}</style></head><body><!--需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签， 字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。--><div id="id01">div 标签 class01</div> <br /><span >span 标签</span> <br /><div>div 标签</div> <br /><div>div 标签id01</div> <br /></body><html/>

常用样式

字体颜色

颜色可以写颜色名如：black, blue, red, green 等

颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
宽度

width:19px;

宽度可以写像素值：19px；也可以写百分比值：20%；
高度

height:20px;

高度可以写像素值：19px；也可以写百分比值：20%；
背景颜色

background-color:#0F2D4C
字体样式

color：#FF0000；字体颜色红色

font-size：20px; 字体大小
红色 1 像素实线边框

border：1px solid red;
DIV 居中

margin-left: auto;

margin-right: auto;
文本居中

text-align: center;
超连接去下划线

text-decoration: none;
表格细线

table {

border: 1px solid black; /设置边框/ border-collapse: collapse; /将边框合并/

}

td,th {

border: 1px solid black; /设置边框/

}
列表去除修饰

ul {

list-style: none;

}

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>06-css 常用样式.html</title><style type="text/css">div{color: red;border: 1px yellow solid; width: 300px;height: 300px; background-color: green; font-size: 30px;margin-left: auto; margin-right: auto; text-align: center;}table{border: 1px red solid; border-collapse: collapse;}td{border: 1px red solid;}a{text-decoration: none;}ul{	list-style: none;}</style></head><body><ul><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li></ul><table><tr><td>1.1</td><td>1.2</td></tr></table><a href="//www.baidu.com">百度</a><div>我是 div 标签</div></body></html>

JavaScript

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。

JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。

JS 是弱类型，Java 是强类型。

弱类型就是类型可变。
强类型，就是定义变量的时候。类型已确定。而且不可变。

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

JavaScript和 html 代码的结合方式

第一种方式

只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        alert("hello javascript!")    </script></head><body></body></html>

第二种方式

使用 script 标签引入单独的 JavaScript 代码文件

使用引入后就不能在标签内写其他语句。

js代码：

alert("hello world!");

html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="js.js"></script></head><body></body></html>

变量

什么是变量？变量是可以存放某些值的内存的命名。

JavaScript 的变量类型：

数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function

JavaScript 里特殊的值：

undefined:未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.

null :空值

NaN :全称是：Not a Number。非数字。非数值。

JS 中的定义变量格式：

var 变量名;

var 变量名 = 值;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><title>Title</title> <script type="text/javascript">var i; // alert(i); // undefined i = 12; // typeof()是 JavaScript 语言提供的一个函数。// alert( typeof(i) ); // numberi = "abc"; // 它可以取变量的数据类型返回 // alert( typeof(i) );// String var a = 12;var b = "abc";alert( a * b ); // NaN 是非数字，非数值。</script> </head> <body></body> </html>

关系（比较）运算

等于：

等于是简单的做字面值的比较

全等于：

===

除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算

且运算： &&

或运算： ||

取反运算： !

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。

0 、null、 undefined、””(空串) 都认为是 false；

&& 且运算。

有两种情况：

第一种：当表达式全为真的时候。返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
|| 或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算和 ||或运算有短路。

短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

数组

数组定义方式

JS 中数组的定义：

var 数组名 = []; // 空数组var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。

<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><script type="text/javascript">var arr = [true,1]; // 定义一个空数组 // alert( arr.length ); // 0 arr[0] = 12; // alert( arr[0] );//12 // alert( arr.length ); // 0 // javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。 arr[2] = "abc"; alert(arr.length); //3 // alert(arr[1]);// undefined // 数组的遍历 for (var i = 0; i < arr.length; i++){	alert(arr[i]); }</script></head><body></body> </html>

函数

二种定义方式

第一种

可以使用 function 关键字来定义函数

function 函数名(形参列表){	函数体 }

在 JavaScript 语言中，如何定义带有返回值的函数？

只需要在函数体内直接使用 return 语句返回值即可！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function fun(){            alert("无参函数被调用！");        }        fun();        function fun2(a,b){            alert("有参函数fun2被调用 a="+a+",b="+b);        }        fun2(2,4);        function sum(a,b){            return a+b;        }        alert("求和函数被调用，所求结果为："+sum(1,1));    </script></head><body></body></html>

第二种

var 函数名 = function(形参列表) { 函数体 }

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        var fun = function (){            alert("无参函数！");        }        fun();        var fun1 = function (a,b){            alert("有参函数：a="+a+",b="+b);        }        fun1(20,50);        var fun2 = function (a,b){            return a+b;        }        alert(fun2(15,20));    </script></head><body></body></html>

注：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义

函数的 arguments隐形参数（只在 function 函数内）

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。隐形参数特别像 java 基础的可变长参数一样。

public void fun( Object ... args );

可变长参数其他是一个数组。那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function sum(num1,num2){            var result = 0;            for(var i = 0; i < arguments.length; i++){                if(typeof(arguments[i]) == "number")                    result += arguments[i];           }            return result;        }        alert(sum(10,20,"abc"));    </script></head><body></body></html>

JS中的自定义对象

Object 形式的自定义对象

对象的定义：

var 变量名 = new Object(); // 对象实例（空对象） 变量名.属性名 = 值; // 定义一个属性 变量名.函数名 = function(){} // 定义一个函数

对象的访问：

变量名.属性 / 函数名();

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>  <script type="text/javascript">      var oj = new Object();      oj.name = "马牛逼";      oj.age = 18;      oj.fun = function (){          alert("姓名："+this.name+" 年龄："+this.age);      }      oj.fun();  </script></head><body></body></html>

花括号形式的自定义对象

var 变量名 = {// 空对象 属性名：值, // 定义一个属性 属性名：值, // 定义一个属性 函数名：function(){} // 定义一个函数 };

对象的访问：

变量名.属性 / 函数名();

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>  <script type="text/javascript">      var oj = {          name:"马牛逼",          age:18,          fun:function (){              alert("姓名："+this.name+" 年龄："+this.age)          }      }      oj.fun();  </script></head><body></body></html>

js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：

获取标签对象
标签对象.事件名 = fucntion(){}

onload加载完成事件

静态：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function onloadfun(){            alert("静态注册函数");        }    </script></head><body onload="alert('静态注册')"></body></html>

动态：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        window.onload = function(){            alert("动态态注册函数");        }    </script></head><body></body></html>

onclick单击事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function onclickfun(){            alert("静态注册");        }        window.onload = function() {            //1.获取标签对象             /*             * document 是 JavaScript 语言提供的一个对象（文档）<br/>             * get 获取             * Element 元素（就是标签）             * By 通过。。 由。。经。。。             * Id id 属性             * getElementById 通过 id 属性获取标签对象             */            var btnObj = document.getElementById("btn02");            // 2.通过标签对象.事件名 = function(){}            btnObj.onclick = function () {                alert("动态注册的 onclick 事件");            }        }    </script></head><body><button onclick="onclickfun()">按钮1</button><button id="btn02">按钮2</button></body></html>

onblur失去焦点事件

按F12打开控制台

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        // 静态注册失去焦点事件        function onblurFun() {            // console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用            // log() 是打印的方法            console.log("静态注册失去焦点事件");        }        // 动态注册 onblur 事件        window.onload = function () {            //1 获取标签对象            var passwordObj = document.getElementById("password");            //2 通过标签对象.事件名 = function(){};            passwordObj.onblur = function () {                console.log("动态注册失去焦点事件");            }        }    </script><head/><body>    用户名：<input type="text" onblur="onblurFun()"><br/>    密&nbsp&nbsp&nbsp码：<input type="text" id="password"><br/></body></html>

onchange内容发生改变事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript">        function onchangeFun() {            alert("语言已经改变了");        }        window.onload = function () {            //1.获取标签            var sel2 = document.getElementById("select2");            //2.通过标签对象.事件名 = function(){};            sel2.onchange = function () {                alert("数字已经改变了")            }        }    </script></head><body>请选择你认为最好的语言：<select onchange="onchangeFun()">    <option>C</option>    <option>C++</option>    <option>Java</option>    <option>Python</option></select>请选择你最喜欢的数字：<select id="select2">    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option></select></body></html>

onsubmit表单提交事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function onsubmitfun(){            // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交            alert("静态注册表单提交事件->发现不合法")            return false;        }        window.onload = function () {            var formobj = document.getElementById("form2");            formobj.onsubmit = function (){                alert("动态注册表单提交事件----发现不合法");                return false;            }        }    </script></head><body>    <!--return false 可以阻止 表单提交 -->    <form action="//localhost:8080" method="get" onsubmit="return onsubmitfun()">    <input type="submit" value="静态注册提交">    </form>    <form action="//localhost:8080" method="get" id="form2" onsubmit="return onsubmitfun()">        <input type="submit" value="动态注册提交">    </form></body></html>

DOM 模型

DOM 全称是 Document Object Model 文档对象模型

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

那么它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。

Document 对象

Document 对象的理解：

第一点：Document 它管理了所有的 HTML 文档内容。

第二点：document 它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过 document 访问所有的标签对象。

那么 html 标签要对象化怎么办？

<body><div id="div01">div01</div></body>

模拟对象化，相当于：

class Dom{private String id;	// id 属性private String tagName; //表示标签名private Dom parentNode; //父亲private List<Dom> children; // 孩子结点private String innerHTML; // 起始标签和结束标签中间的内容}

Document对象中的方法介绍

document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)

通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement(tagName)

方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注：

document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询，如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

关于正则表达式，可以前往JavaScript RegExp 对象 | 菜鸟教程 (runoob.com)查看。

getElementById 方法示例代码：

校验用户名：红字弹出提示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function onclickFun(){            //1.当我们要操作一个标签的时候，一定要先获取这个标签对象。            var usernameObj = document.getElementById("username");            //获取输入框的值            var userNameText = usernameObj.value;            //2.验证字符串，符合某个规则，需要使用正则表达式技术            var patt = /^\w{5,12}$/;            /*            *test()方法用于测试某个字符串，是不是匹配我的规则，            *匹配就返回true。不匹配就返回false.            * */            var spanObj = document.getElementById("usernamespan");            // innerHTML 表示起始标签和结束标签中的内容            // innerHTML 这个属性可读，可写            if(patt.test(userNameText)){               spanObj.innerHTML = "用户名合法！";            }else{                spanObj.innerHTML = "用户名非法！";            }        }    </script></head><body>用户名：<input type="text" value="12345" id="username"><span id="usernamespan" style="color: red"></span><br/><button onclick="onclickFun()">校验</button></body></html>

校验用户名：提示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function onclickFun(){            //1.当我们要操作一个标签的时候，一定要先获取这个标签对象。            var usernameObj = document.getElementById("username");            //获取输入框的值            var userNameText = usernameObj.value;            //2.验证字符串，符合某个规则，需要使用正则表达式技术            var patt = /^\w{5,12}$/;            /*            *test()方法用于测试某个字符串，是不是匹配我的规则，            *匹配就返回true。不匹配就返回false.            * */            var spanObj = document.getElementById("usernamespan");            // innerHTML 表示起始标签和结束标签中的内容            // innerHTML 这个属性可读，可写            if(patt.test(userNameText)){               spanObj.innerHTML = "<img src=\"right.png\" height=\"14\" width=\"14\"/>";            }else{                spanObj.innerHTML = "<img src=\"wrong.png\" height=\"14\" width=\"14\"/>";            }        }    </script></head><body>用户名：<input type="text" value="12345" id="username"><span id="usernamespan" style="color: red"></span><br/><button onclick="onclickFun()">校验</button></body></html>

getElementsByName 方法示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function checkAll(){            // document.getElementsByName();是根据指定的name 属性查询返回多个标签对象集合            // 这个集合的操作跟数组 一样            // 集合中每个元素都是dom 对象            // 这个集合中的元素顺序是他们在html 页面中从上到下的顺序            var hobbies = document.getElementsByName("hobby");            // checked 表示复选框的选中状态。如果选中是true，不选中是false            // checked 这个属性可读，可写            for(var i = 0;i < hobbies.length;i++){                hobbies[i].checked = true;            }        }        function checkNone(){            var hobbies = document.getElementsByName("hobby");            for(var i = 0;i < hobbies.length;i++){                hobbies[i].checked = false;            }        }        function checkReserve(){            var hobbies = document.getElementsByName("hobby");            for(var i = 0;i < hobbies.length;i++){                if(hobbies[i].checked == false){                    hobbies[i].checked = true;                }                else{                    hobbies[i].checked = false;                }            }        }    </script></head><body>兴趣爱好：<input type="checkbox" name="hobby" value="C++">C++<input type="checkbox" name="hobby" value="Java">Java<input type="checkbox" name="hobby" value="Python">Python<input type="checkbox" name="hobby" value="C">C<br/><button onclick="checkAll()">全选</button><button onclick="checkNone()">全不选</button><button onclick="checkReserve()">反选</button></body></html>

getElementsByTagName 方法示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function checkAll(){            var inputs = document.getElementsByTagName("input");            // 是按照指定标签名来进行查询并返回集合            // 这个集合的操作跟数组 一样            // 集合中都是dom 对象            // 集合中元素顺序 是他们在html 页面中从上到下的顺序。            for(var i = 0;i < inputs.length;i++){                inputs[i].checked = true;            }        }    </script></head><body><input type="checkbox" value="C++">C++<input type="checkbox" value="Java">Java<input type="checkbox" value="Python">Python<input type="checkbox" value="C">C<br/><button onclick="checkAll()">全选</button></body></html>

CreateElement 和appendChild方法示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        window.onload = function (){            //方式1            var divObj1 = document.createElement("div");            divObj1.innerHTML = "我是马牛逼！";            document.body.appendChild(divObj1);            //方式2 说明文本也是一个结点            var divObj2 = document.createElement("div");            var text = document.createTextNode("今年18");            divObj2.appendChild(text);            document.body.appendChild(divObj2);        }    </script></head><body></body></html>

节点的常用属性和方法

节点就是标签对象

方法

通过具体的元素节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )

方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性

childNodes

属性，获取当前节点的所有子节点
firstChild

属性，获取当前节点的第一个子节点
lastChild

属性，获取当前节点的最后一个子节点
parentNode

属性，获取当前节点的父节点
nextSibling

属性，获取当前节点的下一个节点
previousSibling

属性，获取当前节点的上一个节点
className

用于获取或设置标签的 class 属性值
innerHTML

属性，表示获取/设置起始标签和结束标签中的内容
innerText

属性，表示获取/设置起始标签和结束标签中的文本

dom对象查询练习

css：

@CHARSET "UTF-8";body {	width: 800px;	margin-left: auto;	margin-right: auto;}button {	width: 300px;	margin-bottom: 10px;}#btnList {	float:left;}#total{	width: 450px;	float:left;}ul{	list-style-type: none;	margin: 0px;	padding: 0px;}.inner li{	border-style: solid;	border-width: 1px;	padding: 5px;	margin: 5px;	background-color: #99ff99;	float:left;}.inner{	width:400px;	border-style: solid;	border-width: 1px;	margin-bottom: 10px;	padding: 10px;	float: left;}

html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>dom查询</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">	window.onload = function(){		//1.查找#bj节点		document.getElementById("btn01").onclick = function () {			var bjObj = document.getElementById("bj");			alert(bjObj.innerText);		}		//2.查找所有li节点		var btn02Ele = document.getElementById("btn02");		btn02Ele.onclick = function(){			var lis = document.getElementsByTagName("li");			alert(lis.length);		};		//3.查找name=gender的所有节点		var btn03Ele = document.getElementById("btn03");		btn03Ele.onclick = function(){			var genders = document.getElementsByName("gender");			alert(genders.length)		};		//4.查找#city下所有li节点		var btn04Ele = document.getElementById("btn04");		btn04Ele.onclick = function(){			//1. 获取id 为city 的节点			//2. 通过city 节点.getElementsByTagName 按标签名查子节点			var lis = document.getElementById("city").getElementsByTagName("li");			alert(lis.length);		};		//5.返回#city的所有子节点		var btn05Ele = document.getElementById("btn05");		btn05Ele.onclick = function(){			//1. 获取id 为city 的节点			//2. 通过city 获取所有子节点			alert(document.getElementById("city").childNodes.length);		};		//6.返回#phone的第一个子节点		var btn06Ele = document.getElementById("btn06");		btn06Ele.onclick = function(){			alert(document.getElementById("phone").firstChild.innerText);		};		//7.返回#bj的父节点		var btn07Ele = document.getElementById("btn07");		btn07Ele.onclick = function(){			//1. 查询id 为bj 的节点			var bjObj = document.getElementById("bj");			//2. bj 节点获取父节点			alert(bjObj.parentNode.innerHTML);		};		//8.返回#android的前一个兄弟节点		var btn08Ele = document.getElementById("btn08");		btn08Ele.onclick = function(){			alert(document.getElementById("android").previousSibling.innerHTML);		};		//9.读取#username的value属性值		var btn09Ele = document.getElementById("btn09");		btn09Ele.onclick = function(){			alert(document.getElementById("username").value);		};		//10.设置#username的value属性值		var btn10Ele = document.getElementById("btn10");		btn10Ele.onclick = function(){			document.getElementById("username").value = "我是马牛逼";		};		//11.返回#bj的文本值		var btn11Ele = document.getElementById("btn11");		btn11Ele.onclick = function(){			alert(document.getElementById("bj").innerHTML);		};	};</script></head><body><div id="total">	<div class="inner">		<p>			你喜欢哪个城市?		</p>		<ul id="city">			<li id="bj">北京</li>			<li>上海</li>			<li>东京</li>			<li>首尔</li>		</ul>		<br>		<br>		<p>			你喜欢哪款单机游戏?		</p>		<ul id="game">			<li id="rl">红警</li>			<li>实况</li>			<li>极品飞车</li>			<li>魔兽</li>		</ul>		<br />		<br />		<p>			你手机的操作系统是?		</p>		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>	</div>	<div class="inner">		gender:		<input type="radio" name="gender" value="male"/>		Male		<input type="radio" name="gender" value="female"/>		Female		<br>		<br>		name:		<input type="text" name="name" id="username" value="abcde"/>	</div></div><div id="btnList">	<div><button id="btn01">查找#bj节点</button></div>	<div><button id="btn02">查找所有li节点</button></div>	<div><button id="btn03">查找name=gender的所有节点</button></div>	<div><button id="btn04">查找#city下所有li节点</button></div>	<div><button id="btn05">返回#city的所有子节点</button></div>	<div><button id="btn06">返回#phone的第一个子节点</button></div>	<div><button id="btn07">返回#bj的父节点</button></div>	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>	<div><button id="btn09">返回#username的value属性值</button></div>	<div><button id="btn10">设置#username的value属性值</button></div>	<div><button id="btn11">返回#bj的文本值</button></div></div></body></html>

jQuery

什么是 jQuery ?

jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。

jQuery 核心思想

它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

jQuery 流行程度

jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

jQuery 好处

jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、

制作动画效果、事件处理、使用 Ajax 以及其他功能

使用 jQuery 给一个按钮绑定单击事件?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">	//使用$()代替window.onload	$(function(){		//使用选择器获取按钮对象，随后绑定单击响应函数		$("#btnId").click(function(){			//弹出Hello			alert('Hello');		});	});</script></head><body>	<button id="btnId">SayHello</button></body></html>

1.使用 jQuery 一定要引入 jQuery 库吗？

答案：是，必须

2.jQuery 中的$到底是什么？

答案：它是一个函数

3.怎么为按钮添加点击响应函数的？

答案：

1.使用 jQuery 查询到标签对象

2.使用标签对象.click( function(){} );

jQuery 核心函数

在DOM加载完成时运行的代码，可以这样写：

$(document).ready(function(){  // 在这里写你的代码...});

使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

$(function($) {  // 你可以在这里继续使用$作为别名...});

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数

1.传入参数为 [ 函数 ] 时：

表示页面加载完成之后。相当于 window.onload = function(){}

2.传入参数为 [ HTML 字符串 ] 时：

会对我们创建这个 html 标签对象

3.传入参数为 [ 选择器字符串 ] 时：

$(“#id 属性值”);

id 选择器，根据 id 查询标签对象

$(“标签名”);

标签名选择器，根据指定的标签名查询标签对象

$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

4.传入参数为 [ DOM 对象 ] 时：

会把这个 dom 对象转换为 jQuery 对象

jQuery 对象和 dom对象区分

Dom对象

通过 getElementById()查询出来的标签对象是 Dom 对象
通过 getElementsByName()查询出来的标签对象是 Dom 对象
通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
通过 createElement() 方法创建的对象，是 Dom 对象
DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]

jQuery 对象

通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
jQuery 对象 Alert 出来的效果是：[object Object]

jQuery对象的本质

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

jQuery对象和Dom对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法

DOM 对象也不能使用 jQuery 对象的属性和方法

Dom对象和 jQuery对象互转

dom对象转化为jQuery对象

1.先有 DOM 对象

2.$( DOM 对象 ) 就可以转换成为 jQuery 对象

jQuery对象转为dom对象

1.先有 jQuery 对象

2.jQuery 对象[下标]取出相应的 DOM 对象

jQuery选择器

基本选择器

#ID 选择器：根据 id 查找标签对象
.class 选择器：根据 class 查找标签对象
element 选择器：根据标签名查找标签对象
*选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回
p.myClass 表示标签名必须是 p 标签，而且 class 类型还要是 myClass，若标签名为空，表示只指定myClass标签名

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<style type="text/css">			div, span, p {			    width: 140px;			    height: 140px;			    margin: 5px;			    background: #aaa;			    border: #000 1px solid;			    float: left;			    font-size: 17px;			    font-family: Verdana;			}						div.mini {			    width: 55px;			    height: 55px;			    background-color: #aaa;			    font-size: 12px;			}						div.hide {			    display: none;			}		</style>		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>		<script type="text/javascript">							$(function (){					//1.选择 id 为 one 的元素 "background-color","#bbffaa"					$("#btn1").click(function (){						$("#one").css("background-color","#bbffaa");					});					//2.选择 class 为 mini 的所有元素					$("#btn2").click(function (){						$(".mini").css("background-color","#bbffaa");					});					//3.选择 元素名是 div 的所有元素					$("#btn3").click(function (){						$("div").css("background-color","#bbffaa");					});					//4.选择所有的元素					$("#btn4").click(function (){						$("*").css("background-color","#bbffaa");					})					//5.选择所有的 span 元素和id为two的元素					$("#btn5").click(function (){						$("span,#two").css("background-color","#bbffaa");					});				});								</script>	</head>	<body><!-- 	<div>		<h1>基本选择器</h1>	</div>	 -->			<input type="button" value="选择 id 为 one 的元素" id="btn1" />		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />		<input type="button" value="选择 所有的元素" id="btn4" />		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />				<br>		<div class="one" id="one">			id 为 one,class 为 one 的div			<div class="mini">class为mini</div>		</div>		<div class="one" id="two" title="test">			id为two,class为one,title为test的div			<div class="mini" title="other">class为mini,title为other</div>			<div class="mini" title="test">class为mini,title为test</div>		</div>		<div class="one">			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini"></div>		</div>		<div class="one">			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini" title="tesst">class为mini,title为tesst</div>		</div>		<div style="display:none;" class="none">style的display为"none"的div</div>		<div class="hide">class为"hide"的div</div>		<div>			包含input的type为"hidden"的div<input type="hidden" size="8">		</div>		<span class="one" id="span">^^span元素^^</span>	</body></html>

层级选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<style type="text/css">			div, span, p {			    width: 140px;			    height: 140px;			    margin: 5px;			    background: #aaa;			    border: #000 1px solid;			    float: left;			    font-size: 17px;			    font-family: Verdana;			}						div.mini {			    width: 55px;			    height: 55px;			    background-color: #aaa;			    font-size: 12px;			}						div.hide {			    display: none;			}					</style>		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>		<script type="text/javascript">			$(document).ready(function(){				//1.选择 body 内的所有 div 元素 				$("#btn1").click(function(){					$("body div").css("background", "#bbffaa");				});				//2.在 body 内, 选择div子元素  				$("#btn2").click(function(){					$("body > div").css("background", "#bbffaa");				});				//3.选择 id 为 one 的下一个 div 元素 				$("#btn3").click(function(){					$("#one+div").css("background", "#bbffaa");				});				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素				$("#btn4").click(function(){					$("#two~div").css("background", "#bbffaa");				});			});		</script>	</head>	<body>		<!-- 	<div>		<h1>层级选择器:根据元素的层级关系选择元素</h1>		ancestor descendant  ：		parent > child 		   ：		prev + next 		   ：		prev ~ siblings 	   ：	</div>	 -->		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />		<br><br>		<div class="one" id="one">			id 为 one,class 为 one 的div			<div class="mini">class为mini</div>		</div>		<div class="one" id="two" title="test">			id为two,class为one,title为test的div			<div class="mini" title="other">class为mini,title为other</div>			<div class="mini" title="test">class为mini,title为test</div>		</div>		<div class="one">			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini"></div>		</div>		<div class="one">			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini" title="tesst">class为mini,title为tesst</div>		</div>		<div style="display:none;" class="none">style的display为"none"的div</div>		<div class="hide">class为"hide"的div</div>		<div>			包含input的type为"hidden"的div<input type="hidden" size="8">		</div>		<span id="span">^^span元素^^</span>	</body></html>

过滤选择器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

内容过滤器

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<style type="text/css">			div, span, p {			    width: 140px;			    height: 140px;			    margin: 5px;			    background: #aaa;			    border: #000 1px solid;			    float: left;			    font-size: 17px;			    font-family: Verdana;			}						div.mini {			    width: 55px;			    height: 55px;			    background-color: #aaa;			    font-size: 12px;			}						div.hide {			    display: none;			}					</style>		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>		<script type="text/javascript">			$(document).ready(function(){				function anmateIt(){					$("#mover").slideToggle("slow", anmateIt);				}					anmateIt();							});						/** 			:contains(text)   			:empty 			  			:has(selector) 				:parent 						*/			$(document).ready(function(){				//1.选择 含有文本 'di' 的 div 元素				$("#btn1").click(function(){					$("div:contains(di)").css("background", "#bbffaa");				});				//2.选择不包含子元素(或者文本元素) 的 div 空元素				$("#btn2").click(function(){					$("div:empty").css("background", "#bbffaa");				});				//3.选择含有 class 为 mini 元素的 div 元素				$("#btn3").click(function(){					$("div:has(.mini)").css("background", "#bbffaa");				});				//4.选择含有子元素(或者文本元素)的div元素				$("#btn4").click(function(){					$("div:parent").css("background", "#bbffaa");				});			});		</script>	</head>	<body>				<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />		<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />		<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />		<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />				<br><br>		<div class="one" id="one">			id 为 one,class 为 one 的div			<div class="mini">class为mini</div>		</div>		<div class="one" id="two" title="test">			id为two,class为one,title为test的div			<div class="mini" title="other">class为mini,title为other</div>			<div class="mini" title="test">class为mini,title为test</div>		</div>		<div class="one">			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini"></div>		</div>		<div class="one">			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini">class为mini</div>			<div class="mini" title="tesst">class为mini,title为tesst</div>		</div>		<div style="display:none;" class="none">style的display为"none"的div</div>		<div class="hide">class为"hide"的div</div>		<div>			包含input的type为"hidden"的div<input type="hidden" size="8">		</div>		<div id="mover">正在执行动画的div元素.</div>	</body></html>

属性过滤器

[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1] [attrSel2] [attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div,span,p {	width: 140px;	height: 140px;	margin: 5px;	background: #aaa;	border: #000 1px solid;	float: left;	font-size: 17px;	font-family: Verdana;}div.mini {	width: 55px;	height: 55px;	background-color: #aaa;	font-size: 12px;}div.hide {	display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">	/**[attribute] 			[attribute=value] 		[attribute!=value] 		 [attribute^=value] 		[attribute$=value] 		[attribute*=value] 		[attrSel1][attrSel2][attrSelN]  			*/	$(function() {		//1.选取含有 属性title 的div元素		$("#btn1").click(function() {			$("div[title]").css("background", "#bbffaa");		});		//2.选取 属性title值等于'test'的div元素		$("#btn2").click(function() {			$("div[title='test']").css("background", "#bbffaa");		});		//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)		$("#btn3").click(function() {			$("div[title!='test']").css("background", "#bbffaa");		});		//4.选取 属性title值 以'te'开始 的div元素		$("#btn4").click(function() {			$("div[title^='te']").css("background", "#bbffaa");		});		//5.选取 属性title值 以'est'结束 的div元素		$("#btn5").click(function() {			$("div[title$='est']").css("background", "#bbffaa");		});		//6.选取 属性title值 含有'es'的div元素		$("#btn6").click(function() {			$("div[title*='es']").css("background", "#bbffaa");		});				//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素		$("#btn7").click(function() {			$("div[id][title*='es']").css("background", "#bbffaa");		});		//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素		$("#btn8").click(function() {			$("div[title][title!='test']").css("background", "#bbffaa");		});	});</script></head><body>	<input type="button" value="选取含有 属性title 的div元素." id="btn1" />	<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />	<input type="button"		value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />	<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />	<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />	<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />	<input type="button"		value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."		id="btn7" />	<input type="button"		value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />	<br>	<br>	<div class="one" id="one">		id 为 one,class 为 one 的div		<div class="mini">class为mini</div>	</div>	<div class="one" id="two" title="test">		id为two,class为one,title为test的div		<div class="mini" title="other">class为mini,title为other</div>		<div class="mini" title="test">class为mini,title为test</div>	</div>	<div class="one">		<div class="mini">class为mini</div>		<div class="mini">class为mini</div>		<div class="mini">class为mini</div>		<div class="mini"></div>	</div>	<div class="one">		<div class="mini">class为mini</div>		<div class="mini">class为mini</div>		<div class="mini">class为mini</div>		<div class="mini" title="tesst">class为mini,title为tesst</div>	</div>	<div style="display: none;" class="none">style的display为"none"的div</div>	<div class="hide">class为"hide"的div</div>	<div>		包含input的type为"hidden"的div<input type="hidden" value="123456789"			size="8">	</div>	<div id="mover">正在执行动画的div元素.</div></body></html>

表单过滤器

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden

表单对象属性过滤器

:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
:selected 匹配所有选中的 option

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>   <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>Untitled Document</title>      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>      <script type="text/javascript">         $(function(){                              /**      :input              :text           :password        :radio              :checkbox        :submit          :image              :reset              :button          :file           :hidden                表单对象的属性      :enabled            :disabled           :checked            :selected           */                                          //1.对表单内 可用input 赋值操作            $("#btn1").click(function(){               $(":text:enabled").val("New Value");            });            //2.对表单内 不可用input 赋值操作            $("#btn2").click(function(){               $(":text:disabled").val("New Value Too");            });            //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数            $("#btn3").click(function(){               alert($(":checkbox:checked").size())            });            //4.获取多选框，每个选中的value值            $("#btn4").click(function(){               var str = "";               var eles = $(":checkbox:checked");               console.log(eles);               // eles.each(function (){               //     alert(this.value)               // });               for(var i=0;i<eles.size();i++){                  str += "【"+$(eles[i]).val()+"】";               }               alert(str)            });            //5.获取下拉框选中的内容              $("#btn5").click(function(){               var str = "";               //注意这个选择器的特殊，因为select里面的option是真正的被选择项，               //所以 :selected 选择器和 select[name='test']选择器的关系是子父关系               //必须按照基本选择器选择后代的方法选               var els = $("select option:selected");               console.log(els);               for(var i=0;i<els.size();i++){                  str += "【"+$(els[i]).val()+"】";               }               alert(str)            });         })       </script>   </head>   <body>      <h3>表单对象属性过滤选择器</h3>       <button id="btn1">对表单内 可用input 赋值操作.</button>       <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />       <button id="btn3">获取多选框选中的个数.</button>       <button id="btn4">获取多选框选中的内容.</button><br /><br />         <button id="btn5">获取下拉框选中的内容.</button><br /><br />             <form id="form1" action="#">                  可用元素: <input name="add" value="可用文本框1"/><br>         不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>         可用元素: <input name="che" value="可用文本框2"/><br>         不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>         <br>                  多选框: <br>         <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1         <input type="checkbox" name="newsletter" value="test2" />test2         <input type="checkbox" name="newsletter" value="test3" />test3         <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4         <input type="checkbox" name="newsletter" value="test5" />test5                  <br><br>         下拉列表1: <br>         <select name="test" multiple="multiple" style="height: 100px" id="sele1">            <option>浙江</option>            <option selected="selected">辽宁</option>            <option>北京</option>            <option selected="selected">天津</option>            <option>广州</option>            <option>湖北</option>         </select>                  <br><br>         下拉列表2: <br>         <select name="test2">            <option>浙江</option>            <option>辽宁</option>            <option selected="selected">北京</option>            <option>天津</option>            <option>广州</option>            <option>湖北</option>         </select>      </form>          </body></html>

jQuery元素筛选

eq() 获取给定索引的元素,功能跟:eq()一样
first() 获取第一个元素,功能跟:first一样
last() 获取最后一个元素,功能跟:last一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp) 返回包含有匹配选择器的元素的元素,功能跟 :has 一样
not(exp) 删除匹配选择器的元素,功能跟 :not 一样
children(exp) 返回匹配给定选择器的子元素,功能跟 parent>child 一样
find(exp) 返回匹配给定选择器的后代元素,功能跟 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素功能跟 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素功能跟 prev ~ siblings 功能一样
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素 prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>   <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>DOM查询</title>      <style type="text/css">         div, span, p {             width: 140px;             height: 140px;             margin: 5px;             background: #aaa;             border: #000 1px solid;             float: left;             font-size: 17px;             font-family: Verdana;         }                  div.mini {             width: 55px;             height: 55px;             background-color: #aaa;             font-size: 12px;         }                  div.hide {             display: none;         }              </style>      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>      <script type="text/javascript">         $(document).ready(function(){            function anmateIt(){               $("#mover").slideToggle("slow", anmateIt);            }            anmateIt();               /**                  过滤   eq(index|-index)            first()                   last()                       hasClass(class)             filter(expr|obj|ele|fn)       is(expr|obj|ele|fn)1.6*       has(expr|ele)              not(expr|ele|fn)            slice(start,[end])                 查找   children([expr])            closest(expr,[con]|obj|ele)1.6*      find(expr|obj|ele)                 next([expr])                  nextall([expr])                nextUntil([exp|ele][,fil])1.6*        parent([expr])                    parents([expr])                parentsUntil([exp|ele][,fil])1.6*     prev([expr])                  prevall([expr])                prevUntil([exp|ele][,fil])1.6*        siblings([expr])                  串联   add(expr|ele|html|obj[,con])                              */                        //(1)eq()  选择索引值为等于 3 的 div 元素            $("#btn1").click(function(){               $("div").eq(3).css("background-color","#bfa");            });            //(2)first()选择第一个 div 元素             $("#btn2").click(function(){                //first()   选取第一个元素               $("div").first().css("background-color","#bfa");            });            //(3)last()选择最后一个 div 元素            $("#btn3").click(function(){               //last()  选取最后一个元素               $("div").last().css("background-color","#bfa");            });            //(4)filter()在div中选择索引为偶数的            $("#btn4").click(function(){               //filter()  过滤   传入的是选择器字符串               $("div").filter(":even").css("background-color","#bfa");            });             //(5)is()判断#one是否为:empty或:parent            //is用来检测jq对象是否符合指定的选择器            $("#btn5").click(function(){               alert($("#one").is(":empty"));            });                        //(6)has()选择div中包含.mini的            $("#btn6").click(function(){               //has(selector)  选择器字符串    是否包含selector               $("div").has(".mini").css("background-color","#bfa");            });            //(7)not()选择div中class不为one的            $("#btn7").click(function(){               //not(selector)  选择不是selector的元素               $("div").not(".class").css("background-color","#bfa");            });            //(8)children()在body中选择所有class为one的div子元素            $("#btn8").click(function(){               //children()  选出所有的子元素               $("body").children(".one").css("background-color","#bfa");            });                                    //(9)find()在body中选择所有class为mini的div元素            $("#btn9").click(function(){               //find()  选出所有的后代元素               $("body").find("div.mini").css("background-color","#bfa");            });            //(10)next() #one的下一个div            $("#btn10").click(function(){               //next()  选择下一个兄弟元素               $("#one").next("div").css("background-color","#bfa");            });            //(11)nextAll() #one后面所有的span元素            $("#btn11").click(function(){               //nextAll()   选出后面所有的元素               $("#one").nextAll("span").css("background-color","#bfa");            });            //(12)nextUntil() #one和span之间的元素            $("#btn12").click(function(){               //               $("#one").nextUntil("span").css("background-color","#bfa")            });            //(13)parent() .mini的父元素            $("#btn13").click(function(){               $(".mini").parent().css("background-color","#bfa");            });            //(14)prev() #two的上一个div            $("#btn14").click(function(){               //prev()                 $("#two").prev("div").css("background-color","#bfa")            });            //(15)prevAll() span前面所有的div            $("#btn15").click(function(){               //prevAll()   选出前面所有的元素               $("span").prevAll("div").css("background-color","#bfa")            });            //(16)prevUntil() span向前直到#one的元素            $("#btn16").click(function(){               //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止               $("span").prevUntil("#one").css("background-color","#bfa")            });            //(17)siblings() #two的所有兄弟元素            $("#btn17").click(function(){               //siblings()    找到所有的兄弟元素，包括前面的和后面的               $("#two").siblings().css("background-color","#bfa")            });                                    //(18)add()选择所有的 span 元素和id为two的元素            $("#btn18").click(function(){                  //   $("span,#two,.mini,#one")               $("span").add("#two").css("background-color","#bfa");            });                     });                        </script>   </head>   <body>          <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />      <input type="button" value="first()选择第一个 div 元素" id="btn2" />      <input type="button" value="last()选择最后一个 div 元素" id="btn3" />      <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />      <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />      <input type="button" value="has()选择div中包含.mini的" id="btn6" />      <input type="button" value="not()选择div中class不为one的" id="btn7" />      <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />      <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />      <input type="button" value="next()#one的下一个div" id="btn10" />      <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />      <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />      <input type="button" value="parent().mini的父元素" id="btn13" />      <input type="button" value="prev()#two的上一个div" id="btn14" />      <input type="button" value="prevAll()span前面所有的div" id="btn15" />      <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />      <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />      <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />            <h3>基本选择器.</h3>      <br /><br />      文本框<input type="text" name="account" disabled="disabled" />      <br><br>      <div class="one" id="one">         id 为 one,class 为 one 的div         <div class="mini">class为mini</div>      </div>      <div class="one" id="two" title="test">         id为two,class为one,title为test的div         <div class="mini" title="other"><b>class为mini,title为other</b></div>         <div class="mini" title="test">class为mini,title为test</div>      </div>            <div class="one">         <div class="mini">class为mini</div>         <div class="mini">class为mini</div>         <div class="mini">class为mini</div>         <div class="mini"></div>      </div>      <div class="one">         <div class="mini">class为mini</div>         <div class="mini">class为mini</div>         <div class="mini">class为mini</div>         <div class="mini" title="tesst">class为mini,title为tesst</div>      </div>      <div style="display:none;" class="none">style的display为"none"的div</div>      <div class="hide">class为"hide"的div</div>      <span id="span1">^^span元素 111^^</span>      <div>         包含input的type为"hidden"的div<input type="hidden" size="8">      </div>      <span id="span2">^^span元素 222^^</span>      <div id="mover">正在执行动画的div元素.</div>   </body></html>

jQuery 的属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样

val 方法同时设置多个表单项的选中状态：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>    <script type="text/javascript">        $(function () {            /*            // 批量操作单选            $(":radio").val(["radio2"]);            // 批量操作筛选框的选中状态            $(":checkbox").val(["checkbox3","checkbox2"]);            // 批量操作多选的下拉框选中状态            $("#multiple").val(["mul2","mul3","mul4"]);            // 操作单选的下拉框选中状态            $("#single").val(["sin2"]);            */            //  混合选择            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]            );        });    </script></head><body>单选：<input name="radio" type="radio" value="radio1" />radio1<input name="radio" type="radio" value="radio2" />radio2<br/>多选：<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3<br/>下拉多选 ：<select id="multiple" multiple="multiple" size="4">    <option value="mul1">mul1</option>    <option value="mul2">mul2</option>    <option value="mul3">mul3</option>    <option value="mul4">mul4</option></select><br/>下拉单选 ：<select id="single">    <option value="sin1">sin1</option>    <option value="sin2">sin2</option>    <option value="sin3">sin3</option></select></body></html>

attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等

attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>  <script type="text/javascript">    $(function (){      alert($(":checkbox:first").attr("name"));      $(":checkbox:first").attr("name","abc")    });  </script>//prop同理

选中练习

全选、全不选、反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">		$(function(){		//全选		$("#checkedAllBtn").click(function (){			$(":checkbox").prop("checked",true);		})		//全不选		$("#checkedNoBtn").click(function (){			$(":checkbox").prop("checked",false);		})		//反选		$("#checkedRevBtn").click(function (){			$(":checkbox[name='items']").each(function (){				this.checked = !this.checked;			})			//检查是否满选			//总的个数			var allCount = $(":checkbox[name='items']").length;			//选中的个数			var checkedCount = $(":checkbox[name='items']:checked").length;			$("#checkedAllBox").prop("checked",allCount==checkedCount);		})		//提交		$("#sendBtn").click(function (){			$(":checkbox[name='items']:checked").each(function (){				alert(this.value);			});		})		//全选/全不选框		$("#checkedAllBox").click(function (){			//在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象			$(":checkbox[name='items']").prop("checked",this.checked);		})		//给全部球类绑上单击事件		$(":checkbox[name='items']").click(function (){			//检查是否满选			//总的个数			var allCount = $(":checkbox[name='items']").length;			//选中的个数			var checkedCount = $(":checkbox[name='items']:checked").length;			$("#checkedAllBox").prop("checked",allCount==checkedCount);		})	});	</script></head><body>	<form method="post" action="">			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 				<br />		<input type="checkbox" name="items" value="足球" />足球		<input type="checkbox" name="items" value="篮球" />篮球		<input type="checkbox" name="items" value="羽毛球" />羽毛球		<input type="checkbox" name="items" value="乒乓球" />乒乓球		<br />		<input type="button" id="checkedAllBtn" value="全　选" />		<input type="button" id="checkedNoBtn" value="全不选" />		<input type="button" id="checkedRevBtn" value="反　选" />		<input type="button" id="sendBtn" value="提　交" />	</form></body></html>

DOM的增删改

内部插入


appendTo()	a.appendTo(b)	把 a 插入到 b 子元素末尾，成为最后一个子元素
prependTo()	a.prependTo(b)	把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入


insertAfter()	a.insertAfter(b)	得到 ba
insertBefore()	a.insertBefore(b)	得到 ab

替换


replaceWith()	a.replaceWith(b)	用 b 替换掉 a
replaceAll()	a.replaceAll(b)	用 a 替换掉所有 b

删除


remove()	a.remove();	删除 a 标签
empty()	a.empty();	清空 a 标签里的内容

移动练习

从左到右、从右到左

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>	<style type="text/css">		select {			width: 100px;			height: 140px;		}				div {			width: 130px;			float: left;			text-align: center;		}	</style>	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>	<script type="text/javascript">		$(function (){			//选中的添加到右边			$("button:eq(0)").click(function (){				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));			})			//全部添加到右边			$("button:eq(1)").click(function (){				$("select:eq(0) option").appendTo($("select:eq(1)"));			})			//选中的添加到右边			$("button:eq(2)").click(function (){				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));			})			//全部添加到左边			$("button:eq(3)").click(function (){				$("select:eq(1) option").appendTo($("select:eq(0)"));			})		})		</script></head><body>	<div id="left">		<select multiple="multiple" name="sel01">			<option value="opt01">选项1</option>			<option value="opt02">选项2</option>			<option value="opt03">选项3</option>			<option value="opt04">选项4</option>			<option value="opt05">选项5</option>			<option value="opt06">选项6</option>			<option value="opt07">选项7</option>			<option value="opt08">选项8</option>		</select>				<button>选中添加到右边</button>		<button>全部添加到右边</button>	</div>	<div id="rigth">		<select multiple="multiple" name="sel02">		</select>		<button>选中删除到左边</button>		<button>全部删除到左边</button>	</div></body></html>

动态添加和删除行记录练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="styleB/css.css" /><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">	$(function () {		var deleteFun = function () {			//confirm是JavaScript语言提供的一个确认提示函数，你传什么就提示什么			var obj = $(this).parent().parent();			var name = obj.find("td:first").text();			//当用户点击确定返回true，否则返回false			if (confirm("你确定要删除" + name + "吗？")) {				//function函数中this对象是当前响应事件的dom对象				obj.remove();			}			//return false 可以阻止元素的默认行为			return false;		}		//添加		$("#addEmpButton").click(function () {			var name = $("#empName").val();			var email = $("#email").val();			var salary = $("#salary").val();			var obj = $("<tr>" +					"<td>" + name + "</td>" +					"<td>" + email + "</td>" +					"<td>" + salary + "</td>" +					"<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +					"</tr>");			obj.appendTo($("#employeeTable"));			obj.find("a").click(deleteFun);		})		//删除		$("a").click(deleteFun);	})</script></head><body>	<table id="employeeTable">		<tr>			<th>Name</th>			<th>Email</th>			<th>Salary</th>			<th>&nbsp;</th>		</tr>		<tr>			<td>Tom</td>			<td>tom@tom.com</td>			<td>5000</td>			<td><a href="deleteEmp?id=001">Delete</a></td>		</tr>		<tr>			<td>Jerry</td>			<td>jerry@sohu.com</td>			<td>8000</td>			<td><a href="deleteEmp?id=002">Delete</a></td>		</tr>		<tr>			<td>Bob</td>			<td>bob@tom.com</td>			<td>10000</td>			<td><a href="deleteEmp?id=003">Delete</a></td>		</tr>	</table>	<div id="formDiv">			<h4>添加新员工</h4>		<table>			<tr>				<td class="word">name: </td>				<td class="inp">					<input type="text" name="empName" id="empName" />				</td>			</tr>			<tr>				<td class="word">email: </td>				<td class="inp">					<input type="text" name="email" id="email" />				</td>			</tr>			<tr>				<td class="word">salary: </td>				<td class="inp">					<input type="text" name="salary" id="salary" />				</td>			</tr>			<tr>				<td colspan="2" align="center">					<button id="addEmpButton" value="abc">						Submit					</button>				</td>			</tr>		</table>	</div></body></html>

CSS样式操作

addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式。
offset() 获取和设置元素的坐标。

<script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">		$(function(){		/*CSScss(name|pro|[,val|fn])       读写匹配元素的样式属性。 								a.css('color')取出a元素的color								a.css('color',"red")设置a元素的color为redCSS 类addClass(class|fn) 			为元素添加一个class值;<div class="mini big">removeClass([class|fn]) 	删除元素的class值；传递一个具体的class值，就会删除具体的某个class							a.removeClass()：移除所有的class值**/				var $divEle = $('div:first');				$('#btn01').click(function(){			//addClass() - 向被选元素添加一个或多个类			$divEle.addClass("redDiv blackDiv");		});				$('#btn02').click(function(){			//removeClass() - 从被选元素删除一个或多个类 			$divEle.removeClass()		});				$('#btn03').click(function(){			//toggleClass() - 对被选元素进行添加/删除类的切换操作 			//切换就是如果具有该类那么删除，如果没有那么添加上			$divEle.toggleClass("redDiv");		});				$('#btn04').click(function(){			//offset() - 返回第一个匹配元素相对于文档的位置。			var os = $divEle.offset();			//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距			alert("顶边距："+os.top+" 左边距："+os.left);						//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left			//offset({ top: 10, left: 30 });			 $divEle.offset({				 top:50,				 left:60			 }); 		});			})</script>

jQuery 动画

基本动画

show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。

以上动画方法都可以添加参数。

1.第一个参数是动画执行的时长，以毫秒为单位

2.第二个参数是动画的回调函数 (动画完成后自动调用的函数)

淡入淡出动画

fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出切换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Untitled Document</title>		<link href="css/style.css" type="text/css" rel="stylesheet" />		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>	<script type="text/javascript">	/* 			基本		show([speed,[easing],[fn]]) 		hide([speed,[easing],[fn]]) 		toggle([speed],[easing],[fn]) 		滑动		slideDown([spe],[eas],[fn]) 		slideUp([speed,[easing],[fn]]) 		slideToggle([speed],[easing],[fn]) 		淡入淡出		fadeIn([speed],[eas],[fn]) 		fadeOut([speed],[eas],[fn]) 		fadeTo([[spe],opa,[eas],[fn]]) 		fadeToggle([speed,[eas],[fn]])		*/		$(function(){			//显示   show()			$("#btn1").click(function(){				$("#div1").show(1000);			});					//隐藏  hide()			$("#btn2").click(function(){				$("#div1").hide(1000);			});				//切换   toggle()			$("#btn3").click(function(){				$("#div1").toggle(1000);			});										//淡入   fadeIn()			$("#btn4").click(function(){				$("#div1").fadeIn(500);			});				//淡出  fadeOut()			$("#btn5").click(function(){				$("#div1").fadeOut(500);			});							//淡化到  fadeTo()			$("#btn6").click(function(){				$("#div1").fadeTo("slow",Math.random());			});				//淡化切换  fadeToggle()			$("#btn7").click(function(){				$("#div1").fadeToggle("slow","linear");			});			})</script>		</head>	<body>		<table style="float: left;">			<tr>				<td><button id="btn1">显示show()</button></td>			</tr>			<tr>				<td><button id="btn2">隐藏hide()</button></td>			</tr>			<tr>				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>			</tr>			<tr>				<td><button id="btn4">淡入fadeIn()</button></td>			</tr>			<tr>				<td><button id="btn5">淡出fadeOut()</button></td>			</tr>			<tr>				<td><button id="btn6">淡化到fadeTo()</button></td>			</tr>			<tr>				<td><button id="btn7">淡化切换fadeToggle()</button></td>			</tr>		</table>				<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">			jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果		</div>	</body></html>

品牌展示练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>品牌展示练习</title><style type="text/css">* {	margin: 0;	padding: 0;}body {	font-size: 12px;	text-align: center;}a {	color: #04D;	text-decoration: none;}a:hover {	color: #F50;	text-decoration: underline;}.SubCategoryBox {	width: 600px;	margin: 0 auto;	text-align: center;	margin-top: 40px;}.SubCategoryBox ul {	list-style: none;}.SubCategoryBox ul li {	display: block;	float: left;	width: 200px;	line-height: 20px;}.showmore , .showless{	clear: both;	text-align: center;	padding-top: 10px;}.showmore a , .showless a{	display: block;	width: 120px;	margin: 0 auto;	line-height: 24px;	border: 1px solid #AAA;}.showmore a span {	padding-left: 15px;	background: url(img/down.gif) no-repeat 0 0;}.showless a span {	padding-left: 15px;	background: url(img/up.gif) no-repeat 0 0;}.promoted a {	color: #F50;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">	$(function() {		//基本初始状态		$("li:gt(5):not(:last)").hide();		//		$("div div a").click(function (){			//让其消失或出现			$("li:gt(5):not(:last)").toggle();			//判断品牌当前是否可见			if($("li:gt(5):not(:last)").is(":hidden")){				//更改图片				$("div div").removeClass();				$("div div").addClass("showmore");				//更改文字				$("div div a span").text("显示全部品牌");				//删除高亮				$("li:contains('爱国者')").removeClass();				$("li:contains('佳能')").removeClass();			}else{				//更改图片				$("div div").removeClass();				$("div div").addClass("showless");				//更改文字				$("div div a span").text("显示精简品牌");				//添加高亮				$("li:contains('爱国者')").addClass("promoted");				$("li:contains('佳能')").addClass("promoted");			}			//避免跳转			return false;		})	});</script></head><body>	<div class="SubCategoryBox">		<ul>			<li><a href="#">佳能</a><i>(30440) </i></li>			<li><a href="#">索尼</a><i>(27220) </i></li>			<li><a href="#">三星</a><i>(20808) </i></li>			<li><a href="#">尼康</a><i>(17821) </i></li>			<li><a href="#">松下</a><i>(12289) </i></li>			<li><a href="#">卡西欧</a><i>(8242) </i></li>			<li><a href="#">富士</a><i>(14894) </i></li>			<li><a href="#">柯达</a><i>(9520) </i></li>			<li><a href="#">宾得</a><i>(2195) </i></li>			<li><a href="#">理光</a><i>(4114) </i></li>			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>			<li><a href="#">明基</a><i>(1466) </i></li>			<li><a href="#">爱国者</a><i>(3091) </i></li>			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>		</ul>		<div class="showmore">			<a href="more.html"><span>显示全部品牌</span></a>		</div>	</div></body></html>

jQuery事件操作

$(function(){});和window.onload=function(){}的区别？

他们分别是在什么时候触发？

jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
原生js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序？

jQuery 页面加载完成之后先执行
原生 js 的页面加载完成之后

他们执行的次数？

原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

jQuery 中其他的事件处理方法

click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
unbind() 跟 bind 方法相反的操作，解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

javaScript 事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。

我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

如何获取呢 javascript 事件对象呢？

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

1.原生 javascript 获取事件对象

window.onload = function () {document.getElementById("areaDiv").onclick = function (event) {	console.log(event);}}

2.jQuery 代码获取事件对象

$(function () {$("#areaDiv").click(function (event) {console.log(event);});});

3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

$("#areaDiv").bind("mouseover mouseout",function (event) {if (event.type == "mouseover") {console.log("鼠标移入");} else if (event.type == "mouseout") {console.log("鼠标移出");}});

图片跟随练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">	body {		text-align: center;	}	#small {		margin-top: 150px;	}	#showBig {		position: absolute;		display: none;	}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">	$(function(){		$("#small").bind("mouseover mouseout mousemove",function (event){			if(event.type=="mouseover"){				$("#showBig").show();			}else if(event.type=="mouseout"){				$("#showBig").hide();			}else if(event.type=="mousemove"){				$("#showBig").offset({					left:event.pageX+10,					top:event.pageY+10				})			}		})	});</script></head><body>	<img id="small" src="img/small.jpg" />		<div id="showBig">		<img src="img/big.jpg">	</div></body></html>

XML

什么是 xml？

xml 是可扩展的标记性语言。

xml的作用?

1、用来保存数据，而且这些数据具有自我描述性

2、它还可以做为项目或者模块的配置文件

3、还可以做为网络传输数据的格式（现在 JSON 为主）

xml 语法

文档声明。
元素（标签）
xml 属性
xml 注释
文本区域（CDATA 区）

Xml命名规则

1、元素的名字可以包含字母、数字、和其他字符

2、元素的名字不能以xml（XML、Xml、xML等）开头

3、元素的名字不能以数字或者标点符号开头

4、元素的名字不能包含空格

5、XML文档除了XML以外，没有其他所谓的保留字，任何的名字都可以使用，但是应该尽量使元素名字具有可读性，名字使用下划线是个不错的选择

6、尽量避免使用”-“和”.”，因为可能引起混乱。

7、在XML元素命名中不要使用”:”,因为XML命名空间需要用到这个十分特殊的字符。

xml 属性

xml 的标签属性和 html 的标签属性是非常类似的，属性可以提供元素的额外信息

在标签上可以书写属性：

一个标签上可以书写多个属性。每个属性的值必须使用引号引起来。

属性的规则和标签的书写规则一致。

语法规则

所有 XML 元素都须有关闭标签（也就是闭合）

XML 标签对大小写敏感
XML 必须正确地嵌套
XML 文档必须有根元素
1. 根元素就是顶级元素，
2. 没有父标签的元素，叫顶级元素。
3. 根元素是没有父标签的顶级元素，而且是唯一一个才行。
XML 的属性值须加引号
文本区域（CDATA 区）

CDATA 语法可以告诉 xml 解析器，我 CDATA 里的文本内容，只是纯文本，不需要 xml 语法解析

CDATA 格式：
```
<![CDATA[ 这里可以把你输入的字符原样显示，不会解析 xml ]]>
```

xml解析技术

xml 可扩展的标记语言。

不管是 html 文件还是 xml 文件它们都是标记型文档，都可以使用 w3c 组织制定的 dom 技术来解析。

document 对象表示的是整个文档（可以是 html 文档，也可以是 xml 文档）

早期 JDK 为我们提供了两种 xml 解析技术 DOM 和 Sax 简介（已经过时，但我们需要知道这两种技术）

dom 解析技术是 W3C 组织制定的，而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。

Java 对 dom 技术解析标记也做了实现。

sun 公司在 JDK5 版本对 dom 解析技术进行升级：SAX（ Simple API for XML ）

SAX 解析，它跟 W3C 制定的解析不太一样。它是以类似事件机制通过回调告诉用户当前正在解析的内容。它是一行一行的读取 xml 文件进行解析的。不会创建大量的 dom 对象。

所以它在解析 xml 的时候，在内存的使用上。和性能上。都优于 Dom 解析。

第三方的解析：

jdom 在 dom 基础上进行了封装、dom4j 又对 jdom 进行了封装。

pull 主要用在 Android 手机开发，是在跟 sax 非常类似都是事件机制解析 xml 文件。

这个 Dom4j 它是第三方的解析技术。我们需要使用第三方给我们提供好的类库才可以解析 xml 文件。

dom4j 解析技术

dom4j 编程步骤

先加载 xml 文件创建 Document 对象
通过 Document 对象拿到根元素对象
通过根元素.elelemts(标签名); 可以返回一个集合，这个集合里放着。所有你指定的标签名的元素对象
找到你想要修改、删除的子元素，进行相应在的操作
保存到硬盘上

 @Test    public void test1() throws DocumentException {        // 要创建一个 Document 对象，需要我们先创建一个 SAXReader 对象        SAXReader saxReader = new SAXReader();        // 这个对象用于读取 xml 文件，然后返回一个 Document。        Document document = saxReader.read("src/books.xml");        System.out.println(document);    }    @Test    public void test2() throws DocumentException {        //1.读取books.xml        SAXReader saxReader = new SAXReader();        //2.在junit测试中，相对路径是从模块开始算 获取document对昂        Document document = saxReader.read("src/books.xml");        //通过document获取根元素        Element rootElement = document.getRootElement();        //通过根元素获取book标签对象        //element和elements都是通过标签名查找子元素 多个用s        List<Element> books = rootElement.elements("book");        //遍历输出        for(Element book:books){            //asxml()把标签对象转换为标签字符串            Element nameElement = book.element("name");            //System.out.println(nameElement.asXML());            //getText()可以获取标签中的文本内容           String nameText = nameElement.getText();            //System.out.println(name);            //elementText 直接获取指定标签名的文本内容            String priceText =  book.elementText("price");            String authorText = book.elementText("name");            String snValue = book.attributeValue("sn");            System.out.println(new Book(snValue,nameText,authorText,Double.parseDouble(priceText)));        }    }

Tags: JAVA