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的问题。
这些东西,比较枯燥,得多试验才能得到真正的结果。