JQuery Attributes 方法说明

转：http://blog.sina.com.cn/s/blog_5ea2cb7e0100c4cx.html

JQuery Attributes 方法说明 (2009-02-17 01:02:33)

标签：it

分类：编程

attr( name )

参数:

• String

返回值:

• Object

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果第一个匹配元素没有这个属性，则返回“undefined”

实例

取得页面中第一个em元素的title属性

var title = $("em").attr("title"); $("div").text(title);

attr( properties )

参数:

• Map

返回值:

• jQuery

将一个“名/值”形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果需要设置一个类属性，则必须使用类名作为名，或使用addClass和removeClass来操作

实例

给img元素添加多项属性

$("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); $("div").text($("img").attr("alt"));

attr( key, value )

参数:

• String
• Object

返回值:

• jQuery

为所有匹配的元素设置一个属性值

实例

禁用所有索引数大于0的按钮

$("button:gt(0)").attr("disabled","disabled");

attr( key, fn )

参数:

• String
• Function

返回值:

• jQuery

为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。fn参数可以带有一个参数，此参数为当前元素在jQuery集合中的索引数，fn中的this指代这个元素

实例

针对div元素在页面中的位置来添加id属性值

$("div").attr("id", function (arr) { return "div-id" + arr; }).each(function () { $("span", this).html("(ID = '<b>" + this.id + "</b>')"); });

removeAttr( name )

参数:

• String

返回值:

• jQuery

从每一个匹配的元素中删除一个属性

实例

点击按钮后使此按钮的下一个输入框可编辑

$("button").click(function () { $(this).next().removeAttr("disabled").focus().val("editable now"); });

addClass( class )

参数:

• String(一个或多个class名，多个class以空格分开)

返回值:

• jQuery

为每个匹配的元素添加指定的类名

实例

给匹配的元素添加“selected”类

$("p:last").addClass("selected");

给匹配的元素添加“selected”和“highlight”类

$("p:last").addClass("selected highlight");

hasClass( class )

参数:

• String

返回值:

• Boolean

在匹配的元素集合中，如果至少有一个元素具有指定的class类，则返回true，否则返回false

实例

在匹配的元素集合中找出class属性值为“selected”的元素

$("div#result1").append($("p:first").hasClass("selected").toString()); $("div#result2").append($("p:last").hasClass("selected").toString()); $("div#result3").append($("p").hasClass("selected").toString());

removeClass( class )

参数:

• String (可选)

返回值:

• jQuery

从所有匹配的元素中删除全部或者指定的类，多个类名之间用空格分开。如果不指定类名，则删除全部的类

实例

从匹配的元素集合中删除“blue”类

$("p:even").removeClass("blue");

从匹配的元素集合中删除“blue”和“under”类

$("p:odd").removeClass("blue under");

从匹配的元素集合中删除所有类属性

$("p:eq(1)").removeClass();

toggleClass( class )

参数:

• String

返回值:

• jQuery

如果存在（不存在）就删除（添加）一个类(只支持单独的类名)

实例

点击时切换p元素的highlight类的有无

$("p").click(function () { $(this).toggleClass("highlight"); });

html( )

返回值:

• String

取得第一个匹配元素的html内容(使用innerHTML方法)。这个函数不能用于XML文档(虽然可以用于XHTML文档)。

实例

点击一个段落，将它的HTML代码转化成内容显示

$("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });

html( val )

参数:

• String

返回值:

• jQuery

设置每一个匹配元素的html内容。这个函数不能用于XML文档(虽然可以用于XHTML文档)。

实例

将每一个div元素中的代码设置为指定的HTML代码

$("div").html("<span class='red'>Hello <b>Again</b></span>");

将每一个div元素中的代码设置为指定的HTML代码，然后再添加文本和style属性

$("div").html("<b>Wow!</b> Such excitement..."); $("div b").append(document.createTextNode("!!!")).css("color", "red");

text( )

返回值:

• String

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效

实例

取得第一段中的文本，将文本作为HTML代码添加到最后一段中

var str = $("p:first").text(); $("p:last").html(str);

text( val )

参数:

• String

返回值:

• jQuery

设置所有匹配元素的文本内容。这个函数与html()函数类似，但是将给定的<和>字符转义以HTML字符实体代替

实例

将段落中的文本设置为<b>Some</b> new text.

$("p").text("<b>Some</b> new text.");

val( )

返回值:

• String, Array

获得第一个匹配元素的当前值。在jQuery1.2中，此方法对包括select在内的所有元素都有效。对于多选项(multiple select)，则返回一个数组。

实例

取得输入框的值

$("input").keyup(function () { var value = $(this).val(); $("p").text(value); }).keyup();

从单选项中取得一个值，从多选项中取得一个数组

function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || [];

val( val )

参数:

• String

返回值:

• jQuery

设置每一个匹配元素的值。在jQuery 1.2中，此方法也可以设置select元素的值，但是需要指定恰当的选项值。

实例

设置输入框的值

$("button").click(function () { var text = $(this).text(); $("input").val(text); });

val( val )

参数:

• Array[String]

返回值:

• jQuery

选择或设置所有的单选按钮、复选框和下拉列表为指定的val值

实例

设置单选按钮、多选菜单和选择框

$("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);

转载于:https://www.cnblogs.com/wbcms/archive/2009/03/13/1410466.html