jQuery 屬性方法 總結

屬性方法

1.attr( name | pro | key,val |fn )讀取或修改元素的屬性值（行內）。

參數：
1.name：屬性的名稱。（用於讀取值）
2.properties：做爲屬性的名稱的對象。（用於修改多個屬性）
3.key，value：屬性名和屬性值.(用於修改多個屬性）
4.fn：回調函數。function（index，attr）{}。index爲元素隊列中的索引值，attr爲元素原來的屬性值。

1 $("img").attr("src");
2 
3 $("img").attr({ src: "test.jpg", alt: "Test Image" });
4 
5 $("img").attr("src","test.jpg");
6 
7 $("img").attr("title", function() { return this.src });

 

2.removeAttr( name )

移除屬性。

參數：name。屬性名稱。

1 $("img").removeAttr("src");

 

3.prop（n | p | k，v | f ）

讀取或修改屬性。該方法與attr方法相似，但該方法針對布爾類型的屬性。

1 $("input[type='checkbox']").prop("checked");
2 $("input[type='checkbox']").prop({
3   disabled: true
4 });
5 
6 $("input[type='checkbox']").prop("checked", function( i, val ) {
7   return !val;
8 });

 

4.removeProp（name）

移除屬性。該方法所移除的屬性不推薦默認屬性。

1 var $para = $("p");
2 $para.prop("luggageCode", 1234);
3 $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
4 $para.removeProp("luggageCode");
5 $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

 

5.addClass（class | fn）

添加類名。

參數：

1.class：指定類名。多個使用空格分開。

2.function（index，class）{}：函數，index爲元素隊列的索引值，class爲要添加的類名。

1 $("p").addClass("selected");
2 $("p").addClass("selected1 selected2");
3 
4 $('ul li:last').addClass(function() {
5   return 'item-' + $(this).index();
6 });

 

6.removeClass（[class | fn]）

該方法與添加類名方法相似。

1 $("p").removeClass("selected");
2 
3 刪除匹配元素的全部類
4 $("p").removeClass();
5 
6 刪除最後一個元素上與前面重複的class
7 $('li:last').removeClass(function() {
8     return $(this).prev().attr('class');
9 });

 

7.toggleClass(class | fn[,sw])

參數：

1.class：切換的類名。

2.class，switch：類名，用於決定元素是否包含class的布爾值

3.function（index，class，switch）[,switch]：函數，索引值，類名，布爾值。

 1 $("p").toggleClass("selected");
 2 
 3 每點擊三下加上一次 'highlight' 類
 4   var count = 0;
 5   $("p").click(function(){
 6       $(this).toggleClass("highlight", count++ % 3 == 0);
 7   });
 8 
 9 根據父元素來設置class屬性
10 $('div.foo').toggleClass(function() {
11   if ($(this).parent().is('.bar') {
12     return 'happy';
13   } else {
14     return 'sad';
15   }
16 });

 

8.html（val | fn）

獲取或修改html內容。

參數：

1.空：獲取屬性。

2.文本：修改內容爲指定文本。

3.function（index，html）{}：元素索引值，原來的html值。

1 $('p').html();
2 
3 $("p").html("Hello <b>world</b>!");
4 
5 $("p").html(function(n){
6     return "這個 p 元素的 index 是：" + n;
7     });

 

9.text（val | fn）

獲取或修改元素的文本內容（不包括元素標籤）

該方法與html方法相似。

1 $('p').text();
2 
3 $("p").text("Hello world!");
4 
5 $("p").text(function(n){
6     return "這個 p 元素的 index 是：" + n;
7     });

 

10.val([val | fn | arr ])

獲取或修改元素的屬性值。（行內）

1 $("input").val();
2 
3 $("input").val("hello world!");
4 
5 $('input:text.items').val(function() {
6   return this.value + ' ' + this.className;
7 });