打杂之WEB前端（一） jQuery 操作DOM总结，DOM Core操作

jQuery创建元素节点或文本节点或属性节点、jQuery插入节点、jQuery删除节点、jQuery复制节点、jQuery替换节点、jQuery包裹节点、jQuery属性操作、jQuery样式操作、jQuery设置和获取HTML、文本和值、jQuery遍历节点

　　jQuery操作DOM的总结分享，个人学习笔记!分享的总结不一定很详细，不会每个方法的用法及详细描述及说明，只是一个概述!

　　说说我的个人想法：

　　很多时候，我们在开发JS特效的时候，脑子里没有想法，看到问题，第一想到的是思考怎么用那些常用的jQuery方法来解决问题，一些好用的方法及超简单的方法往往被忽略或者以前系统的学习过jQuery但一时忘记了!所以要牢牢知道jQuery到底有哪些方法，至于此方法怎么用我们可以不知道!大不了多花些时间百度下!多用几次就记住了!

　　注：从全局出发，吃透jQuery都能干什么，都有什么方法!至于方法怎么使用，我们可以查询!

　　1、创建元素节点或文本节点或属性节点

　　方法：$(html);

　　描述：创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

　　代码：$("ul").append($("<li title="属性节点" >文本节点</li>"));

　　2、插入节点

方法	描述
append()	向每个匹配的元素内部追加内容。注：在内部元素的最后面追加
appendTo()	将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中。
prepend()	向每个匹配的元素内部前置内容。注：在内部元素的最前面追加
prependTo()	将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。
after()	在每个匹配的元索之后插入内容。
insertAfler()	将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面。
before()	在每个匹配的元素之前插入内容。
insertBefore()	将所有匹配的元素捅入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面。

　　3、删除节点

方法	描述
remove()	当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。演示下删除后如何取回：代码： var $li = $("ul li:eq(0)").remove();//获取UL的第一个LI,并将其从网页中删除。 $li.appendTo("ul");//把刚删除的li重新添加到ul中。
detach()	detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据都会保留下来。
empty()	严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

自己测试的对比 remove() 和 detach() （使用的jquery版本，jquery-1.8.3.js）：

1 test_remove.html

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").remove());
  });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>
</html>

现象如下：点击移除之后再点击段落文字字体不变

2 test_detach.html

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>
</html>

现象如下：点击移除之后再点击段落文字字体能变大

上面的代码都是同样删除 p标签后再追加到body内部元素的后面。区别在于detach 删除p再放回去，保留了点击事件。但是remove 没有保留。

　　4、复制节点

　　方法：clone()

　　语法格式：clone(true)

　　描述：其中参数设置为true就可以复制元素的所有事件的处理。

　　代码：

　　var kelong = $("ul").clone();//克隆好的对象

　　kelong.addClass("yangshi");//添加个css样式，还可以使用jQuery其他方法进一步操作,很方便

　　$("p").append(kelong);

　　5、替换节点

　　方法：replaceWith()和replaceAll()

　　描述：将所有选择的元素替换成指定的html和dom元素。其中参数被选择替换的内容。replaceWith() 与replaceAll() 方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序。

　　$("p")replaceWith("元素")和$("元素").replaceAll("p")只是顺序相反，效果是一样的。

　　注：一旦完成替换，被替换元素中的全部事件都将消失，需要在新元素上重新绑定事件。

　　6、包裹节点

方法	描述
wrap()	代码： $("#li_one").wrap("<strong></strong>"); 效果： <strong> <li id="li_one" title="jQuery DOM 包裹节点">包裹节点</li> </strong>
wrapAll()	该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。代码： $(".li_two").wrapAll("<strong></strong>"); 效果： <strong> <li class="li_two" title="包裹节点">包裹节点</li> <li class="li_two" title="jQuery DOM 包裹节点">jQuery DOM 包裹节点</li> </strong>
wrapInner()	该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。代码： $("#li_one").wrapInner("<strong></strong>"); 效果： <li id="li_one" title="jQuery DOM 包裹节点"> <strong>包裹节点</strong> </li>

　　7、属性操作

方法	描述
attr()、prop()	设置或返回匹配元素的属性和值。
removeAttr()、removeProp()	从所有匹配的元素中移除指定的属性。

jquery中attr和prop的区别：

Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.

因为在 jQuery 1.6 之前，使用 attr() 有时候会出现不一致的行为。

那么，什么时候使用attr()，什么时候使用prop()？

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

到此，将 attr('checked') 改成 prop('checked') 即可修复提的 issues 了

ps ：自己定义的属性也使用attr

举例：

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

打杂之WEB前端（一） jQuery 操作DOM总结，DOM Core操作

猜你喜欢