1. jQuery 拥有可操作 HTML 元素和属性

1-1. jQuery DOM 操作

提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

  1. 获得内容 - text()、html() 以及 val()
  2. 三个简单实用的用于 DOM 操作的 jQuery 方法：
  4. text() - 设置或返回所选元素的**文本内容
  5. html() - 设置或返回所选元素的**内容（包括 HTML 标记）
  6. val() - 设置或返回**表单字段的值

隐藏与显示.gif

  1. <body>
  2.     <p id="test">这是段落中的<b>粗体</b>文本。</p>
  3.     <button id="btn1">显示文本</button>
  4.     <button id="btn2">显示 HTML</button>
  6.     <script>
  7.         $(document).ready(function(){
  8.           $("#btn1").click(function(){
  9.             alert("Text: " + $("#test").text());
  10.           });
  11.           $("#btn2").click(function(){
  12.             alert("HTML: " + $("#test").html());
  13.           });
  14.         });
  15.     </script>
  16. </body>

获得输入字段的值

隐藏与显示.gif

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     alert("Value: " + $("#test").val());
  9.   });
  10. });
  11. </script>
  12. </head>
  14. <body>
  15. <p>姓名：<input type="text" id="test" value="tom"></p>
  16. <button>显示值</button>
  17. </body>
  19. </html>
  1. 获取属性 - attr()
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     alert($("#w3s").attr("href"));
  9.   });
  10. });
  11. </script>
  12. </head>
  14. <body>
  15. <p><a href="http://www.w3school.com.cn" id="w3s">http://127.0.0.1:5500/12%E8%8E%B7%E5%8F%96.html</a></p>
  16. <button>显示 href 值</button>
  17. </body>
  19. </html>

1-2 获取属性-attract（）

隐藏与显示.gif

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <script src="jquery/jquery-3.6.0.js"></script>
  6.     <script>
  7.         $(document).ready(function () {
  8.             $("button").click(function () {
  9.                 alert($("#w3s").attr("href"));
  10.             });
  11.         });
  12.     </script>
  13. </head>
  15. <body>
  16.     <p><a href="http://127.0.0.1:5500/12%E8%8E%B7%E5%8F%96.html"
  17.             id="w3s">http://127.0.0.1:5500/12%E8%8E%B7%E5%8F%96.html</a></p>
  18.     <button>显示 href 值</button>
  19. </body>
  21. </html>