使用jQuery操作DOM

Dom操作分类

DOMCore：任何一种支持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操作。

直接设置样式值

使用css()为指定的元素设置样式值

css(name,value)设置单个属性

例如：$(this).css("border","5px solid #f5f5f5");

css()同时设置多个属性

例如：$(this).css({"border":"5pxsolid #f5f5f5","opacity":"0.5"});

追加和移出样式

追加样式addClass(class)或addClass(class1class2 … classN)

移除样式removeClass(“style2”)或removeClass("style1style2 ")

切换样式

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

HTML代码操作

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

例如：$("div.left").html();或 $("div.left").html("

…

");

文本操作

text()可以获取或设置元素的文本内容

例如：$("div.left").text();或 $("div.left").text("

…

");

html()和text()的区别

Value值操作

val()可以获取或设置元素的value属性值

例如：$(this).val();或 $(this).val("");

节点操作jQuery中节点操作主要分为：

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

创建节点元素

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

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

例如：var $newNode2=$(“千与千寻”);

插入子节点元素内部插入子节点

插入同辈节点元素外部插入同辈节点

替换节点replaceWith()和replaceAll()用于替换某个节点

例如：$("ul li:eq(1)").replaceWith($newNode1);或$newNode1.replaceAll("ul li:eq(1)");注意：两者的关系类似于append()和appendTo()。

复制节点

clone()用于复制某个节点：$("ul li:eq(1)").clone(true).appendTo("ul");

可以使用clone()实现输出DOM元素本身的HTML：$("

").append($(DOM元素).clone()).html();

删除节点

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

remove()：删除整个节点

detach()：删除整个节点，保留元素的绑定事件、附加的数据

empty()：清空节点内容

获取与设置节点属性

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

例如：$newNode4.attr("alt");或$("img").attr();

removeAttr()用来删除元素的属性

例如：$newNode2.removeAttr("title");

遍历子元素

children()方法可以用来获取元素的所有子元素

例如：$("body").children();

注意：获取元素的子元素，但不包含子元素的子元素。

遍历同辈元素

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

遍历前辈元素

jQuery中可以遍历前辈元素，方法如下：

parent()：获取元素的父级元素

parents()：元素元素的祖先元素