JQuery知识快览之五—操作属性和结构 prop还是attr? 操作属性 获取对象的内容 DOM文档操作

前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法。

从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>
&lt;p&gt;This is a test.&lt;/p&gt;
</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))

将某元素分别放入对象集中的各对象中。