jQuery 设置 元素内容
替换HTML或文本内容
语法:html()
功能:获取匹配集里第一个元素的HTML内容。
返回:第一个已匹配元素的HTML内容。
语法:html(text)
功能:把传入的HTML片段设置为所有匹配元素的内容。
参数 text:(字符串)将被设置为元素内容的HTML片段。
返回:包装集。
语法:text()
功能:把包装集里元素的所有文本内容连接起来,并返回字符串作为命令的结果。
返回:连接而民的字符串。
语法:text(content)
功能:把所有已包装元素的文本内容设置为已传递值。如果已传递文本包含“<”或“>”,则这些字符被替换为等价的HTML实体。
参数 content:(字符串)将要设置到已包装元素里的文本内容。
返回:包装集。
移动和复制元素
语法: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里删除包装集里所有元素。
返回:包装集。
语法: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或省略,则不复制。
返回:新创建的包装集。