【jQuery之路】03.1 jQuery中的DOM操作

目录

 

DOM操作的分类

jQuery中的DOM操作

1、查找节点

2、创建节点。

3、插入节点。

4、删除节点。

6、替换节点。

7、包裹节点

---

DOM操作的分类

DOM操作分为3各方面，DOM Core（核心）、HTML-DOM和CSS-DOM。

jQuery中的DOM操作

jQuery中的DOM操作主要体现在查找节点、创建节点、插入节点、删除节点、复制节点、替换节点以及包裹节点

1、查找节点

有两个应用的方面

①查找元素的节点（获取元素节点的文本内容并把它打印出来）

<p title="选择你喜欢的颜色。">选择你喜欢的颜色。</p>
<ul>
	<li>红色</li>
	<li>黄色</li>
	<li>蓝色</li>
</ul>
<script type="text/javascript">
	var $li = $("ul li:eq(1)");
	var li_txt = $li.text();
	alert(li_txt);
</script>

②查找属性节点。

使用attr()方法来获取属性节点，用法如下：

<p title="选择你喜欢的颜色。">选择你喜欢的颜色。</p>
<ul>
	<li title="red">红色</li>
	<li title="yellow">黄色</li>
	<li title="bule">蓝色</li>
</ul>
<script type="text/javascript">
	var $li = $("ul li:eq(1)");
	var li_title = $li.attr("title");
	alert(li_title);
</script>

2、创建节点。

创建元素节点以及创建文本节点应用：将两个新创建的<li>元素添加到<ul>节点中。

<p title="选择你喜欢的颜色。">选择你喜欢的颜色。</p>
<ul>
	<li title="red">红色</li>
	<li title="yellow">黄色</li>
	<li title="bule">蓝色</li>
</ul>
<script type="text/javascript">
	var $li_1 = $("<li>111</li>");//创建元素节点、文本节点
	var $li_2 = $("<li>222</li>");
	$("ul").append($li_1);添加元素节点、文本节点
	$("ul").append($li_2);
</script>

在这里可以使用链式写法：

$("ul").append($li_1).append($li_2);//链式写法

特别注意写法：可以用$("<p/>")或者$("<p></p>")，但是千万要注意不要用$("<p>")或者是大写的$("<P/>")！

在这里还有一种创建属性节点，其实很简单，直接在想要添加的地方写上就行

var $li_1 = $("<li title='111'>111</li>");//创建元素节点、文本节点、属性节点

3、插入节点。

append()与appendTo()

prepend()与prependTo()

after()与insertAfter()

before()与insertBefore()

4、删除节点。

①、remove()方法。

$("ul li:eq(1)").remove();//获取第2个<li>元素节点后，将它从网页中删除。

虽然现在第二个元素节点已经不在了，但是但我们再次引用它的时候还是可以再次使用的

<p title="选择你喜欢的颜色。">选择你喜欢的颜色。</p>
<ul>
	<li title="red">红色</li>
	<li title="yellow">黄色</li>
	<li title="bule">蓝色</li>
</ul>
<script type="text/javascript">
	var $li = $("ul li:eq(0)").remove();
	$li.appendTo("ul");
</script>

                                              →_→                                                 

②detach()方法。

detach()方法与remove()方法一样，但是remove()方法在删除后，所与之相绑定的事件将会消失，因此删除元素节点后，相应的事件将不能够再次被使用。

而detach()则是可以的，也就是说，重新追加被删除的元素，发现它之前绑定的事件还在。

③empty()方法。

empty()方法不是用来删除节点的，而是来清空节点的，原来的节点依然存在。

var $li = $("ul li:eq(0)").empty();

 

5、复制节点。

var $li_4 = $("ul li:eq(0)").clone().appendTo("ul");

强调：这里被复制的元素节点不具备源节点的任何行为，因此需要做以下操作：clone(true)；

var $li_4 = $("ul li:eq(0)").clone(true).appendTo("ul");

6、替换节点。

replaceWith()。

$("p").replaceWith("<h1>这是h1</h1>");

replaceAll()。

$("<h1>这是h1</h1>").replaceAll("p");

7、包裹节点

相关文章请看【jQuery之路】03.2 wrapAll()方法将同个元素汇集——包裹节点

8、相关的属性操作。

9、样式操作。

10、设置和获取HTML、文本的值。

11、遍历节点。

12、CSS-DOM操作。