JQuery之五:操作元素内容

前面已经介绍了如何操作元素的properties&attributes 以及 CSS styles,这节来看看如何操作元素的内容。

获取或替换html及text内容

1. 使用html()方法

1) 不带参数的html()

获取wrapped set中的第一个元素的html内容,等同于调用这个元素的innerHTML属性。

2) 带参数的html(value) 

使用value指定的html设置wrapped set中所有元素的html内容。返回wrapped set以便jQuery链式操作。

2. 使用text()方法

1) 不带参数的text()

获取wrapped set中第一个元素的text内容。

2) text(value)

用value指定的text设置wrapped set中所有元素的text内容。如果text中包含<>这样的字符,会被自动转换为HTML entities(  & #60; 和 & #62;)。

返回wrapped set以便进行jQuery链式操作。

移动或者拷贝元素内容

1. 使用target.append(content)方法

前面的这个target是为了表明target是是添加动作的目标(以便跟后面的appendto(target)方法区别), target是一个wrapped set。

content可以是(String|Element|Object) 中的任何一个,也就是:

--包含html标签的string

--DOM elment

--Object可以是一个$()筛选的wrapped set

特别需要注意:content是被移动或者拷贝取决于target,如果target只有一个element则是移动,如果target是一堆elements则是拷贝。如果想在target是一个element时拷贝的话就不能这么玩了,应该如下:

$('p:first').append($('image.moveme').clone());

2. 使用content.appendTo(target)方法

将wrapped set移动(target是单个元素)或拷贝(target是多个元素)到target所指示的wrapped set中(最后一个子元素之后)。

target可以是一个表示jQuery selector的字符串或者一个DOM element。

3. 其他类似方法

1) target.prepend(content) 或 content.perpendTo(target)

将content表示的元素(或集合)移动或拷贝到target的第一个子元素之前。

2) target.before(content) 或 content.insertBefore(target)

将content表示的元素(或集合)移动或拷贝到target之前(而不是作为子元素)

3) target.after(content) 或 content.insertAfter(target)

将content表示的元素(或集合)移动或拷贝到target之后。

这些方法都遵循上述target单复数的移动或拷贝原则。

包裹元素

1. 使用wrap(wrapper)

使用wrapper包裹每一个wrapped set中的元素并返回原来的wrapped set。

wrapper可以是一个html字符串或者是一个元素的copy,可不是将wrapped set移动到wrapper里面哦,那是appendTo的功效。

2. 使用wrapAll(wrapper)

将wrapped set作为一个整体用wrapper包裹,并返回原来的wrapped set。

移出元素

1. 使用remove()方法

从DOM中移除wrapped set。返回原来的wrapped set。

使用这个方法可以弥补appendTo(),prependTo(),insertBefore(),insertAfter()方法对于多个元素组成的target只能copy的影响,可以结合起来进行move动作,比如:

$('.divToMove').appendTo($('.divContainer')).remove(); //页面有多个class名称为divContainer的元素

2. 使用empty()方法

移除wrapped set中每个元素的内容(而不是元素本身)。返回empty后的wrapped set(试验证明的,跟remove的确不同)。

克隆元素

使用clone(copyHandlers) 方法

生成wrapped set的一个拷贝,并返回这个拷贝。wrapped set中元素的子元素也会被拷贝,如果包含有事件处理绑定,则由copyHandlers(true|false)判断是否一起拷贝。

前面已经给出用clone()方法弥补target只包含一个元素只能move的问题。

 

这些东西,比较枯燥,得多试验才能得到真正的结果。

posted @ 2008-10-30 23:36  sayo.net  阅读(...)  评论(... 编辑 收藏