jQuery中的DOM操作

为了全面的讲解DOM操作，由于每一张网页都能用DOM表示，而每一份DOM都可以看做一个，首先需要构建一个网页。网页效果如下：

HTML代码如下：

<!-- 省略其他代码 -->
<p>你喜欢的NBA球星是？</p>
<ul>
<li title="威少">威少</li>
<li title="杜兰特">杜兰特</li>
<li title="库里">库里</li>
</ul>
<!-- 省略其他代码 -->

根据上面的网页构建出一颗DOM树，如下图所示：

接下来，对DOM的操作都将围绕该DOM树而展开。

1.1、查找节点

1.查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

 var $li = $("ul li:eq(1)")//获取<ul>里第二个<li>节点
 var li_txt = $li.text();//获取<ul>里第二个<li>节点的文本内容
  alert(li_txt);//打印文本内容

2.查找属性节点

利用jq选择器查找到需要的元素以后，可以利用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个，也可以是两个。当参数为一个时，则是要查询的属性的名字，

例如：

获取属性节点并打印出来它的文本内容，jq代码如下：

  var $para = $("p");//获取<p>节点
  var p_txt = $para.attr("title");//获取<p>节点的title属性
  alert(p_txt);//打印出获取<p>节点的title属性

1.2、创建节点

1.创建元素节点

$(html)方法。

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jq对象。

创建两个<li>元素，jq代码如下：

var $li_1 = $("<li></li>");//创建第一个<li>元素
var $li_2 = $("<li></li>");//创建第二个<li>元素

 

然后将这两个新元素插入到文档中，可以使用jq中的append()等方法，jq代码如下：

$("ul").append($li_1).append($li_2)

注意：当创建单个元素时要正确标签和使用标准的XHTML格式。

例如创建一个<p>元素，可以用$("<p/>")或者$("<p></p>"),但是不要使用$("<p>")或者大写的$("<P/>");

2.创建文本节点

已经创建了两个<li>元素节点并把它们插入到了文档中，此时需要为创建的元素节点添加文本内容。

 var $li_1 = $("<li>詹姆斯</li>");//创建一个<li>元素,包括元素节点和文本节点，'詹姆斯'就是创建的文本节点
 var $li_2 = $("<li>小托马斯</li>");//创建一个<li>元素,包括元素节点和文本节点，'小托马斯'就是创建的文本节点
 $("ul").append($li_1).append($li_2)//添加到<ul>节点中

3.创建属性节点

创建属性节点预创建文本节点类似，直接在创建元素节点时一起创建。jq代码如下：

var $li_1 = $("<li title='詹姆斯'>詹姆斯</li>");//创建一个<li>元素,包括元素节点和文本节点，title='詹姆斯'就是创建的属性节点
var $li_2 = $("<li title='小托马斯'>小托马斯</li>");//创建一个<li>元素,包括元素节点和文本节点，title='小托马斯'就是创建的属性节点
$("ul").append($li_1).append($li_2)//添加到<ul>节点中

1.3、插入节点

jq中插入节点的方法

 

jq中插入节点的方法

append()	向每个匹配的元素内追加属性	HTML代码： <p>我想说：</p> jq代码： $("p").append("<b>你好</b>") 结果： <p>我想说：<b>你好</b></p>
appendTo()	将所有匹配的元素追加到指定的元素中。	HTML代码： <p>我想说：</p> jq代码： $("<b>你好</b>").appendTo("p") 结果： <p>我想说：<b>你好</b></p>
prepend()	向每个匹配的元素内部前置内容	HTML代码： <p>我想说：</p> jq代码： $("p").prepend("<b>你好</b>") 结果： <p><b>你好</b>我想说：</p>
prependTo()	将所有匹配的元素前置到指定的元素中。	HTML代码： <p>我想说：</p> jq代码： $("<b>你好</b>").prependTo("p") 结果： <p><b>你好</b>我想说：</p>
after()	在每个匹配的元素之后插入内容	HTML代码： <p>我想说：</p> jq代码： $("p").after("<b>你好</b>") 结果： <p>我想说：</p><b>你好</b>
insertAfter()	将所有匹配的元素插入到指定元素的后面。	HTML代码： <p>我想说：</p> jq代码： $("<b>你好</b>").insertAfter("p") 结果： <p>我想说：</p><b>你好</b>
before()	在每个匹配的元素之前插入内容	HTML代码： <p>我想说：</p> jq代码： $("p").before("<b>你好</b>") 结果： <b>你好</b><p>我想说：</p>
insertBefore()	将所有匹配的元素插入到指定元素的前面。	HTML代码： <p>我想说：</p> jq代码： $("<b>你好</b>").insertBefore("p") 结果： <b>你好</b><p>我想说：</p>

 

