使用jQuery操作DOM

---

一、DOM操作分类

DOM操作分为三类：

• DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
• HTML-DOM：用于处理HTML文档，如document.forms
• CSS-DOM：用于操作CSS，如element.style.color=“green”

提示：
JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

二、jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装
jQuery中的DOM操作：

• 样式操作
• 内容及Value值操作
• 节点操作
• 节点属性操作
• 节点遍历
• CSS-DOM操作

提示：
“元素”和“节点”含义大同小异，本章并不严格区分

1、样式操作

设置和获取样式值

css(name,value);	//设置单个属性
css({name:value,name:value,name:value...});	//同时设置多个属性
css(name)	//获取属性值

追加和移除样式

• 追加样式

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

• 移除样式

$(selector).removeClass("class");
$(selector).removeClass("class1,class2...classN");

切换样式

• toggleClass()
  模拟了addClass()与removeClass()实现样式切换的过程

$(selector).toggleClass(class);

判断是否含指定的样式

• hasClass()方法来判断是否包含指定的样式

$(selector).hasClass(class);

2、内容操作

• HTML代码操作
• 标签内容操作
• 属性值操作

HTML代码操作

• html()可以对HTML代码进行操作，类似于JS中的innerHTML

$("div.left").html();//获取元素中的html代码
$("div.left").html("<div class='content'>...</div>");//设置元素中的html代码

标签内容操作

• text()可以过去或设置元素的文本内容

$("div.left").text();//获取元素中的文本内容
$("div.left").text("<div class='content'>...</div>");//设置元素中的文本内容

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

属性值操作

• val()可以过去或设置元素的value属性值

$(this).val();//获取元素的value属性值
$(this).val(value);//设置元素的value属性值

3、节点操作

• 查找节点
• 创建节点
• 插入节点
• 删除节点
• 替换节点
• 复制节点

创建节点元素

工厂函数$()用于获取或创建节点

• $(selector)：通过选择器获取节点
• $(element)：把DOM节点转化成jQuery节点
• $(html)：使用HTML字符串创建jQuery节点

插入节点

• 元素内部插入子节点
• 元素外部插入同辈节点
  

删除节点

jQuery提供了三种删除节点的方法

• remove()：删除整个节点
• empty()：清空节点内容
• detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点

replaceWith()和replaceAll()用于替换某个节点
两者的关系类似于append()和appendTo()

复制节点

clone()用于复制某个节点

$(selector).clone([includeEvents]);
//[includeEvents]:参数ture或flase,true复制事件处理，flase时反之

4、属性操作

• 获取与设置元素属性
• 删除元素属性

获取与设置元素属性

attr()用来获取与设置元素属性

$(selector).attr([name]);//获取属性值
$(selector).attr({[name1:value1]...[nameN:valueN]});//设置多个属性的值

删除元素属性

removeAttr()用来删除元素属性

$(selector).removeAttr(name);

5、节点遍历

• 遍历子元素
• 遍历同辈元素
• 遍历前辈元素
• 其他遍历方法

遍历子元素

children()方法可以用来获取元素的所有子元素
获取元素的子元素，但不包含子元素的子元素

$(selector).children([expr]);

遍历同辈元素

jQuery可以获取紧邻其后、紧邻期前和位于该元素前与后的所有同辈元素

遍历前辈元素

• parent()：获取元素的父级元素
• parents()：元素元素的祖先元素

其他遍历方法

• each()：规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element));
//index:选择器的位置
//element:当前的元素

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

6、CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

---