1.列表
jQuery 文档操作方法
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
方法 | 描述 |
---|---|
addClass() | 向匹配的元素添加指定的类名。 |
after() | 在匹配的元素之后插入内容。 |
append() | 向匹配的元素内部追加内容。 |
appendTo() | 向匹配的元素内部追加内容。 |
attr() | 设置或返回匹配元素的属性和值。 |
before() | 在每个匹配的元素之前插入内容。 |
clone() | 创建匹配元素集合的副本。 |
detach() | 从 DOM 中移除匹配元素集合。 |
empty() | 删除匹配的元素集合中所有的子节点。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
prepend() | 向每个匹配的元素内部前置内容。 |
prependTo() | 向每个匹配的元素内部前置内容。 |
remove() | 移除所有匹配的元素。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
replaceAll() | 用匹配的元素替换所有匹配到的元素。 |
replaceWith() | 用新内容替换匹配的元素。 |
text() | 设置或返回匹配元素的内容。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
unwrap() | 移除并替换指定元素的父元素。 |
val() | 设置或返回匹配元素的值。 |
wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 |
wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
2.jQuery 属性操作 - addClass() 方法
实例
向第一个 p 元素添加一个类:
$("button").click(function(){
$("p:first").addClass("intro")
;
});
定义和用法
addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
提示:如需添加多个类,请使用空格分隔类名。
语法
$(selector).addClass(class)
参数 | 描述 |
---|---|
class | 必需。规定一个或多个 class 名称。 |
使用函数来添加类
使用函数向被选元素添加类。
语法
$(selector).addClass(function(index,oldclass))
参数 | 描述 |
---|---|
function(index,oldclass) | 必需。规定返回一个或多个待添加类名的函数。
|
3.jQuery 文档操作 - after() 方法
实例
在每个 p 元素后插入内容:
$("button").click(function(){
$("p").after("<p>Hello world!</p>")
;
});
定义和用法
after() 方法在被选元素后插入指定的内容。
语法
$(selector).after(content)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
4.jQuery 文档操作 - append() 方法
实例
在每个 p 元素结尾插入内容:
$("button").click(function(){
$("p").append(" <b>Hello world!</b>")
;
});
定义和用法
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。
提示:append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容的位置和选择器。
语法
$(selector).append(content)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
使用函数来附加内容
使用函数在指定元素的结尾插入内容。
语法
$(selector).append(function(index,html))
参数 | 描述 |
---|---|
function(index,html) | 必需。规定返回待插入内容的函数。
|
5.jQuery 文档操作 - appendTo() 方法
实例
在每个 p 元素结尾插入内容:
$("button").click(function(){
$("<b>Hello World!</b>").appendTo("p")
;
});
定义和用法
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
提示:append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。
语法
$(content).appendTo(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
selector | 必需。规定把内容追加到哪个元素上。 |
6
实例
改变图像的 width 属性:
$("button").click(function(){
$("img").attr("width","180")
;
});
定义和用法
attr() 方法设置或返回被选元素的属性值。
根据该方法不同的参数,其工作方式也有所差异。
返回属性值
返回被选元素的属性值。
语法
$(selector).attr(attribute)
参数 | 描述 |
---|---|
attribute | 规定要获取其值的属性。 |
设置属性/值
设置被选元素的属性和值。
语法
$(selector).attr(attribute,value)
参数 | 描述 |
---|---|
attribute | 规定属性的名称。 |
value | 规定属性的值。 |
使用函数来设置属性/值
设置被选元素的属性和值。
语法
$(selector).attr(attribute,function(index,oldvalue))
参数 | 描述 |
---|---|
attribute | 规定属性的名称。 |
function(index,oldvalue) | 规定返回属性值的函数。 该函数可接收并使用选择器的 index 值和当前属性值。 |
设置多个属性/值对
为被选元素设置一个以上的属性和值。
语法
$(selector).attr({attribute:value, attribute:value ...})
参数 | 描述 |
---|---|
attribute:value | 规定一个或多个属性/值对。 |
7.jQuery 文档操作 - before() 方法
实例
在每个 p 元素前插入内容:
$("button").click(function(){
$("p").before("<p>Hello world!</p>")
;
});
定义和用法
before() 方法在被选元素前插入指定的内容。
语法
$(selector).before(content)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
使用函数来插入内容
使用函数在指定的元素前面插入内容。
语法
$(selector).before(function(index))
参数 | 描述 |
---|---|
function(index) | 必需。规定返回待插入内容的函数。
|
8.jQuery 文档操作 - clone() 方法
实例
克隆并追加一个 p 元素:
$("button").click(function(){
$("body").append($("p").clone())
;
});
定义和用法
clone() 方法生成被选元素的副本,包含子节点、文本和属性。
语法
$(selector).clone(includeEvents)
参数 | 描述 |
---|---|
includeEvents | 可选。布尔值。规定是否复制元素的所有事件处理。 默认地,副本中不包含事件处理器。 |
9.jQuery 文档操作 - detach() 方法
实例
移除所有 p 元素:
$("button").click(function(){
$("p").detach()
;
});
定义和用法
detach() 方法移除被选元素,包括所有文本和子节点。
这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。
detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
语法
$(selector).detach()
10.jQuery 文档操作 - empty() 方法
实例
移除 p 元素的内容:
$(".btn1").click(function(){
$("p").empty()
;
});
定义和用法
empty() 方法从被选元素移除所有内容,包括所有文本和子节点。
语法
$(selector).empty()
11.jQuery 属性操作 - hasClass() 方法
实例
检查第一个 <p> 元素是否包含 "intro" 类:
$("button").click(function(){
alert($("p:first").hasClass("intro")
);
});
定义和用法
hasClass() 方法检查被选元素是否包含指定的 class。
语法
$(selector).hasClass(class)
参数 | 描述 |
---|---|
class | 必需。规定需要在指定元素中查找的类。 |
12.jQuery 文档操作 - html() 方法
实例
设置所有 p 元素的内容:
$(".btn1").click(function(){
$("p").html("Hello <b>world</b>!")
;
});
定义和用法
html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数,则返回被选元素的当前内容。
返回元素内容
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。
语法
$(selector).html()
设置元素内容
当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。
语法
$(selector).html(content)
参数 | 描述 |
---|---|
content | 可选。规定被选元素的新内容。该参数可包含 HTML 标签。 |
使用函数来设置元素内容
使用函数来设置所有匹配元素的内容。
语法
$(selector).html(function(index,oldcontent))
参数 | 描述 |
---|---|
function(index,oldcontent) | 规定一个返回被选元素的新内容的函数。
|
13.jQuery 文档操作 - insertAfter() 方法
实例
在每个 p 元素之后插入 span 元素:
$("button").click(function(){ $("<span>Hello world!</span>").insertAfter("p"); });
定义和用法
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。
语法
$(content).insertAfter(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容。可能的值:
|
selector | 必需。规定在何处插入被选元素。 |
14.jQuery 文档操作 - insertBefore() 方法
实例
在每个 p 元素之前插入 span 元素:
$("button").click(function(){ $("<span>Hello world!</span>").insertBefore("p"); });
定义和用法
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之前。
语法
$(content).insertBefore(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容。可能的值:
|
selector | 必需。规定在何处插入被选元素。 |
15.jQuery 文档操作 - prepend() 方法
实例
在 p 元素的开头插入内容:
$(".btn1").click(function(){
$("p").prepend("<b>Hello world!</b>")
;
});
定义和用法
prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。
提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。
语法
$(selector).prepend(content)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
使用函数来附加内容
使用函数在被选元素的开头插入指定的内容。
语法
$(selector).prepend(function(index,html))
参数 | 描述 |
---|---|
function(index,html) | 必需。规定返回待插入内容的函数。
|
16.jQuery 文档操作 - prependTo() 方法
实例
在每个 p 元素的开头插入内容:
$(".btn1").click(function(){
$("<b>Hello World!</b>").prependTo("p")
;
});
定义和用法
prependTo() 方法在被选元素的开头(仍位于内部)插入指定内容。
提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prepend() 能够使用函数来插入内容。
语法
$(content).prependTo(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
selector | 必需。规定在何处插入内容。 |
17.jQuery 文档操作 - remove() 方法
实例
移除所有 <p> 元素:
$("button").click(function(){
$("p").remove()
;
});
定义和用法
remove() 方法移除被选元素,包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。
语法
$(selector).remove()
18.jQuery 属性操作 - removeAttr() 方法
实例
从任何 p 元素中移除 id 属性:
$("button").click(function(){
$("p").removeAttr("id")
;
});
定义和用法
removeAttr() 方法从被选元素中移除属性。
语法
$(selector).removeAttr(attribute)
参数 | 描述 |
---|---|
attribute | 必需。规定从指定元素中移除的属性。 |
19.jQuery 属性操作 - removeClass() 方法
实例
移除所有 <p> 的 "intro" 类:
$("button").click(function(){
$("p:first").removeClass("intro")
;
});
定义和用法
removeClass() 方法从被选元素移除一个或多个类。
注释:如果没有规定参数,则该方法将从被选元素中删除所有类。
语法
$(selector).removeClass(class)
参数 | 描述 |
---|---|
class | 可选。规定要移除的 class 的名称。 如需移除若干类,请使用空格来分隔类名。 如果不设置该参数,则会移除所有类。 |
使用函数来移除类
使用函数来删除被选元素中的类。
$(selector).removeClass(function(index,oldclass))
参数 | 描述 |
---|---|
function(index,oldclass) | 必需。通过运行函数来移除指定的类。
|
20.jQuery 文档操作 - replaceAll() 方法
实例
用粗体文本替换每个段落:
$(".btn1").click(function(){
$("p").replaceAll("<b>Hello world!</b>")
;
});
定义和用法
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。
提示:replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。
语法
$(content).replaceAll(selector)
参数 | 描述 |
---|---|
content | 必需。规定替换被选元素的内容。 可能的值:
已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
selector | 必需。规定要替换的元素。 |
21.jQuery 文档操作 - replaceWith() 方法
实例
用粗体文本替换每个段落:
$(".btn1").click(function(){ $("p").replaceWith("<b>Hello world!</b>"); });
定义和用法
replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。
提示:replaceWith() 与 replaceAll() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceAll() 无法使用函数进行替换。
语法
$(selector).replaceWith(content)
参数 | 描述 |
---|---|
content | 必需。规定替换被选元素的内容。 可能的值:
已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
selector | 必需。规定要替换的元素。 |
使用函数来替换元素
使用函数把被选元素替换为新内容。
语法
$(selector).replaceWith(function())
参数 | 描述 |
---|---|
function() | 必需。返回待替换被选元素的新内容的函数。 |
22.jQuery 文档操作 - text() 方法
实例
设置所有 <p> 元素的内容:
$(".btn1").click(function(){
$("p").text("Hello <b>world</b>!");
});
定义和用法
text() 方法方法设置或返回被选元素的文本内容。
返回文本内容
当该方法用于返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记)。
语法
$(selector).text()
设置文本内容
当该方法用于设置值时,它会覆盖被选元素的所有内容。
$(selector).text(content)
参数 | 描述 |
---|---|
content | 规定被选元素的新文本内容。注释:特殊字符会被编码。 |
使用函数设置文本内容
使用函数设置所有被选元素的文本内容。
语法
$(selector).text(function(index,oldcontent))
参数 | 描述 |
---|---|
function(index,oldcontent) | 必需。规定返回被选元素的新文本内容的函数。
|
23.jQuery 属性操作 - toggleClass() 方法
实例
对设置和移除所有 <p> 元素的 "main" 类进行切换:
$("button").click(function(){
$("p").toggleClass("main")
;
});
定义和用法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
语法
$(selector).toggleClass(class,switch)
参数 | 描述 |
---|---|
class | 必需。规定添加或移除 class 的指定元素。 如需规定若干 class,请使用空格来分隔类名。 |
switch | 可选。布尔值。规定是否添加或移除 class。 |
使用函数来切换类
$(selector).toggleClass(function(index,class),switch)
参数 | 描述 |
---|---|
function(index,class) | 必需。规定返回需要添加或删除的一个或多个类名的函数。
|
switch | 可选。布尔值。规定是否添加(true)或移除(false)类。 |
24.jQuery 文档操作 - unwrap() 方法
实例
删除所有 <p> 元素的父元素:
$("button").click(function(){
$("p").unwrap();
});
定义和用法
unwrap() 方法删除被选元素的父元素。
语法
$(selector).unwrap()
25.jQuery 属性操作 - val() 方法
实例
设置输入域的值:
$("button").click(function(){
$(":text").val("Hello World")
;
});
定义和用法
val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数,则返回被选元素的当前值。
语法
$(selector).val(value)
参数 | 描述 |
---|---|
value | 可选。规定被选元素的新内容。 |
返回 Value 属性
返回第一个匹配元素的 value 属性的值。
语法
$(selector).val()
设置 Value 属性的值
$(selector).val(value)
参数 | 描述 |
---|---|
value | 设置 Value 属性的值。 |
使用函数设置 Value 属性的值
$(selector).val(function(index,oldvalue))
参数 | 描述 |
---|---|
function(index,oldvalue) | 规定返回要设置的值的函数。
|
26.jQuery 文档操作 - wrap() 方法
实例
在 <div> 元素中包裹每个段落:
$(".btn1").click(function(){
$("p").wrap("<div></div>")
;
});
定义和用法
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
语法
$(selector).wrap(wrapper)
参数 | 描述 |
---|---|
wrapper | 必需。规定包裹被选元素的内容。 可能的值:
已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
使用函数来包裹元素
使用函数来规定在每个被选元素周围包裹的内容。
语法
$(selector).wrap(function())
参数 | 描述 |
---|---|
function() | 必需。规定返回包裹元素的函数。 |
27.jQuery 文档操作 - wrapAll() 方法
实例
在 <div> 中包裹所有段落:
$(".btn1").click(function(){
$("p").wrapAll("<div></div>")
;
});
定义和用法
wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
语法
$(selector).wrapAll(wrapper)
参数 | 描述 |
---|---|
wrapper | 必需。规定包裹被选元素的内容。 可能的值:
已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
28.jQuery 文档操作 - wrapInner() 方法
实例
在每个 p 元素的内容上包围 b 元素:
$(".btn1").click(function(){
$("p").wrapInner("<b></b>")
;
});
定义和用法
wrapInner() 方法使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML)。
语法
$(selector).wrapInner(wrapper)
参数 | 描述 |
---|---|
wrapper | 必需。规定包围在被选元素的内容周围的内容。 可能的值:
已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
使用函数包裹内容
使用函数来规定包围在每个被选元素周围的内容。
语法
$(selector).wrapInner(function())
参数 | 描述 |
---|---|
function() | 必需。规定返回包围元素的函数。 |