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 方法的完整内容，请访问以下参考手册：