jQuery 学习八(属性)

● attr(name)

Javascript代码



/**

* 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。

* 如果元素没有相应属性，则返回 undefined。

*

* @name(String) 属性名称

* @return Object

* @owner jQuery Object

*/

function attr(name);

// 例子：返回文档中第一个图像的src属性值。

<img src="test1.jpg" />

<img src="test2.jpg" />

$("img").attr("src") -> test1.jpg

● attr(key, value)

Javascript代码



/**

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

*

* @key(String) 属性名称

* @value(Object) 属性值

* @return jQuery Object

* @owner jQuery Object

*/

function attr(key, value);

// 例子：为所有图像设置 src 属性。

<img />

<img />

$("img").attr("src", "test.jpg") -> [ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

● attr(properties)

Javascript代码



/**

* 将一个 "名/值" 形式的对象设置为所有匹配元素的属性。

*

* 这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须

* 使用 "className" 作为属性名。或者你可以直接使用 .addClass( class ) 和 .removeClass( class )。

*

* @properties(Map) 作为属性的 "名/值对" 对象

* @return jQuery Object

* @owner jQuery Object

*/

function attr(properties);

// 例子：为所有图像设置 src 和 alt 属性。

<img />

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

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

● attr(key, fn)

Javascript代码



/**

* 为所有匹配的元素设置一个计算的属性值。

* 不提供值，而是提供一个函数，由这个函数的返回值作为属性值。

*

* @key(String) 属性名称

* @fn(Function) 用于计算属性值的函数，作用域为当前 DOM 元素，函数签名：Function(index)

* @index 当前 DOM 元素的索引值

* @return jQuery Object

* @owner jQuery Object

*/

function attr(key, fn);

// 例子：把 src 属性的值设置为 title 属性的值。

<img src="test.jpg" />

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

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

● removeAttr(name)

Javascript代码



/**

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

*

* @name(String) 要删除的属性名

* @return jQuery Object

* @owner jQuery Object

*/

function removeAttr(name);

// 例子：将文档中图像的 src 属性删除。

<img src="test.jpg" />

$("img").removeAttr("src") -> <img />

● addClass(class)

Javascript代码



/**

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

*

* @class(String) 一个或多个要添加到元素中的 CSS 类名，使用空格分开

* @return jQuery Object

* @owner jQuery Object

*/

function addClass(class);

// 例子：为匹配的元素加上 "selected highlight" 类。

<p>Hello</p>

$("p").addClass("selected highlight") -> [ <p class="selected highlight">Hello</p> ]

● removeClass(class)

Javascript代码



/**

* 为从所有匹配的元素中删除全部或者指定的类。

*

* @class(String) (可选) 一个或多个要删除的 CSS 类名，使用空格分开

* @return jQuery Object

* @owner jQuery Object

*/

function removeClass(class);

// 例子一：从匹配的元素中删除 "selected" 类。

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

$("p").removeClass("selected") -> [ <p>Hello</p> ]

// 例子二：删除匹配元素的所有类。

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

$("p").removeClass() -> [ <p>Hello</p> ]

● toggleClass(class)

Javascript代码



/**

* 如果存在（不存在）就删除（添加）一个类。

*

* @class(String) CSS 类名

* @return jQuery Object

* @owner jQuery Object

*/

function toggleClass(class);

// 例子：为匹配的元素切换 "selected" 类。

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

$("p").toggleClass("selected") -> [ <p class="selected">Hello</p>, <p>Hello Again</p> ]

● html()

Javascript代码



/**

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

*

* @return String html 内容

* @owner jQuery Object

*/

function html();

// 例子：取得 div 的内容。

<div><p>Hello</p></div>

$("div").html() -> <p>Hello</p>

● html(val)

Javascript代码



/**

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

*

* @val(String) 用于设定 HTML 内容的值

* @return jQuery Object

* @owner jQuery Object

*/

function html(val);

// 例子：为 div 设置内容。

<div></div>

$("div").html("<p>Hello Again</p>") -> [ <div><p>Hello Again</p></div> ]

● text()

Javascript代码



/**

* 取得所有匹配元素的内容(innerText)。

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

*

* @return String 返回的内容

* @owner jQuery Object

*/

function text();

// 例子：取得 div 的内容。

<div><p>Hello</p></div>

$("div").text() -> Hello

● text(val)

Javascript代码



/**

* 取得所有匹配元素的内容。

*

* @val(String) 用于设置元素内容的文本

* @return jQuery Object

* @owner jQuery Object

*/

function text(val);

// 例子：为 p 设置内容。

<p>Test Paragraph.</p>

$("p").text("<b>Some</b> new text.") -> [ <p><b>Some</b> new text.</p> ]

● val()

Javascript代码



/**

* 获得第一个匹配元素的当前值。

* 在 jQuery 1.2 中,可以返回任意元素的值了。包括 select。如果多选，将返回一个数组，其包含所选的值。

*

* @return String/Array<String> 返回的值

* @owner jQuery Object

*/

function val();

// 例子：获得单个 select 的值和多选 select 的值。

<select id="single">

<option>Single</option>

<option>Single2</option>

</select>

<select id="multiple" multiple="multiple">

<option selected="selected" value="ppp">Multiple</option>

<option>Multiple2</option>

<option selected="selected" value="qqq">Multiple3</option>

</select>

$("#single").val() -> Single

$("#multiple").val() -> ["ppp", "qqq"]

● val(val)

Javascript代码



/**

* 设置每一个匹配元素的值。

*

* @val(String) 要设置的值

* @return jQuery Object

* @owner jQuery Object

*/

function val(val);

// 例子：设定文本框的值。

<input type="text" />

$("input").val("hello world!");

● val(val)

Javascript代码



/**

* check, select, radio 等都能使用为之赋值。

*

* @val(String/Array<String>) 用于 check/select 的值

* @return jQuery Object

* @owner jQuery Object

*/

function val(val);

// 例子：设定一个 select 和一个多选的 select 的值。

<select id="single">

<option>Single</option>

<option>Single2</option>

</select>

<select id="multiple" multiple="multiple">

<option value="ppp">Multiple</option>

<option>Multiple2</option>

<option value="qqq">Multiple3</option>

</select><br/>

<input type="checkbox" value="check1" /> check1

<input type="checkbox" value="check2" /> check2

<input type="radio" value="radio1" /> radio1

<input type="radio" value="radio2" /> radio2

$("#single").val("Single2");

$("#multiple").val(["ppp", "qqq"]);

$("input").val(["check2", "radio1"]);