jQuery中的html，val，text區別

在項目開發中，寫jQuery代碼有時候會搞混淆一下東西，如今寫一下demo來列出jQuery的.html(),.text(),.val()的區別。

 

　　1. html()取得第一個匹配元素的內容，簡單來講就是所取得的標籤所包含的全部東西。

　　    假如括號中有帶val的話，最簡單的理解就是將上一步取得的內容所有替換成括號中val，下面看demo

1     <div id="divTest" value='2'> 2  這是div的內容！ 3 <label id="lblText"> 4  這是label的內容！ 5 </label> 6 <div id="divTest2"> 7  第二個div內容！ 8 </div> 9 </div>

　　　　這是html文檔結構，如今咱們執行下面js代碼看看所取得的是什麼的東西

1  $("#divTest").html()  //所取得內容：這是div的內容！<label id="lblText">這是label的內容！</label> <div id="divTest2">第二個div內容！</div>

1  $("#divTest").html("我要修改了！")  //執行修改

　　　　上面修改以後，咱們接着獲取一下

 1 $("#divTest").html() //所取得內容：我要修改了！ 

 

　　注：html()方法能夠用於XHTML文檔，但不能用於XML文檔！

 

　　2.text():取得全部匹配元素的內容，結果是由全部匹配元素包含的文本內容組合起來的文本，同理，text(val)是設置全部匹配元素的文本內容

　　

1 $("#divTest").text() //所取得內容：這是div的內容！這是label的內容！第二個div內容！ 2 //可見所取得是標籤內的東西，但不會取標籤

　　注：這個方法對HTML和XML文檔都有效

 

　　3.val()經常使用來操做標準的表單組件對象，如button,text,hidden

　　例如添加了一個select元素以及一個hidden的元素

1     <select id="selectVal"> 2 <option value="1" selected="selected">1</option> 3 <option value="2" >2</option> 4 </select> 5 <input type="hidden" id="hidVal" value="1"/>

　　如今咱們來取一下他們的值

1 $("#selectVal").val()  //取得值爲：1  同理這個也是 $("#hidVal").val()

　　

　　有時候開發的時候會在一個div內設置一個value的屬性，那麼咱們在取值的時候能夠用這樣

　　

1 $("#divTest").attr('value')