第八章

8.1 DOM操作

在jQuery中，DOM操作是一个非常重要的组成部分。jQuery中提供了一系列操作DOM强有力的方法，它们不仅简化了传统JavaScript操作DOM时繁冗的代码，更加解决了令开发者苦不堪言的跨平台浏览器兼容。

8.1.1 DOM操作分类

JavaScript操作DOM时分为三类----DOM Core(核心),HTML-DOM和CSS-DOM。

8.2 样式操作

1.设置和获取样式值

使用css()方法为指定的元素设置样式值，其语法如下：

1.$(selector).css(name,value);    //设置单个属性
2.$(selector).css(name:value,name:value,name:value....);     //同时设置多个属性

css()方法的参数说明

参数	描述
name	必需。规定CSS属性名称。该参数可以使任何CSS属性。
value	必需。规定CSS属性的值。该参数可以使任何CSS属性值。

如何获取CSS属性的值，其语法如下：

$(selector).css(name);     //获取属性值

2.追加样式和移除样式

1）追加样式
使用addClass()方法为元素追加类样式，其语法如下：

$(selector).addClass(class);

class为类样式的名称，也可以增加对个类样式，各个类样式之间以空格隔开即可。其语法如下：

$(selector).addClass(class1,class2....classN);

addClass()比css()更加常用，因为使用addClass()添加样式，更加符合W3C规范中“结构与样式分离的准则”。
2）移除样式
与addClass()方法相对应的方法是移除样式方法removeClass()，其语法如下：

1.$(selector).remobeClass(class);    //移除单个样式
2.$(selector).removeClass(class1,class2....classN);    //移除多个样式

3.切换样式

使用toggle()方法可以切换元素的可见状态。使用toggleClass()方法可以切换不同元素的类样式，其语法如下：

$(selector).toggleClass(class);

4.判断是否含指定的样式

提供hasClass()方法来判断是否包含指定的样式，其语法如下：

$(selector).hasClass(class);

参数class是类名，该名称是必选的，规定指定元素查找的类名，返回值是布尔型。

8.3 内容操作

1.HTML代码操作

html()方法的参数说明：

参数	描述
content	可选。规定被选元素的新内容。该参数可以包含HTML标签。无参数时，表示获取被选元素的文本内容。

2.标签内容操作

text()方法的参数说明：

参数	描述
content	可选。规定呗选元素 的新文本内容。注释：特殊字符会被编码。无参数时，表示获取被选元素的额文本内容。

html()方法和text()方法的区别

3.属性值操作

val()方法的参数说明

参数	描述
value	可选。规定被选元素的新内容。无参数时，返回值为第一个被选元素的value属性的值

8.5 节点与属性操作

一种是对节点本身 的操作，一种是对节点中属性节点的操作。

8.5.1 节点操作

1.查找节点

2.创建节点元素

该函数是用于将匹配到的DOM元素转换为jQuery对象的，它就好像一个零配件的生产工厂，所以被形象的成为工厂函数。$()方法语法格式如下：

3.插入节点

两大类：内部插入节点和外部插入节点

4.删除节点

5.替换节点

6.复制节点

8.5.2 属性操作

1.获取与设置元素属性

2.删除元素属性

8.7 节点遍历

8.7.1 遍历子元素

提供children()方法。该方法可以用来获取元素的所有子元素，而不考虑其他后代元素，其语法如下：

$(selector).children([expr])

其参数expr为可选，用于过滤子元素的表达式。

8.7.2 遍历同辈元素

8.7.3 遍历前辈元素

8.7.4 其他遍历方法

1.each()方法

each()方法规定为每个匹配元素规定运行的函数，其语法如下：

$(selector).each(function(index,element))

参数index表示选择器的index位置，element表示当前的元素，当返回值为false时可用于及早停止循环。

2.end()方法

end()方法结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态，语法如下：

.end();

8.8 CSS-DOM操作