jQuery中的DOM操作 DOM操作的分类

DOM操作分为3个方面：DOM Core(核心)、HTML-DOM和CSS-DOM。

DOM-Core

JavaScript中的getElementById()、getElementsByTagName()、getAtrribute()、setAttribute()等方法都是DOM Core的组成部分。例如：

document.getElementsByTagName("form"); element.getAttribute("src"); HTML-DOM

HTML-DOM提供了一些更加简明的记号来描述各种HTML元素的属性。例如：

document.forms; element.src; CSS-DOM

CSS-DOM是针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。例如：

element.style.color = "red"; jQuery中的DOM操作 查找结点

可以使用jQuery选择器来完成

查找元素节点 var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点 查找属性节点

利用jQuery选择器获取元素后，可以使用attr()方法来获取它的各种属性值。attr()的参数是一个时，表示要查询的属性的名字。

var $para = $("p"); //获取<p>节点 var p_txt = $para.attr("title"); //获取<p>元素节点属性tittle 创建节点

动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并达到各种各样的人机交互的目的。

创建元素节点

创建元素节点需要两个步骤，创建新元素并将新元素插入文档中。例如：

var $li = $("<li title="li">这是一个li标签</li>"); $("ul").append($li); 插入节点 append()，向每个匹配的元素内部追加内容 appendTo()，将所有匹配的元素追加到指定的元素内部 prepend()，向每个匹配的元素内部前置内容 prependTo()，将所有匹配的元素前置到指定元素内部 after()，向每个匹配的元素之后插入内容 insertAfter()，将所有匹配的元素插入到指定的元素后面 before()，在每个匹配的元素之前插入内容 insertBefore()，将所有匹配的元素插入到指定的元素前面 删除节点 remove()，从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选。当某个节点用remove()删除后，该节点所包含的所有后代节点将同时被删除，返回值是一个指向已被删除节点的引用。例如： var $li = $("ul li:eq(1)").remove(); //获取第2个<li>元素节点后，将它从网页中删除 var $li = $("ul li:eq(1)").remove("li[title!=li]"); //将<li>元素中属性title不等于"li"的<li>元素删除 detach()，这个方法不会将匹配的元素从jQuery对象中删除，所有绑定的事件、附加的数据都会保留下来。 empty()，这个方法并不是删除节点，而是清空节点，清空元素的所有后代节点。 复制节点

可以使用clone()方法来复制节点，复制节点后，被复制的新元素不具有任何行为，当在clone()方法中传入一个参数true，复制元素的同时复制元素所绑定的事件。例如：

$(this).clone(true).appendTo("body"); 替换节点

replaceWith()、replaceAll()，将所有匹配的元素替换成指定的HTML或者DOM元素。如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

$("p").replaceWith("<strong>hello world!</strong>"); $("<strong>hello world!</strong>").replaceAll("p"); 包裹节点

wrap()，将某个节点用其他标记包裹起来。如果包裹的元素之间有其他元素的内容，其他元素会被放到包裹元素之后。

$("strong").wrap("<b></b>"); //用<b>标签将<strong>标签包裹起来

wrapAll()，将所有匹配的元素用一个元素来包裹。
wrapInner()，将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。例如：

$("strong").wrapInner("<b></b>"); //相当于 <strong><b>hello world!</b></strong> 属性操作 获取属性和设置属性

获取属性：

var $para = $("p"); var p_txt = $para.attr("title");

设置属性：

$("p").attr("title","your title");

也可以一次性为同一个元素设置多个属性：

$("p").attr({"title":"your title","name":"your name"}); 删除属性 $("p").removeAttr("title"); 样式操作 获取样式和设置样式

获取样式：

var p_class = $("p").attr("class"); //获取<p>元素的class

设置样式

$("p").attr("class","high"); 追加样式 $("p").addClass("another");

如果不同的class设定了同一样式属性，则后者覆盖前者。

移除样式 $("p").removeClass("high"); //移除<p>元素中值为"high"的class $("p").removeClass("high another"); //移除两个样式 $("p").removeClass(); //移除全部样式 切换样式 $toggleBtn.toggle(function(){ //代码3 }，function(){ //代码4 })； //交替执行代码3和代码4两个函数 $("p").toggleClass("another"); //重复切换类名"another" 判断是否有某个样式

hasClass()可以用来判断元素中是否有某个样式，有就返回true，没有就返回false。

$("p").hasClass("another");

也可以使用is()方法

$("p").is(".anpther"); 设置和获取HTML、文本和值

html()，用于读取或设置某个元素的HTML内容

var p_html = $("p").html(); $("p").html("<strong>hello world!</strong>");

text()，读取或设置某个元素中的文本内容

var p_text = $("p").text(); $("p").text("hello world!");

val()，设置和获取元素的值

遍历节点

children()，取得匹配元素的子元素的集合

var $p = $("p").children();

next()，取得匹配元素后面紧邻的同辈元素
prev()，取得匹配元素前面紧邻的同辈元素
siblings()，取得匹配元素前后所有的同辈元素
closest()，取得最近的匹配元素

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。
可以利用css()获取样式属性：

$("p").css("color"); //获取<p>元素的颜色样式

也可以直接利用css()设置某个元素的单个样式：

$("p").css("color","red");

offset()，获取元素在当前视窗的相对偏移，返回的元素包括两个属性，top和left，例如：

var offset = $("p").offset(); var left = offset.left; var top = offset.top;