連結：https://blog.csdn.net/qq_26250427/article/details/78179108

在專案開發中，寫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>

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的屬性，那麼我們在取值的時候可以用這樣

首先jquery的attr()方法允許兩個引數，如果值給一個引數則返回的是元素的屬性的值，兩個引數可以設定一個元素屬性的值為第二個引數。
2、給div元素屬性賦值的程式碼如下：

    <script type="text/javascript">
        $('#div1').attr('class','baidu');
  
$('#div2').attr('value','2');

    </script>

效果
<div id="div1" class="baidu"></div>
<
div
 
id
=
"div2"
 value
=
"2"></div>

html()可以覆蓋原內容
test() 獲取元素下所有內容,包括html,直到元素結束
val()獲取元素value的值