JQuery快速学二(DOM操作)
2013-06-28 16:45
344 查看
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为添加到的意思,[b]appendTo()方法是添加元素的方法)[/b]
$('span').appendTo('h3');// 获取span的内容添加到h3元素中
执行后的效果:
执行后Dom变化:
<h3>你心目中 最想养的宠物是什麽???<span>奥特曼</span></h3>
执行的代码:prepend()(prepend为前置内容,prepend[b]()方法是前置内容的方法)[/b]
$('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())
本章案例代码:下载
如果各位对本博客有什么意见或是建议,恳请各位多多留言。
相关文章推荐
- js/jQuery对象互转(快速操作dom元素)
- JQuery快速学二(DOM操作)
- jQuery快速入门基础教程之jQuery操作DOM(四)
- js/jQuery对象互转(快速操作dom元素)
- [原创] jQuery源码分析-12 DOM操作-Manipulation-核心函数.domManip()
- ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作
- 3.2.7: jQuery的DOM操作之包裹节点
- 《jQuery从入门到精通》第十三节 使用jQuery操作DOM
- jquery中的DOM操作
- jquery中DOM节点操作(二)
- 每天学点JQuery(2)—DOM操作
- jQuery学习笔记[1] jQuery中的DOM操作
- JQuery(DOM操作)
- jQuery学习笔记之 Dom 操作 append、prepend、after、before、appendTo
- jQuery中的DOM操作
- JQUERY中CSS-DOM操作的css()的注意
- jQuery事件及DOM操作实例
- 锋利的jQuery-第三章 jQuery中的DOM操作
- jQuery的DOM操作实例(3)——创建节点&&编写一个弹窗
- JQuery操作DOM总结