JQuery常用屬性整理
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"]);