文章插图
本篇文章成哥继续带大家来学习前端教程之jQuery，它将DOM的操作进行了封装，可以大大降低我们前端开发时操作DOM的复杂度 。下面我们就一起来学习内容吧！
01 jQuery简介jQuery 是开源软件，使用 MIT 许可证授权 。jQuery 的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发 Ajax 程序 。jQuery核心理念是write less,do more（写得更少,做得更多），他内部帮我们把几乎所有功能都做了封装 。
02 jQuery使用在使用jQuery时，需要提前下载并应用jQuery之后，才能在代码中使用，也可以通过CDN引用来使用 。下面我们到jQuery官方网站下载jQuery文件，然后在HTML页面应用具体如下
1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.9.<!-- 通过使用jquery文件来使用jquery -->10.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>11.12.<!-- 通过微软cdn来使用jquery -->13.<script src="http://img.sichuanlong.com/220926/001A3M52-2.jpg"></script>14. </body>15. </html>03 jQuery选择器我们先创建一个HTML页面，然后在其内引用jquery，通过该HTML我们来演示各种jquery选择器查询的内容，其HTML页面内容如下:1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.<p>jQuery选择器</p>9.<p class="foo">带class样式的p标签</p>10.<p><span>内嵌span的p标签</span></p>11.<p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>12.<div>13.<p my-id="my_para">在div内部带id的p标签</p>14.<p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15.</div>16.17.<!-- 通过使用jquery文件来使用jquery -->18.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>19.20. </body>21. </html>（1）HTML elements选择器HTML elements选择器可以将HTML页面的div、p、span、table等标签通过在其上加引号进行筛选，具体如下
1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.<p>jQuery选择器</p>9.<p class="foo">带class样式的p标签</p>10.<p><span>内嵌span的p标签</span></p>11.<p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>12.<div>13.<p my-id="my_para">在div内部带id的p标签</p>14.<p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15.</div>16.17.<!-- 通过使用jquery文件来使用jquery -->18.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>19.20.<script>21.// $()该语法标识在html加载完成再执行function()匿名函数中的内容22.$(function () {23.24.// 元素选择器，查询html页面中所有p标签25.var a = $("p");26.// 我们将查询到的内容打印出来27.console.log(a)28.})29.</script>30.31. </body>32. </html>（2）class选择器class选择器就是通过class名称找到对应的标签对象，具体示例如下
1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.<p>jQuery选择器</p>9.<p class="foo">带class样式的p标签</p>10.<p><span>内嵌span的p标签</span></p>11.<p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>12.<div>13.<p my-id="my_para">在div内部带id的p标签</p>14.<p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15.</div>16.17.<!-- 通过使用jquery文件来使用jquery -->18.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>19.20.<script>21.// $()该语法标识在html加载完成再执行function()匿名函数中的内容22.$(function () {23.24.// class选择器语法格式是'.+class名称'如下所示25.var a = $(".foo");26.// 我们将查询class名称为foo的所有标签对象27.console.log(a)28.})29.</script>30.31. </body>32. </html>
以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：
- 小学生应该写什么作文
- 小学生带什么水果作文
- 小学生带什么水果作文400字左右
- 学生家长给学校送锦旗写什么
- 考研复试介绍家乡泰安
- 先写灰雀什么接着列宁
- 夏天的什么写景作文600字作文
- 夏天的什么写景作文600字
- 五年级作文同学真什么
- 我是秋雨中的什么作文600字作文怎么写