jquery溫故知新-屬性篇

1.attr(name|properties|key,value|fn)

• 設置或返回被選元素的屬性值。

\\把src屬性的值設置爲title屬性的值。
$("img").attr("title", function() { return this.src });

2.removeAttr(name)

• 從每一個匹配的元素中刪除一個屬性
• 1.6以下版本在IE6使用JQuery的removeAttr方法刪除disabled是無效的。解決的方法就是使用$("XX").prop("disabled",false);
  1.7版本在IE6下已支持刪除disabled。

3.prop(name|properties|key,value|fn) ^1.6+

• 獲取在匹配的元素集中的第一個元素的屬性值。
• 隨着一些內置屬性的DOM元素或window對象，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤。
• 用法與attr()相同，區別:attr()用於自定義屬性，prop用於標籤固有屬性。

\\通過函數來設置所有頁面上的複選框被選中。
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

4.removeProp(name) ^1.6+

• 用來刪除由.prop()方法設置的屬性集
• 隨着一些內置屬性的DOM元素或window對象，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤

5.addClass(class|fn)

• 爲每個匹配的元素添加指定的類名。

\\給li加上不同的class
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

6.removeClass([class|fn])

• 從所有匹配的元素中刪除全部或者指定的類。

\\刪除最後一個元素上與前面重複的class
 $('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

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

• 如果存在（不存在）就刪除（添加）一個類。

 //每點擊三下加上一次 'highlight' 類
  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });
  //根據父元素來設置class屬性
 $('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
}); 

8.html([val|fn])

• 取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。
• 在一個 HTML 文檔中, 我們可以使用.html()方法來獲取任意一個元素的內容。 如果選擇器匹配多於一個的元素，那麼只有第一個匹配元素的 HTML 內容會被獲取。

//使用函數來設置所有匹配元素的內容。
$("p").html(function(n){
	return "這個 p 元素的 index 是：" + n;
});

9.text([val|fn])

• 取得所有匹配元素的內容。
• 結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。

\\使用函數來設置所有匹配元素的文本內容。
$("p").text(function(n){
	return "這個 p 元素的 index 是：" + n;
});

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

• 獲得匹配元素的當前值。
• 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值。

參數

• array 用於 check/select 的值

\\設定文本框的值
$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});
\\設定一個select和一個多選的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

$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);