jquery属性

属性

attr(name)
取得第一个匹配元素的属性值。
返回值Object
示例：
返回文档中第一个图像的src属性值。
代码：
$("img").attr("src");

attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性
返回值为jQuery
示例：
为所有图像设置src和alt属性
HTML代码：
<img/>
代码：
$("img").attr({src:"test.jpg",alt:"Test image"});
结果：
[<img src="http://holyrain1314.blog.163.com/blog/test.jpg" alt="Test image"/>]

attr(key,value)
为所有匹配的元素设置一个属性值
返回值jQuery
示例：
为所有图像设置src属性
HTML代码：
<img/><img/>
代码：
$("img").attr("src","test.jpg");
结果：
[ <img src="http://holyrain1314.blog.163.com/blog/test.jpg" /> , <img src="http://holyrain1314.blog.163.com/blog/test.jpg" /> ]

attr(key,fn)
为所有匹配的元素设置一个计算的属性值
返回值为jQuery
示例：
把src属性的值设置为title属性的值。
HTML代码：<img src="http://holyrain1314.blog.163.com/blog/test.jpg"/>
代码：
$("img").attr("title", function() { return this.src });
结果：
<img src="http://holyrain1314.blog.163.com/blog/test.jpg" title="test.jpg" />

removeAttr(name)
从每一个匹配的元素中删除一个属性
返回值jQuery
示例：
将文档中图像的src属性删除
HTML代码：<img src="http://holyrain1314.blog.163.com/blog/test.jpg"/>
代码：
$("img").removeAttr("src");
结果：
[ <img /> ]

CSS类

addClass(class)
为每个匹配的元素添加指定的类名
返回值jQuery
参数：class (String) : 一个或多个要添加到元素中的CSS类名，请用空格分开
示例；
为匹配的元素加上 'selected' 类
HTML 代码:
<p>Hello</p>
代码:
$("p").addClass("selected");
结果:
[ <p class="selected">Hello</p> ]
为匹配的元素加上 selected highlight 类
HTML 代码:
<p>Hello</p>
代码:
$("p").addClass("selected highlight");
结果:
[ <p class="selected highlight">Hello</p> ]

addClass(function(index, class))
为每个匹配的元素添加指定的类名
参数：
function(index, class) (Function) : 此函数必须返回一个或多个空格分隔的class名。
接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
示例：
给li加上不同的class
HTML代码：
<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
代码：
$('ul li:last').addClass(function() {
    return 'item-' + $(this).index(); 
});

removeClass(class)
从所有匹配的元素中删除全部或者指定的类
参数：
class (String) : (可选) 一个或多个要删除的CSS类名，请用空格分开
示例：
从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
代码:
$("p").removeClass("selected");
结果:
[ <p>Hello</p> ]
删除匹配元素的所有类
HTML 代码:
<p class="selected first">Hello</p>
代码:
$("p").removeClass();
结果:
[ <p>Hello</p> ]

removeClass(function(index,class))
从所有匹配的元素中删除全部或者指定的类
参数：
function(index, class) (Function) : 此函数必须返回一个或多个空格分隔的class名。
接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
示例：
删除最后一个元素上与前面重复的class
代码：
$('li:last').removeClass(function() {
      return $(this).prev().attr('class'); 
});

toggleClass(class)
如果存在（不存在）就删除（添加）一个类。
参数：
class (String) :CSS类名
示例：
为匹配的元素切换"selected"类
HTML代码：
<p>Hello</p><p class="selected">Hello Again</p>
代码：
$("p").toggleClass("selected");
结果：
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

toggleClass(class,switch)
如果开关switch参数为true则加上对应的class，否则就删除
参数：
class (String) :CSS类名
switch (Boolean) :用于决定元素是否包含class的布尔值。
示例：
每点击三下加上一次 'selected' 类
HTML代码：
<strong>jQuery 代码:</strong>
代码：
var count = 0;   
$("p").click(function(){
        $(this).toggleClass("highlight", count++ % 3 == 0);   
});
结果：
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

toggleClass(function(index,class),[switch])
从所有匹配的元素中删除全部或者指定的类
参数：
function(index, class) (Function) : 返回class名的一个函数，接受两个参数，index为元素在集合中的索引位置，class为原先元素的class值。switch (可选)(Boolean) : 用于决定元素是否包含class的布尔值。
示例：
根据父元素来设置class属性
代码：
$('div.foo').toggleClass(function() {
    if ($(this).parent().is('.bar') {
      return 'happy';   
    } else {
      return 'sad';   
    } 
});

HTML

html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
返回值String
示例：
HTML 代码:
<div><p>Hello</p></div>
代码:
$("div").html();
结果:
Hello

html(val)
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
返回值jQuery
参数：
val (String) : 用于设定HTML内容的值
示例：
HTML 代码:
<div></div>
代码:
$("div").html("<p>Hello Again</p>");
结果:
[ <div><p>Hello Again</p></div> ]

html(function(index, html))
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
返回值jQuery
参数：
function(index, html) (Function) : 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值

文本

text()
取得所有匹配元素的内容。
返回值String
示例
HTML 代码:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
代码:
$("p").text();
结果:
Test Paragraph.Paraparagraph

text(val)
设置所有匹配元素的文本内容
返回值jQuery
参数：
val (String) : 用于设置元素内容的文本
示例：
HTML 代码:
<p>Test Paragraph.</p>
代码:
$("p").text("<b>Some</b> new text.");
结果:
[ <p><b>Some</b> new text.</p> ]

text(function(index,text))
设置所有匹配元素的文本内容
返回值jQuery
参数：
function(index, text) (Function) : 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值

值

val()
获得第一个匹配元素的当前值
返回值String,Array
示例
获得单个select的值和多选select的值
HTML 代码:
<p></p><br/>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
代码:
$("p").append(
  "<b>Single:</b> "   + $("#single").val() +
  " <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
结果:
[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
获取文本框中的值
HTML 代码:
<input type="text" value="some text"/>
代码:
$("input").val();
结果:
some text

val(val)
设置每一个匹配元素的值
返回值jQuery
参数：
val (String) : 要设置的值。
示例：
设定文本框的值
HTML 代码:
<input type="text"/>
代码:
$("input").val("hello world!");

val(array)
check,select,radio等都能使用为之赋值
返回值jQuery
参数：
array (Array<String>) : 用于 check/select 的值
示例：
设定一个select和一个多选的select的值
HTML 代码:
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">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(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

val(fn)
设置每一个匹配元素的值
返回值jQuery
参数
fn (Funtion) : 一个函数，返回要设置的值。
示例
设定文本框的值
HTML 代码:
<input type="text" class="items"/>
代码:
$('input:text.items').val(function() {
    return this.value + ' ' + this.className; 
});