JQuery中一些經常使用方法的比較

　　因爲實習工做中基本用的都是JQuery的內容，在實際操做過程當中常常遇到相似方法的選擇，在這簡單地對方法進行比較。

一、JQuery中html()、text()和val()的區別

　　簡單的說，html()是指讀取和修改一個元素的html內容(Get the HTML contents of the first element in the set of matched elements.)，

　　　　　　　text()是指讀取和修改一個元素的文本內容(Get the combined text contents of each element in the set of matched elements, including their descendants.)，

　　　　　　　val()是指讀取和修改一個元素的value字段的值(Get the current value of the first element in the set of matched elements.)。

　　對於這三個方法都有無參和有參的兩種形式，二者的效果很明顯，無參的是讀取元素的內容，而有參的是設置修改元素的內容，可是值得注意的是，對於html()方法，無參即讀取內容的時候是返回匹配到的第一個元素的內容，而有參即修改內容時是修改匹配到的全部元素的內容。

　　以上是有參和無參的區別，接下來是三者之間的區別，這裏逐個分析。

　　1) html() 

　　無參時讀取元素的html內容，這裏的html內容是指，包括元素內部的html元素和文本元素，這裏內部的html元素包括尖括號(<>)所表示的html標籤。要注意若是目標元素多於一個時，只會返回匹配到的第一個元素的html內容。

　　有參時修改元素的html內容，亦即將匹配到的元素下的html內容更改爲方法裏的參數，本來的html內容會被覆蓋，與無參時讀取內容不一樣的是，修改內容的做用對象是每個匹配到的元素。

　　2) text()

　　無參時讀取元素的純文本內容，這裏純文本的意思是，忽略掉元素內部的非文本的html元素，也就是尖括號(<>)表示的html標籤會被忽略。可是與html()方法無參時不一樣，此時讀取到的是每個匹配到的元素的文本內容。

　　有參時修改元素的純文本內容，將匹配到的元素中的全部內容，包括html內容，覆蓋成text()方法中的參數，也就是說，匹配到的元素下的內容被修改爲一段文本。

　　html代碼：

1 <div id="container">
2   <p>這是一段代碼<a>這是嵌入p中的a文本</a></p>
3 </div>

　　js代碼：

<script>
  console.log($("#container p").html());  //這是一段代碼<a>這是嵌入p中的a文本</a>
  console.log($("#container p").text());  //這是一段代碼這是嵌入p中的a文本
</script>

<script>
  $("#container p").html(「<p>這是修改過的內容</p>」);  //這是一段代碼<a>這是嵌入p中的a文本</a>
  console.log($("#container p").html());  //<p>這是修改過的內容</p>
  $("#container p").text(「<p>這是修改過的內容</p>」); //這是一段代碼這是嵌入p中的a文本
  console.log($("#container p").html());  //&lt;p&gt;這是修改過的內容&lt;/p&gt;
</script>

　　從這兩段代碼能夠就看出html()和text()在有參和無參的區別。

　　3) val()

　　val()方法是經常使用於獲取表單元素的內容，主要須要注意的有如下幾點：

　　　　val()方法無參時與html()相同，返回第一個匹配到的元素的值。

　　　　對於「<select multiple="multiple">」元素，val()方法返回一個包含每一個選中的option的數組；

　　　　對於下拉選擇框<select></select>和複選框input[type="checkbox"]、單選框input[type="radio"]，使用「:selected」和「:checked」選擇器來獲取值。

 二、attr()和prop()的區別

　　attr和prop其實就是attribute和property的縮寫，爲了區別能夠分別稱爲屬性和特性，使用的方法其實很簡單，這裏不作介紹。重點在於二者的區別以及使用的場景。

　　1）首先二者的使用方法不一樣，看如下代碼：

node.className = 'active';
node.setAttribute('class', 'active');

　　能夠看出attr在原生的javascript是以getAttribute()和setAttribute()操做，而prop()是經過「.」來調用。

　　2）對於值是true/false的屬性，相似於input的checked等，attribute取得值是HTML文檔字面量值，property是取得計算結果，property改變並不影響attribute字面量，但attribute改變會影響property的值。

　　根據這一點，對於一些相似於路徑的屬性，attribut返回的是字面量，而propert返回的是計算後的結果，亦即完整的路徑。

　　3）使用的場合

　　先看一下官方文檔的建議：

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. 

　　對於有true和false兩個值的屬性，例如checked、selected等，使用prop()進行調用，除此以外的則使用attr()方法來調用。

　　這也是下面這張流傳普遍的圖片所說的：

 

內容參考：

jQuery的attr與prop：http://aijuans.iteye.com/blog/1954744