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()	必需。规定返回包围元素的函数。