现在的位置: 首页 > 综合 > 正文

JQuery快速学二(DOM操作)

2013年07月06日 ⁄ 综合 ⁄ 共 4127字 ⁄ 字号 评论关闭
文章目录

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())

 

本章案例代码:下载

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

 

【上篇】
【下篇】

抱歉!评论已关闭.