1.4、删除节点

 

jq中提供了三种删除节点的方法，即：remove(),datach()和empty()。

1.remove()方法。

作用是从DOM中删除所有匹配的元素，传入的参数用于根据jq表达式来筛选元素。

例如删除<ul>节点中的第二个<li>元素节点，jq代码如下:

$("ul li:eq(1)").remove();

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后在使用这些元素。下面的jq代码说明元素用remove()方法删除后，还可以继续使用。

 

 var $li = $("ul li:eq(1)").remove()//获取<ul>里第二个<li>节点,将它从网页中删掉
 $li.appendTo('ul')//把刚才删掉的节点又重新添加到<ul>元素里面

另外remove()方法也可以通过传递参数来选择性的删除元素，jq代码如下：

$("ul li").remove("li[title != 威少]");//将<li>元素中属性不等于"威少"的<li>元素删除

2.detach()方法

detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但需要注意的是：这个方法不会把匹配的元素从jq对象中删除，因而可以在将来使用这些元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

通过下面的例子，可以知道它与remove();方法的区别，jq代码如下：

  $("ul li").click(function(event) {
            alert($(this).html())
 });
var $li = $("ul li:eq(1)").detach();//删除元素
$li.appendTo('ul');//重新追加此元素，他之前绑定的事件还在，如果使用remove()方法它之前绑定的事件将实效

3.empty()方法

严格来讲empty()方法并不是删除节点，而是清空节点，他能清空元素中的所有后代节点。

jq代码如下：

$("ul li:eq(1)").empty();//获取<ul>里第二个<li>节点，清空此元素里面的内容，注意是元素里

1.5、复制节点

clone()方法

可以利用clone()方法来完成对元素节点的复制，jq代码如下：

$("ul li").click(function(event) {
     $(this).clone().appendTo('ul');//复制当前节点，并把它添加到<ul>元素中
});

复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有当前节点具有的事件，只需要在clone()方法中传递一个参数true，它的含义是：复制元素的同时复制元素所绑定的事件。

jq代码如下：

 $("ul li").click(function(event) {
       $(this).clone(true).appendTo('ul');//复制当前节点，并把它添加到<ul>元素中，新元素也具有复制功能
 });

1.6、替换节点

replaceWith()和replaceAll()方法

replaceWith()方法的作用是将所有匹配的元素替换成指定的HTML或者DOM元素。

replaceAll()方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作。

jq代码如下：

 $("p").replaceWith("<em>戴维斯.安东尼</em>")
 $("<em>戴维斯.安东尼</em>").replaceAll('p')

注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

1.7、包裹节点

如果要将某个节点用其他标记包裹起来，jq提供了以下几种方法：

wrap(),wrapAll()和wrapInner()

1.wrapAll()方法

该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。

现在在网页中再加入一个<strong>元素。

HTML代码如下：

<!-- 省略其他代码 -->
<strong title="你喜欢的NBA球星是？">你喜欢的NBA球星是？</strong>
<strong title="你喜欢的NBA球星是？">你喜欢的NBA球星是？</strong>
<ul>
<li title="威少">威少</li>
<li title="杜兰特">杜兰特</li>
<li title="库里">库里</li>
</ul>
<!-- 省略其他代码 -->

如果使用wrap()方法包裹<strong>元素，jq代码如下：

$("strong").wrap("<b></b>")

将会得到如下结果:

<b><strong title="你喜欢的NBA球星是？">你喜欢的NBA球星是？</strong></b>
<b><strong title="你喜欢的NBA球星是？">你喜欢的NBA球星是？</strong></b>
使用wrapAll()方法包裹,jq代码如下：

$("strong").wrapAll("<b></b>")

将会得到以下结果：

<b><strong title="你喜欢的NBA球星是？">你喜欢的NBA球星是？</strong>

