jquery文档操作

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)

必需。规定返回一个或多个待添加类名的函数。

• index - 可选。选择器的 index 位置。
• class - 可选。选择器的旧的类名。

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)

必需。规定返回待插入内容的函数。

• index - 可选。接收选择器的 index 位置。
• html - 可选。接收选择器的当前 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)

必需。规定返回待插入内容的函数。

• index - 可选。接收选择器的 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)

规定一个返回被选元素的新内容的函数。

• index - 可选。接收选择器的 index 位置。
• oldcontent - 可选。接收选择器的当前内容。

13.jQuery 文档操作 - insertAfter() 方法

实例

在每个 p 元素之后插入 span 元素：

$("button").click(function(){  $("<span>Hello world!</span>").insertAfter("p");});

定义和用法

insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。

注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

语法

$(content).insertAfter(selector)

参数描述content

必需。规定要插入的内容。可能的值：

• 选择器表达式
• HTML 标记

selector必需。规定在何处插入被选元素。

14.jQuery 文档操作 - insertBefore() 方法

实例

在每个 p 元素之前插入 span 元素：

$("button").click(function(){  $("<span>Hello world!</span>").insertBefore("p");});

定义和用法

insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。

注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。

语法

$(content).insertBefore(selector)

参数描述content

必需。规定要插入的内容。可能的值：

• 选择器表达式
• HTML 标记

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)

必需。规定返回待插入内容的函数。

• index - 可选。接受选择器的 index 位置。
• html - 可选。接受选择器的当前 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)

必需。通过运行函数来移除指定的类。

• index - 可选。接受选择器的 index 位置。
• html - 可选。接受选择器的旧的类值。

20.jQuery 文档操作 - replaceAll() 方法

实例

用粗体文本替换每个段落：

$(".btn1").click(function(){   $("p").replaceAll("<b>Hello world!</b>");});

定义和用法

replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。

提示：replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

语法

$(content).replaceAll(selector)

参数描述content

必需。规定替换被选元素的内容。

可能的值:

• HTML 代码 - 比如 ("<div></div>")
• 新元素 - 比如 (document.createElement("div"))
• 已存在的元素 - 比如 ($(".div1"))

已存在的元素不会被移动，只会被复制，并包裹被选元素。

selector必需。规定要替换的元素。

21.jQuery 文档操作 - replaceWith() 方法

实例

用粗体文本替换每个段落：

$(".btn1").click(function(){   $("p").replaceWith("<b>Hello world!</b>");});

定义和用法

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。

提示：replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。

语法

$(selector).replaceWith(content)

参数描述content

必需。规定替换被选元素的内容。

可能的值:

• HTML 代码 - 比如 ("<div></div>")
• 新元素 - 比如 (document.createElement("div"))
• 已存在的元素 - 比如 ($(".div1"))

已存在的元素不会被移动，只会被复制，并包裹被选元素。

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)

必需。规定返回被选元素的新文本内容的函数。

• index - 可选。接受选择器的 index 位置。
• html - 可选。接受选择器的当前内容。

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)

必需。规定返回需要添加或删除的一个或多个类名的函数。

• index - 可选。接受选择器的 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)

规定返回要设置的值的函数。

• index - 可选。接受选择器的 index 位置。
• oldvalue - 可选。接受选择器的当前 Value 属性。

26.jQuery 文档操作 - wrap() 方法

实例

在 <div> 元素中包裹每个段落：

$(".btn1").click(function(){   $("p").wrap("<div></div>");});

定义和用法

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

语法

$(selector).wrap(wrapper)

参数描述wrapper

必需。规定包裹被选元素的内容。

可能的值:

• HTML 代码 - 比如 ("<div></div>")
• 新元素 - 比如 (document.createElement("div"))
• 已存在的元素 - 比如 ($(".div1"))

已存在的元素不会被移动，只会被复制，并包裹被选元素。

使用函数来包裹元素

使用函数来规定在每个被选元素周围包裹的内容。

语法

$(selector).wrap(function())

参数描述function()必需。规定返回包裹元素的函数。

27.jQuery 文档操作 - wrapAll() 方法

实例

在 <div> 中包裹所有段落：

$(".btn1").click(function(){   $("p").wrapAll("<div></div>");});

定义和用法

wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。

语法

$(selector).wrapAll(wrapper)

参数描述wrapper

必需。规定包裹被选元素的内容。

可能的值:

• HTML 代码 - 比如 ("<div></div>")
• 新的 DOM 元素 - 比如 (document.createElement("div"))
• 已存在的元素 - 比如 ($(".div1"))

已存在的元素不会被移动，只会被复制，并包裹被选元素。

28.jQuery 文档操作 - wrapInner() 方法

实例

在每个 p 元素的内容上包围 b 元素：

$(".btn1").click(function(){   $("p").wrapInner("<b></b>");});

定义和用法

wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。

语法

$(selector).wrapInner(wrapper)

参数描述wrapper

必需。规定包围在被选元素的内容周围的内容。

可能的值:

• HTML 代码 - 比如 ("<div></div>")
• 新的 DOM 元素 - 比如 (document.createElement("div"))
• 已存在的元素 - 比如 ($(".div1"))

已存在的元素不会被移动，只会被复制，并包裹被选元素。

使用函数包裹内容

使用函数来规定包围在每个被选元素周围的内容。

语法

$(selector).wrapInner(function())

参数描述function()必需。规定返回包围元素的函数。