JQuery快速学二(DOM操作)

Dom简介：

Dom是Document Object Model的编写，意为：文档对象模型；一个页面就是一个Dom模型，页面上的每一个元素组成Dom树，每一个元素就是Dom的节点，

例如：div、span、dl。Dom树的结构如下：

 

 

Dom操作解释：

Dom操作就是对Dom中的节点，元素(div、dl、dd、dt......)进行操作，例如对节点元素的选择，删除，移动等。

我们要对Dom中的节点元素进行操作，第一步就是获取到元素，通过第一章选择器的讲解，我们已经能够对页面中的元素进行灵活快捷的获取了，

这一章我们将讲解对获取到的这些元素进行一些高级的操作。

创建节点：

Dom节点的创建又可以分为两部分：

一：内部的插入(append()、appendTo()、prepend()、prependTo()、text()、html())

二：外部的插入(after()、before()、insertAfter()、insertBefore())

内部插入示例：

css代码：

h3{color:#930;}
span{color:#09F;}

Html代码：

<h3>你心目中 最想养的宠物是什麽？？？</h3>
<hr />
<span>奥特曼</span>

 

显示效果：

---

执行的代码：append();（append为添加的意思，append()方法是添加内容的方法）

$('h3').append('--->>添加的内容');//  添加内容“-->>添加的内容”到h3标签中

执行后效果：

 

执行后Dom变化：

<h3>你心目中 最想养的宠物是什麽？？？--->>添加的内容</h3>

 

 

---

执行的代码:appendTo();(appendTo为添加到的意思,appendTo()方法是添加元素的方法)

$('span').appendTo('h3');//     获取span的内容添加到h3元素中

 

执行后的效果：

执行后Dom变化：

<h3>你心目中 最想养的宠物是什麽？？？<span>奥特曼</span></h3>

 

---

执行的代码：prepend()(prepend为前置内容，prepend()方法是前置内容的方法)

$('h3').prepend('--->>前置的内容:');//获取h3，并在h3内容前置以下内容："--->>前置的内容:"

执行后的效果：

执行后的Dom变化：

<h3>--->>前置的内容:你心目中 最想养的宠物是什麽？？？</h3>

 

---

执行的代码：prependTo(prependTo为前置元素，prependTo()方法是前置元素的方法)

$('span').prependTo('h3');//获取span元素，追加到h3元素内部的前面

执行后的效果：

执行后的Dom变化：

<h3><span>奥特曼</span>你心目中 最想养的宠物是什麽？？？</h3>

---

总结一下Dom的内部添加方法：

append()方法和prepend()方法是添加内容的。

appendTo()方法和prependTo()方法是添加元素的。

append(),appendTo()和prepend(),prependTo()方法的区别：append的是添加内容或添加元素到目标内部的后面，prepend添加内容或添加元素到目标内部的前面

 

---

 Dom的外部插入：

执行的代码：after()(after方法，在匹配的元素后面添加内容)

$('h3').after('《外部插入的内容》');//获取h3元素，在h3元素后面追加内容"《外部插入的内容》"

执行后的效果：

执行后的Dom变化：

<h3>你心目中 最想养的宠物是什麽？？？</h3>

《外部插入的内容》

 

---

 

执行的代码：insertAfter()(insertAfter方法，把所有匹配的元素插入到另一个、指定的元素集合的后面。)

$('span').insertAfter('h3');//获取span,把span的内容添加到h3元素的后面去

执行后的效果：

执行后的Dom变化：

<h3>你心目中 最想养的宠物是什麽？？？</h3>

<span>奥特曼</span>

 

---

 执行的代码：before()(before方法，在每个匹配的元素之前插入内容)

$('h3').before('《外部插入的内容》');//获取h3元素，在h3元素前添加内容“《外部插入的内容》”

执行后的效果：

执行后的Dom变化：

《外部插入的内容》

<h3>你心目中 最想养的宠物是什麽？？？</h3>

 

---

 执行的代码：insertBefore()(insertBefore方法，把所有匹配的元素插入到另一个、指定的元素集合的前面。)

$('span').insertBefore('h3');//获取span元素，把span元素添加到h3元素前面

执行后的效果：

执行后的Dom变化：

<span>奥特曼</span>

<h3>你心目中 最想养的宠物是什麽？？？</h3>

 

---

总结Dom外部插入节点：

after(),和before()方法添加的是内容:例如：after('内容');

insertAfter()和insertBefore()方法添加的是元素。

after()和insertAfter()是添加内容或元素到目标元素外部的前面。before()和insertBefore()方法是添加内容或元素到目标元素外部的后面。

after(),before(),insertAfter(),insertBefore()方法添加的元素或是内容都是在目标元素的外部,append(),appendTo(),prepend(),prependTo()是添加元素或是内容到目标位置的内部

 

---

Dom包裹操作：

主要有以下几种操作：

1) wrap()：在每个匹配的元素外层包上一个html元素。

2) unwrap()：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

