jQuery：DOM部分之Attributes 的使用

在jQuery函数系列介绍完之后，将会介绍一些比较实用的例子，供大家参考，敬请期待......

函数：addClass(class)

功能：给每个匹配的元素添加类

返回：jQuery对象

参数：类名

例子：

jQuery Code

$("p").addClass("selected")

Before

<p>Hello</p>

Result:

[ <p class="selected">Hello</p> ]



jQuery Code

$("p").addClass("selected highlight")

Before

<p>Hello</p>

Result:

[ <p class="selected highlight">Hello</p> ]

函数：attr(name)

功能：获取匹配对象指定属性的属性值

返回：Object

参数：要获取的属性名称

例子：

Returns the src attribute from the first image in the document.



jQuery Code

$("img").attr("src");

Before

<img src="test.jpg"/>

Result:

test.jpg

函数：attr(properties)

功能：给匹配对象设定一系列的属性值

返回：jQuery对象

参数：key/value对的属性对象

例子：

Sets src and alt attributes to all images.



jQuery Code

$("img").attr({ src: "test.jpg", alt: "Test Image" });

Before

<img/>

Result:

<img src="test.jpg" alt="Test Image"/>

函数：attr(key, value)

功能：给匹配对象设定某个属性值

返回：jQuery对象

参数：

key (String): The name of the property to set. 

value (Object): The value to set the property to.



例子：

Sets src attribute to all images.



jQuery Code

$("img").attr("src","test.jpg");

Before

<img/>

Result:

<img src="test.jpg"/>

函数：attr(key, value)

功能：和上面一样，只不过这里的value值是一个函数的返回值

返回：jQuery对象

参数：

key (String): The name of the property to set. 

value (Function): A function returning the value to set. Scope: Current element, argument: Index of current element 

例子：

Sets title attribute from src attribute.



jQuery Code

$("img").attr("title", function() { return this.src });

Before

<img src="test.jpg" />

Result:

<img src="test.jpg" title="test.jpg" />



Enumerate title attribute.



jQuery Code

$("img").attr("title", function(index) { return this.title + (i + 1); });

Before

<img title="pic" /><img title="pic" /><img title="pic" />

Result:

<img title="pic1" /><img title="pic2" /><img title="pic3" />

函数：html()

功能：获取匹配元素的html内容(innerHTML)

返回：String

例子：

jQuery Code

$("div").html();

Before

<div><input/></div>

Result:

<input/>

函数：html(val)

功能:给匹配元素设定innerHTML属性

返回：jQuery对象

参数：val (String): Set the html contents to the specified value. 

例子：

jQuery Code

$("div").html("<b>new stuff</b>");

Before

<div><input/></div>

Result:

<div><b>new stuff</b></div>

函数：removeAttr(name)

功能：移除匹配元素的指定属性

返回：jQuery对象

参数：name (String): The name of the attribute to remove. 

例子：

jQuery Code

$("input").removeAttr("disabled")

Before

<input disabled="disabled"/>

Result:

<input/>

函数：removeClass(class)

功能：移除匹配元素的指定类

返回：jQuery对象

参数：class (String): (optional) One or more CSS classes to remove from the elements 

例子：

jQuery Code

$("p").removeClass()

Before

<p class="selected">Hello</p>

Result:

[ <p>Hello</p> ]



jQuery Code

$("p").removeClass("selected")

Before

<p class="selected first">Hello</p>

Result:

[ <p class="first">Hello</p> ]



jQuery Code

$("p").removeClass("selected highlight")

Before

<p class="highlight selected first">Hello</p>

Result:

[ <p class="first">Hello</p> ]

函数：text()

功能：获取匹配元素的text内容(innerText)

返回：String

例子：

Gets the concatenated text of all paragraphs



jQuery Code

$("p").text();

Before

<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>

Result:

Test Paragraph.Paraparagraph

[code]函数：text(val) 
功能：设定匹配元素的innerText属性，val中的<>将会被会转义成实体符号 
返回：String 
参数：val (String): The text value to set the contents of the element to.  
例子: 
Sets the text of all paragraphs. 

jQuery Code 
$("p").text("<b>Some</b> new text."); 
Before 
<p>Test Paragraph.</p> 
Result: 
<p><b>Some</b> new text.</p> 

Sets the text of all par