<strong title="你喜欢的NBA球星是？">你喜欢的NBA球星是？</strong></b>

2.wrapInner()方法

该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。jq代码如下：

$("strong").wrapInner("<b></b>")

结果如下：

<strong title="你喜欢的NBA球星是？"><b>你喜欢的NBA球星是？</b></strong>

1.8、属性操作

在jq中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

1.获取属性和设置属性

jq代码如下：

获取<p>元素的title属性

var $para = $("p");//获取<p>节点
var p_txt = $para.attr("title");//获取<p>节点的title属性

设置<p>元素的属性,jq代码如下：

$("p").attr("title","姚明");//设置单个属性值
$("p").attr({"title":"姚明","name":"player"});//设置多个属性值

注意：jq中有很多方法都是同一个函数实现获取(getter)和设置(setter)的，类似的还有：html(),text(),height(),width(),val()和css()等方法。

2.删除属性

removeAttr() 方法。

代码如下：

$("p").removeAttr('title');//删除<p>元素的title属性

1.9、样式操作

1.获取样式和设置样式

HTML代码如下：

<p class="myClass" title="你喜欢的NBA球星是？">你喜欢的NBA球星是？</p>现货区

由于class也是<p>元素的属性，可以通过attr()方法获取和设置<p>元素的class属性 代码如下：

var p_class = $("p").attr("class");//获取<p>的class
$("p").attr("class","high")//设置<p>的class  此时<p>元素的class变为high原来的class(myClass)被替换;如果此时需要追加效果可以通过addClass()方法；

2.追加样式

addClass()方法。

$("p").addClass("another");//此时<p>元素的class为"myClass another ";

3.移除样式

removeClass()方法。

它的作用是从匹配的元素中删除全部或者指定的class。

jq代码如下：

$("p").removeClass("myClass");//删除<p>元素的class(myClass);

另外，可以通过空格的方式删除多个class名 jq代码如下：

$("p").removeClass("myClass another");//删除多个class;

当removeClass()不带参数时，会删除全部的class;jq代码如下：

$("p").removeClass();//删除<p>元素全部的class

4.切换样式

toggleClass()方法。

如果类名存在就删除它，如果类名不存在则添加它。

jq代码如下：

$("p").toggleClass("myClass");//重复切换类名myClass

5.判断是否含有某个样式

hasClass()方法可以用来判断元素中是否含有某个class,如果有，则返回true，否则返回false。

1.10、设置和获取HTML、文本和值

1.html()方法。

此方法类似于javascript中的innerHTML属性，可以用来读取和设置某个元素中HTML内容。jq代码如下：

var p_html = $("p").html();//获取<p>元素的HTML代码

也可以利用html()方法设置元素的html代码，jq代码如下：

$("p").html("the best player");//设置<p>元素的HTML代码

注意：html()方法可以用于XHTML文档，但不能用于XML文档。

2.text()方法

此方法类似于javascript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。jq代码如下：

 

var p_text= $("p").text();//获取<p>元素的文本内容

也可以利用text()方法设置元素的文本内容，jq代码如下：

$("p").text("the best player");//设置<p>元素的文本内容

注意：jq的text()方法支持所有浏览器，而javascript中的innerText属性并不支持Firefox浏览器。text()方法对HTML文档和XML文档都有效。

3.val()方法

此方法类似于javascript中的value属性，可以用来获取和设置元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择值的数组。

val()方法还可以使select（下拉框）、checkbox（多选框）和radio（单选框）相应的项被选中。

1.11、遍历节点

children()方法、next()方法、prev()方法、siblings()方法、closeset()方法

1.children()方法

该方法用于取得匹配元素的子元素集合

$("ul").children();//获取<ul》元素下的三个<li>子元素

注意：children()方法只考虑子元素而不考虑其他后代元素

2.next()方法

该方法用于取得匹配元素后面紧邻的同辈元素。从DOM树中可以知道<p>元素的下一个同辈节点是<ul>,可以通过以下代码获取：

$("p").next();

3.prev()

匹配元素前面紧邻的同辈元素

$("ul").prev();//获取<p>元素

4.siblings()方法

匹配元素前后所有同辈元素。

$("p").siblings();//获取<ul>元素

5.closet()方法

用于取得最近的匹配元素(祖先元素)

$("li").closet("ul");//获取<ul>元素