3) wrapAll()：在所有匹配元素外面包一层HTML结构。

4) wrapInner()：在匹配元素里的内容外包一层结构。

下面我们来详细讲解一下Dom的包裹操作：

css代码：

.box{border:1px solid blue;width:100px;height:100px;}
.box1{border:1px solid green;width:50px;height:50px;}

Html代码：

<div class="box"></div>
<p>Hello</p>

初始预览效果：

---

 执行的代码：wrap(),wrap有三种语法：wrap(内容),wrap(元素),wrap(fn函数)

$('.box').wrap("<div class='box1'></div>");//获取.box元素，用内容"<div class='box1'></div>"对.box元素进行包裹
$('p').wrap($('.box'));//获取p元素，用元素.box进行包裹
$('p').wrap(function() {//生成包裹结构的一个函数,里面编写生成包裹结构的逻辑
            return "<div class='"+$(this).text()+" box'/>";
});

执行后的效果：

第一段代码效果图：第二和第三段代码的效果图：

执行后的Dom变化：

第一句：<div class="box1"><div class="box"></div></div>

第二句：<div class="box"><p>Hello</p></div>

第三句：<div class="Hello box"><p>Hello</p></div>

 

---

执行的代码：unwrap()快速取消父元素

Html代码

<div>
    <p>Hello</p>
    <p>unwrap</p>
    <p>World</p>
</div>

JQ代码：

$('p').unwrap();

 

执行后的Dom变化：

<p>Hello</p>

<p>unwrap</p>

<p>World</p>

 

---

最后我们再来讲一讲Dom的删除

主要有以下三种操作：empty(),remove(),detach()

 

html代码：

<h3>你心目中 最想养的宠物是什麽？？</h3>
<span>奥特曼</span>

 

执行的代码：empty()删除匹配的元素集合中所有的子节点

$('span').empty();

执行后的Dom变化：

<span></span>

 

---

执行的代码：

remove()从DOM中删除所有匹配的元素,除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

detach()从DOM中删除所有匹配的元素,与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$('h3').click(function(){
	alert("aa");
})
var h3 = $('h3').remove();
//var h3 = $('h3').detach();
$('body').append(h3);

 

执行后的结果解释：

1)一开始我们为h3元素绑定了一个点击事件(事件将会在下一章讲到),然后我们对h3这个元素采用remove()方法进行删除，

删除的同时用一个变量进行保存这个对象，删除完毕之后，我们再将其添加到页面的body中。现在我们点击页面中的h3内容，并没有alert()弹出aa。这是因为remove删除了绑定的事件。

 

2)我们再来看看detach()方法，在删除的时候我们注释掉remove方法，用detach进行删除，删除之后还是把对象添加回body中，然后我们再来点击一下页面中的h3内容，发现弹出了aa。

这就证明了，detach方法是没有删除元素绑定的事件的。

 

---

JQuery Dom操作就讲解到这里,Dom的操作还有一些方法在此没有全部讲完，为的是让大家有个思考和练习。

好了下面布置一下课后作业：

1)实现Dom的替换操作(replaceWith(),replaceAll()),

2)Dom的包裹操作(wrapAll(),wrapInner())

3)还有Dom的复制操作(clone())

 

本章案例代码：下载

如果各位对本博客有什么意见或是建议，恳请各位多多留言。