01第1節：概述
對於#JavaScript#來說，其核心的功能就是對Html DOM的操作，但是JavaScript提供的操作方法比較複雜，學習起來有一定的難度。
因此，jQuery對JavaScript操作DOM的函數進行了封裝，變的簡潔、短小，更易用。
這裡主要來學習一下jQuery對Html標記內容的操作。
02第2節：text()方法
一、基本含義
在jQuery中，使用選擇器可以非常容易的得到任何一個Html元素，在Html頁面上，分表單元素和非表單元素：
表單元素：以input為標記的元素，生成的標記有單行文本框、多行文本框、單選按鈕、多選按鈕、下拉菜單等。非表單元素：div、p、span、h1、h2、h3等。而對於jQuery封裝的text()方法，其主要功能就是給Html頁面上的非表單元素賦值和取值操作。
注意事項：
使用text()不能獲取表單元素的值，如文本框的值。jQuery的text()方法相當於JavaScript的innerText屬性。二、案例應用一（取值）
下面，我們編寫一段Html代碼，然後使用jQuery的DOM操作，使用text()方法對div元素操作。
Html+jQuery代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {//text()方法的使用var div1 = $("#div1");console.log(div1.text());});</script></head><body><div id="div1">DIV1</div><p id="p1">P1</p><span id="span1">SPAN1</span><h2 id="title2">H2</h2></body></html>
上面的代碼說明如下：
使用jQuery選擇器得到id=div1的div元素。然後使用得到的元素對象的text()方法獲取div元素的文本值。運行一下上面的代碼，效果如下：
圖1
在圖1中，獲取的文本值是DIV1，正好是id=div1元素的值。
text()方法是jQuery的方法，使用該方法操作的元素必須是使用jQuery選擇器查找到的，如果使用JavaScript查找到的元素，則是不能使用text()方法操作的。
三、案例應用二（賦值）
這裡獲取一個div元素，然後使用jQuery的text()方法給div元素賦值。
JavaScript代碼如下：
<script type="text/javascript">$().ready(function () {//text()方法的使用,獲取值var div1 = $("#div1");//console.log(div1.text());//text()方法賦值div1.text("Hello");});</script>
Html代碼還是使用案例一的，這裡給text()方法傳了一個文本值參數：Hello，表示給id=div1的元素賦值為Hello。
運行一下結果：
圖2
由於我們是將Jquery代碼放在就緒函數中的，因此，只要頁面一運行，就會執行，直接給div元素賦值。
總結：使用div1.text()獲取div元素的值，使用div1.text(「新值」)給div元素賦值。
03第3節：html()方法
一、基本含義
jQuery的html()方法與text()方法，都是給非表單元素賦值和取值的，但是html()功能更強大一些，還可以給元素賦的值是html代碼。
jQuery的html()方法相當於JavaScript的innerHtml屬性。
二、案例應用一（取值）
下面使用jQuery選擇器先獲取div元素對象，然後再獲取元素的值。
Html+jQuery代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {var div1 = $("#div1");var div1HTML = div1.html();console.log(div1HTML);});</script></head><body><div id="div1"><p id="p1">歡迎jQuery</p><span>jQuery非常簡單。</span></div></body></html>
此代碼中，使用了html()方法獲取div1元素帶有html代碼的值。
運行結果如下：
圖3
三、案例應用二（賦值）
再列舉一個案例，使用html()方法給div元素添加「<h2>謝謝！</h2>」。
Html+JqUERY代碼如下：
<!DOCTYPE html><html<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {var div1 = $("#div1");//使用html()賦值div1.html("<h2>謝謝！</h2>");});</script></head><body><div id="div1"></div></body></html>
將給div元素賦值的Html代碼添加到html()方法中作為參數即可：
圖4
在圖4中，原來id=div1的div標記是空的，經過html()賦值後，id=div1中包括了h2標記。
04第4節：val()方法
一、基本含義
在jQuery中，使用val()方法就可以給Html頁面上的表單元素賦值和取值，表單元素是以<input>標記開頭的元素。
表單元素是可以讓用戶在頁面上選擇或填寫信息的，這也是網頁的一個重要的元素，可以收集用戶信息並做出反饋。
使用jQuery封裝好的val()方法，不僅可以給表單元素賦值，還可以取值。
二、案例應用一（取值）
現在舉一個例子，使用jQuery的val()方法獲取表單元素的值。
代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.1.1.min.js"></script><script type="text/javascript">//獲取值function f1() {var t1 = $("#Text1");document.write(t1.val());}</script></head><body><input id="Text1" type="text" /><input id="Button1" type="button" value="獲取值" onclick="f1()" /></body></html>
運行一下上面的代碼，結果如下：
圖5
在圖5的文本框中輸入「小強」，然後點擊「獲取值」按鈕，如圖6所示：
圖6
在圖6中，使用html()方法已經獲取文本框中的值了。
三、案例應用二（賦值）
現在，通地jQuery代碼，將從其它地方拿到的值賦值給表單元素，則可以使用帶參數的val()方法。
Html+jQuery代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function f1() {var t1 = $("#Text1");//賦值t1.val("你好");}</script></head><body><input id="Text1" type="text" /><input id="Button1" type="button" value="賦值" onclick="f1()" /></body></html>
運行一下代碼，頁面效果如下：
圖7
圖7中，文本框是空的，現在點擊一下「賦值」按鈕，如圖8所示：
圖8
此時，我們發現，當單擊過按鈕之後，通過val()方法動態的給文本框賦值了，這種功能使用的情況比較多。
也是網頁動態數據實現的一個功能點，可以通過jQuery將外部數據引入到系統中。