Web開發——JavaScript庫（jQuery HTML——獲取/設定內容和屬性（DOM操作））
阿新 • • 發佈：2018-11-12
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
1、jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文件物件模型）
DOM 定義訪問 HTML 和 XML 文件的標準：
“W3C 文件物件模型獨立於平臺和語言的介面，允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式。”
2、獲得內容和屬性
2.1 獲取內容 - text()、html() 以及 val()
三個簡單實用的用於 DOM 操作的 jQuery 方法：
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素的內容（包括 HTML 標記）
- val() - 設定或返回表單欄位的值
舉例1（下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function() { 15 $("#btn1").click(function() { 16 alert("Text: " + $("#test1").text()); 17 }); 18 $("#btn2").click(function() { 19 alert("HTML: " + $("#test1").html()); 20 }); 21 $("#btn3").click(function() { 22 alert("Value: " + $("#test2").val()); 23 }); 24 }); 25 26 </script> 27 </head> 28 29 <body> 30 31 <p id="test1">這是段落中的<b>粗體</b>文字。</p> 32 <button id="btn1">顯示 Text</button> 33 <button id="btn2">顯示 HTML</button> 34 <br /> 35 36 <p>姓名：<input type="text" id="test2" value="米老鼠"></p> 37 <button id="btn3">顯示 Value</button> 38 39 </body> 40 </html>
輸出結果：
這是段落中的粗體文字。
姓名：
2.2 獲取屬性 - attr()
jQuery attr() 方法用於獲取屬性值。
舉例（下面的例子演示如何獲得連結中 href 屬性的值）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function() { 15 $("button").click(function() { 16 alert($("#w3s").attr("href")); 17 }); 18 }); 19 20 </script> 21 </head> 22 23 <body> 24 25 <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p> 26 <button>顯示 href 值</button> 27 28 </body> 29 </html>
輸出結果：
3、設定內容和屬性
3.1 設定內容 - text()、html() 以及 val()
我們將使用前一章中的三個相同的方法來設定內容：
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素的內容（包括 HTML 標記）
- val() - 設定或返回表單欄位的值
下面的例子演示如何通過 text()、html() 以及 val() 方法來設定內容：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function() { 15 $("#btn1").click(function() { 16 $("#test1").text("Hello, world!"); 17 }); 18 $("#btn2").click(function() { 19 $("#test2").html("<b>Hello, world!</b>"); 20 }); 21 $("#btn3").click(function() { 22 $("#test3").val("Dolly Duck"); 23 }); 24 }); 25 26 </script> 27 </head> 28 29 <body> 30 31 <p id="test1">這是段落。</p> 32 <p id="test2">這是另一個段落。</p> 33 <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> 34 <button id="btn1">設定文字</button> 35 <button id="btn2">設定 HTML</button> 36 <button id="btn3">設定值</button> 37 38 </body> 39 </html>
輸出結果：
這是段落。
這是另一個段落。
Input field:
4、jQuery HTML 參考手冊
如需有關 jQuery HTML 方法的完整內容，請訪問以下參考手冊：