JQuery常用属性整理
方法目录：
|------------- attr(name|properties|key,value|fn)
|------------- removeAttr(name)
|------------- prop(name|properties|key,value|fn)
|------------- removeProp(name)
|------------- addClass(class|fn)
|------------- removeClass([class|fn])
|------------- toggleClass(class|fn[,sw])
|------------- html([val|fn])
|------------- text([val|fn])
|------------- val([val|fn|arr])
1、attr(name|properties|key,value|fn)
1)、说明
设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对
2)、语法
(1)、返回属性的值：
$(selector).attr(attribute)
(2)、设置属性和值：
$(selector).attr(attribute,value)
(3)、使用函数设置属性和值：
$(selector).attr(attribute,function(index,currentvalue))
(4)、设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,...})
3)、参数
attribute 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定要返回属性值到集合的函数
index - 接受集合中元素的 index 位置。
currentvalue - 接受被选元素的当前属性值
4)、示例：
(1)、$("img").attr("src");
(2)、$("img").attr("src","test.jpg");
(3)、$("img").attr("width",function(n,v){return v-50;}); //每次执行，图片宽度减少50个像素
(4)、$("img").attr({ src: "test.jpg", alt: "Test Image" });
2、removeAttr(name)
1)、说明
从被选元素移除一个或多个属性。
2)、语法
$(selector).removeAttr(attribute)
3)、参数
attribute 必需。规定要移除的一个或多个属性。如需移除若干个属性，请使用空格分隔属性名称。
4)、示例
$("p").removeAttr("id class"); //移除所有P元素的id和类属性
3、prop(name|properties|key,value|fn)
1)、说明
设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
2)、语法
(1)、返回属性的值：
$(selector).prop(property)
(2)、设置属性和值：
$(selector).prop(property,value)
(3)、使用函数设置属性和值：
$(selector).prop(property,function(index,currentvalue))
(4)、设置多个属性和值：
$(selector).prop({property:value, property:value,...})
3)、参数
property 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定返回要设置的属性值的函数。
index - 检索集合中元素的 index 位置。
currentvalue - 检索被选元素的当前属性值。
4)、示例
(1)、$("input[type='checkbox']").prop("checked");
(2)、$("input[type='checkbox']").prop({disabled: true});
(3)、$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
(4)、$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
4、removeProp(name)
1)、说明
移除由 prop() 方法设置的属性。
2)、语法
$(selector).removeProp(property)
3)、参数
property 规定要移除的属性的名称。
4)、示例
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
结果
The secret luggage code is: 1234. Now the secret luggage code is: undefined.
5、addClass(class|fn)
1)、说明
向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
2)、语法
$(selector).addClass(classname,function(index,oldclass))
3)、参数
classname 必需。规定一个或多个要添加的类名称。
function(index,currentclass) 可选。规定返回一个或多个待添加类名的函数。
index - 返回集合中元素的 index 位置。
currentclass - 返回被选元素的当前类名。
4)、示例
(1)、向元素添加2个类(样式)
$("p:first").addClass("intro note");
(2)、用函数添加类
$("button").click(function(){
$("p").addClass(function(n){
return "par_" + n;
});
});
6、removeClass([class|fn])
1)、说明
从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
2)、语法
$(selector).removeClass(classname,function(index,currentclass))
3)、参数
classname 可选。规定要移除的一个或多个类名称。如需移除若干个类，请使用空格分隔类名称。
注意： 如果该参数为空，则将移除所有类名称。
function(index,currentclass) 可选。返回要移除的一个或多个类名称的函数。
index - 返回集合中元素的 index 位置。
currentclass - 返回被选元素的当前类名。
4)、示例
(1)、$("p").removeClass("selected"); //从匹配的元素中删除 'selected' 类
(2)、$("p").removeClass(); //删除匹配元素的所有类
(3)、$('li:last').removeClass(function() { //删除最后一个元素上与前面重复的class
return $(this).prev().attr('class');
});
7、toggleClass(class|fn[,sw])
1)、说明
对添加和移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
然而，通过使用 "switch" 参数，您能够规定只删除或只添加类。
2)、语法
$(selector).toggleClass(classname,function(index,currentclass),switch)
3)、参数
classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
index - 返回集合中元素的 index 位置。
currentclass - 返回被选元素的当前类名。
switch 可选。布尔值，规定是否仅仅添加（true）或移除（false）类。
4)、示例
(1)、$("p").toggleClass("selected"); //为匹配的元素切换 'selected' 类
(2)、每点击三下加上一次 'highlight' 类
HTML:
<strong>jQuery 代码:</strong>
JQuery:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
(3)、根据父元素来设置class属性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
8、html([val|fn])
1)、说明
设置或返回被选元素的内容（innerHTML）。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。
2)、语法
(1)、返回内容：
$(selector).html()
(2)、设置内容：
$(selector).html(content)
(3)、使用函数设置内容：
$(selector).html(function(index,currentcontent))
3)、参数
content 必需。规定被选元素的新内容（可包含 HTML 标签）。
function(index,currentcontent) 可选。规定返回被选元素的新内容的函数。
index - 返回集合中元素的 index 位置。
currentcontent - 返回被选元素的当前 HTML 内容。
4)、示例
(1)、$('p').html(); //返回p元素的内容。
(2)、$("p").html("Hello <b>world</b>!"); //设置所有 p 元素的内容
(3)、使用函数来设置所有匹配元素的内容
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
9、text([val|fn])
语法与第八点雷同
10、val([val|fn|arr])
1)、说明
返回或设置被选元素的 value 属性。
当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。
当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。
注意：val() 方法通常与 HTML 表单元素一起使用。
2)、语法
(1)、返回 value 属性：
$(selector).val()
(2)、设置 value 属性：
$(selector).val(value)
(3)、通过函数设置 value 属性：
$(selector).val(function(index,currentvalue))
3)、参数
value 必需。规定 value 属性的值。
function(index,currentvalue) 可选。规定返回要设置的值的函数。
index - 返回集合中元素的 index 位置。
currentvalue - 返回被选元素的当前 value。
4)、示例
(1)、$("input").val(); //获取文本框中的值
(2)、$("input").val("hello world!"); //设定文本框的值
(3)、设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
(4)、设定一个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
JQuery:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);