jQuery 属性操作

1.列表

jQuery 属性操作方法

下面列出的这些方法获得或设置元素的 DOM 属性。

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法描述addClass()向匹配的元素添加指定的类名。attr()设置或返回匹配元素的属性和值。hasClass()检查匹配的元素是否拥有指定的类。html()设置或返回匹配的元素集合中的 HTML 内容。removeAttr()从所有匹配的元素中移除指定的属性。removeClass()从所有匹配的元素中删除全部或者指定的类。toggleClass()从匹配的元素中添加或删除一个类。val()设置或返回匹配元素的值。

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 属性操作 - attr() 方法

实例

改变图像的 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规定一个或多个属性/值对。

4.jQuery 属性操作 - hasClass() 方法

实例

检查第一个 <p> 元素是否包含 "intro" 类：

$("button").click(function(){  alert($("p:first").hasClass("intro"));});

定义和用法

hasClass() 方法检查被选元素是否包含指定的 class。

语法

$(selector).hasClass(class)

参数描述class必需。规定需要在指定元素中查找的类。

5.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 - 可选。接收选择器的当前内容。

6.jQuery 属性操作 - removeAttr() 方法

实例

从任何 p 元素中移除 id 属性：

$("button").click(function(){  $("p").removeAttr("id");});

定义和用法

removeAttr() 方法从被选元素中移除属性。

语法

$(selector).removeAttr(attribute)

参数描述attribute必需。规定从指定元素中移除的属性。

7.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 - 可选。接受选择器的旧的类值。

8.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)类。

9.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 属性。