替换HTML或文本内容
语法:html()
功能:获取匹配集里第一个元素的HTML内容。
返回:第一个已匹配元素的HTML内容。
语法:html(text)
功能:把传入的HTML片段设置为所有匹配元素的内容。
参数 text:(字符串)将被设置为元素内容的HTML片段。
返回:包装集。
语法:text()
功能:把包装集里元素的所有文本内容连接起来,并返回字符串作为命令的结果。
返回:连接而民的字符串。
语法:text(content)
功能:把所有已包装元素的文本内容设置为已传递值。如果已传递文本包含“<”或“>”,则这些字符被替换为等价的HTML实体。
参数 content:(字符串)将要设置到已包装元素里的文本内容。
返回:包装集。
注意:用这些命令来设置元素的内部HTML或文本,将替换元素里的原先内容。
移动和复制元素
语法:append(content)
功能:把传入的HTML片段或元素追加到所有已匹配内容之后。
参数 content:(字符串、元素、对象)将被追加到包装集各元素的一个字符串、元素或包装集对象。
返回:包装集。
例1:从传入的字符串创建HTML片段,追加到所有<p>元素的现有内容的末尾。
$('p').append('<b>some text</b>');
例2:标识DOM现有元素作为追加项。
$('p#appendToMe').append($('a.appendMe'));
注意:对原始元素的布置取决于作为追加目标的元素的数量。如果是单一的目标,则元素从原始位置删除(即,执行把原始元素移动到新父元素的操作)。如果有多个目标,则原始元素留在原处,而原始元素的副本被追加到各个目标元素(即,复制操作)。
如果不想追加整个包装集,也可以引用一个特定DOM元素,例如:
var toAppend = $('a.appendMe')[0]; $('p#appendToMe').append(toAppend);
语法:appendTo(target)
功能:把包装集里所有元素移动到指定目标的内容的末尾。
参数 target:(字符串、元素)一个包含jQuery选择器的字符串,或一个DOM元素。包装集各元素将追加到target所指定的那个位置。如果多个元素与一个选择器字符串匹配,则包装集各元素将被复制到与选择器匹配的每个元素。
返回:包装集。
工作方式类似的相关命令
- prepend(content) 和 prependTo(target):在目标元素的内容之前插入源元素。
- before(content) 和 insertBefore(target):在目标元素之前插入元素,而不是在目标元素的第一个子元素之前。
- after(content) 和 insertAfter(target):在目标元素之后插入元素,而不是在目标元素的最后一个子元素之后。
包裹元素
语法:wrap(wrapper)
功能:把匹配集各元素用已传递HTML标签或已传递元素的克隆副本分别包裹起来。
参数 wrapper:(字符串、元素)用于包裹匹配集各元素的元素开始和结束标签;或者一个将被克隆且用作包裹器的元素。
返回:包装集。
例如:把带有surprise类链接包裹在div元素中。
$('a.surprise').wrap('<div></div>');
注意:若多个元素被收集于匹配集,则该方法分别操作其中的每个元素。
语法:wrapAll(wrapper)
功能:用已传递元素的克隆副本或已传递HTML标签,把匹配集的元素作为一个单元包裹起来。
参数 wrapper:(字符串、元素)用于包裹匹配集所有元素的元素开始和结束标签,或一个将被克隆且用作包裹器的元素。
返回:包装集。
语法:wrapInner(wrapper)
功能:用已传递元素的克隆副本或已传递HTML标签,把匹配集各元素的内容(包括文本节点)分别包裹起来。
参数 wrapper:(字符串、元素)用于包裹匹配集各元素的元素开始和结束标签;或者一个将被克隆且用作包裹器的元素。
返回:包裹集。
删除元素
语法:remove()
功能:从页面DOM里删除包装集里所有元素。
返回:包装集。
注意:从DOM里删除的元素仍然被该包装集引用着(因此不符合垃圾回收条件),并可用其他jQuery命令来进一步操作,包括appendTo()、prependTo()、insertBefore()、insertAfter()等。
语法:empty()
功能:清空匹配集里所有DOM元素的内容。
返回:包装集。
利用remove()和after()命令来实现替换操作,如下:
$.fn.replaceWith = function(html) { return this.after(html).remove(); } $('div.elementToReplace').replaceWith('<p>替换成我。</p>');
克隆元素
语法:clone(copyHandlers)
功能:创建包装集里元素的副本,并返回包含这些副本的新包装集。元素以及任何后代元素都被复制。事件处理程序是否被复制,取决于参数copyHandlers的设置。
参数 copyHandlers:(boolean)若为true,复制事件处理程序;若为false或省略,则不复制。
返回:新创建的包装集。