jQuery 拥有可操作 HTML 元素和属性的强大方法。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/jquery/dist/jquery.min.js"></script> 7 </head> 8 <body> 9 <!--1.cdn加速--> 10 <!--一般都用百度--> 11 <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>--> 12 <!--2.直接下载jQuery，去官网下载https://code.jquery.com/jquery-3.6.0.js--> 13 <!--3.npm install jquery--> 14 </body> 15 </html>
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); -
替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
谷歌和微软的服务器都存有 jQuery 。