JQuery中的DOM操作

一、获取节点(元素节点、属性节点)

(1) 获取元素节点: 通过 jQuery 选择器完成。

如:alert($(“ul li:eq(2)”).text());

(2) 获取属性节点: 获取 到所需要的元素之后, 可以调用 jQuery 对象的
attr() 方法来获取它的各种属性值。

如:alert($(“p”).attr(“title”));

二、创建节点

$(“html 代码”) 方法将HTML 代码转换成DOM 对象，并将这
个 个DOM 对象包装成一个jQuery

//创建元素节点
var $li1=$("<li></li>");
var $li2=$("<li/>");
//创建文本节点
var $li1=$(“<li> 香蕉</li>");
var $li2=$(“<li> 雪梨</li>");
//创建属性节点
var $li1=$("<li title=' 香蕉'> 香蕉</li>");
var $li2=$("<li title=' 雪梨'> 雪梨</li>")

注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要用其 而是需要用其他方法将其插入到文档中

三、插入节点

四、删除节点

//remove()
$("ul li:eq(1)").remove();
$(“ul li.ll").remove();
//detach()
$("ul li:eq(1)").detach();
$(“ul li”).detach(“.ll”); 
//empty()
$(“ul li”).empty(); //不能传递参数

区别:

1. 节点用remove() 方法删除后，该节点所包含的所有后代
   节点将同时被删除；该方法的返回值是一个指向已被删除的节点的引
   用，即不会把匹配的元素从jQuery 对象中删除，以后可以再使用这些
   元素，另外除了这个元素本身得以保留之外，其他的比如绑定的事件，
   附加的数据等都会被移除。
2. 节点用detach() 方法删除后，不会把匹配的元素从jQuery
   对象中删除，以后可以再使用这些元素，另外除了这个元素本身得以
   保留之外，但其他的比如绑定的事件，附加的数据等都会保留下来。
3. 当某个节点用empty() 方法后，并不是删除节点，而是清空节点
   ( 清空元素中的所有后代节点 ， 不包含 自身的 属性节点 )

五、复制节点

//clone()
$("ul li").click(function(){
	$(this).clone().appendTo(“ul”);// 复制当前结点，并追加到ul中
});

注意：复制的新节点不具有任何行为，如果需要新元素也具有相应的行为。在clone() 方法中传递参数true, 它的含义是复制元素的同时复制元素所绑定的事件。

六、替换节点

(1) replaceWith() 将所有匹配的元素都替换为指定的HTML 或 或 DOM 元素。

$("p").replaceWith("<h1>我最喜欢的水果是 我最喜欢的水果是： ：</h1>");

(2) replaceAll() 颠倒了的 replaceWith() 方法。

七、包裹节点

(1)wrap(): 将指定节点用其他标记包裹起来

 $(“li”).wrap(“<i></i>”); // 每一个li 元素都会被一个i元素包裹

(2)wrapAll() 将所有匹配的元素用一个元素来包裹.

$(“li”).wrapAll(“<i></i>”); // 所有li 元素会被一个i元素包裹

八、属性操作

(1) attr() 方法用于设置和获取属性

格式：$(selector).attr(name|properties|key,value)

当该方法用于 获取 属性值时，则获取第一个匹配元素的值。
当该方法用于 设置 属性值时 ， 则为匹配元素集合设置一个或多个属性/ 值对
(2) prop() 方法用于设置和获取属性.
注:用attr(“checked”) 获取复选框checkbox 的checked 属性时，选中的
时候可以取到值为"checked" ，而没选中时获取值是undefined ，使用
prop() 方法获取属性则返回true 和false。 所以当涉及到复选框时应该使用prop().
(3) removeAttr() 方法，被选元素删除一个或多个属性，如需移除若干个属性，使用空格分隔属性名称。

格式：$(selector).removeAttr(name)