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

 

 

函数：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>&lt;b&gt;Some&lt;/b&gt; new text.</p>

Sets the text of all paragraphs.

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

 

 

函数：toggleClass(class)
功能：匹配元素存在class则移除，没有则添加
返回：jQuery对象
参数：class (String): A CSS class with which to toggle the elements 
例子：
jQuery Code
$("p").toggleClass("selected")
Before
<p>Hello</p><p class="selected">Hello Again</p>
Result:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

 

 

函数：val()
功能：返回表单元素的值
返回：String
例子：
jQuery Code
$("input").val();
Before
<input type="text" value="some text"/>
Result:
"some text"

 

 

函数：val(val)
功能：设定表单元素的值
返回：jQuery对象
参数：val (String): Set the property to the specified value. 
例子：
jQuery Code
$("input").val("test");
Before
<input type="text" value="some text"/>
Result:
<input type="text" value="test"/>