脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery知识快览之五―操作属性和结构，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 前文提到jquery提供了丰富的内置方法来操作对象集，本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法。
PRop还是attr?
从JQuery1.6版开始，新增了prop方法来获取和设置jquery对象的属性，这里的prop方法和attr方法究竟有什么区别呢？
要弄懂这个问题，我们首先要区别proPErty和attribute两个概念。property主要是针对DOM对象的，而attribute主要是针对HTML标签的。这样对prop和attr这两个方法来说，它们的区别主要在如下几个方面：
1.我们知道对于checkbox这个DOM对象来说，它必然有个选择状态，且它的选择状态只有两种，要么是选中状态，要么是非选中状态，所以不管什么时候我们用prop方法获取其checked值，都能获得一个确定的值，true或false，而对于checkbox的HTML表示来说，它可以简单的表示为<input type="checkbox"/>，这里你可以不用对checked属性赋值，这时，在用attr获取checked值时，其值将是undefined.
2.对于某些HTML标签属性，在DOM对象中将对应不同的属性名，比如<li class="highlight">,其attribute名是class，但是其property名却是classname.
3.用prop赋值将是针对其当前的状态赋值，而对于某些属性，attr则是赋予一个初始值。这样prop将永远能动态的改变checkbox的状态，而对某些浏览器来说，attr只能在checkbox被显示在页面上之前改变checked的初始状态，而之后则再也无法改变checked的状态。而且prop能永远获得checkbox的当前状态，而不管checkbox的当前状态如何，attr只能获得初始状态。
4.内置的DOM property不能被移出，而attribute可以。
操作属性
1.prop(name|name,value|name,function(index,oldprop))
2.attr(name|name,value|name,function(index,oldprop))
注意：尽量不要使用prop定义复杂的非内置的属性。当获取属性值时，prop和attr都只能获取对象集内第一个元素的属性。
3.removeProp(name)
4.removeAttr(name)
注意，尽量不要使用属性移除操作，而应该修改属性值
获取对象的内容
1.html([htmlstr]|function(index,oldhtml))
获取或设置对象集中对象的innerHtml
2.text([textstr]|function(index,oldtext))
获取或设置对象集中对象的文本。当对象集中有多个对象时，获取其文本，将把对象集中所有元素，其文本甚至是子孙节点的文本拼接在一起返回。
当设置文本时，若给定的文本串中含有html标签，将被转换。如$("li").text("<p>This is a test.</p>");的结果是得到如下内容
<li>
<p>This is a test.</p>
</li>
3.val([value]|function(index,oldvalue))
获取或设置checkbox,radio,select这类元素的值。
DOM文档操作
1.元素的插入
before(content[,content]|function(index))
将content元素插入对象集中对象的前面
after(content[,content]|function(index))
将content元素插入对象集中对象的后面
prepend(content[,content]|function(index))
将content元素插入对象集中对象的里面，作为其第一个子女
append(content[,content]|function(index))
将content元素插入对象集中对象的里面，作为其最后一个子女
insertBefore(target)
将对象集中的对象都插入target元素前面
insertAfter(target)
将对象集中的对象都插入target元素后面
insertAfter(target)
将对象集中的对象都插入target元素里面
prependTo(target)
将对象集中的对象都插入target元素里面，作为其第一个子女
appendTo(target)
将对象集中的对象都插入target元素里面，作为其最后一个子女
2.元素的替换
replaceWITh(conten|function)
用content来替换对象集中对象
replaceAll(target)
用对象集中所有对象来替换target元素，如果对象集中的对象在DOM文档中，这种替换会使原有对象从原来的位置被移除。
3.元素的删除
empty()
清空对象集中所有对象的子孙元素。
remove([selector])
删除对象集中的所有对象及其子孙元素，若有selector，则只删对象集中符合selector条件的对象及其子孙元素。
detach([selector])
功能和remove一样，只是detach会将被删的对象返回，如果你还需要用到这些对象则用detach。
4.其他操作
clone([withdataandevents] [,deepwithdataandevents])
复制对象集中的对象。
wrap(element|function(index))
用某元素将对象集中的对象分别包含起来。
unwrap()
将对象集中对象的父元素删除。
wrapAll(element)
用某元素将对象集中的所有对象包含起来
wrapInner(element|function(index))
将某元素分别放入对象集中的各对象中。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery知识快览之五―操作属性和结构全部内容，希望文章能够帮你解决javascript代码实例教程-JQuery知识快览之五―操作属性和结构所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。