请求的请求怎么写(请求的怎么写)

今天有麻布岗信息网小编为大家分享以下内容：

本篇文章成哥继续带大家来学习前端教程之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. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. 9. 10. <scriptsrc="jQuery/jquery-3.5.1.js"></script>11. 12. 13. <scriptsrc="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>14. </body>15. </html> 03 jQuery选择器

我们先创建一个HTML页面，然后在其内引用jquery，通过该HTML我们来演示各种jquery选择器查询的内容，其HTML页面内容如下:

（1）HTML elements选择器

HTML elements选择器可以将HTML页面的div、p、span、table等标签通过在其上加引号进行筛选，具体如下

1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. <p>jQuery选择器</p>9. <pclass="foo">带class样式的p标签</p>10. <p><span>内嵌span的p标签</span></p>11. <pid="bar">带id的p标签<spanclass="foo">内嵌class的span标签</span></p>12. <div>13. <pmy-id="my_para">在div内部带id的p标签</p>14. <pmy-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15. </div>16. 17. 18. <scriptsrc="jQuery/jquery-3.5.1.js"></script>19. 20. <script>21. //$()该语法标识在html加载完成再执行function()匿名函数中的内容22. $(function(){23. 24. //元素选择器，查询html页面中所有p标签25. vara=$("p");26. //我们将查询到的内容打印出来27. console.log(a)28. })29. </script>30. 31. </body>32. </html>

（2）class选择器

class选择器就是通过class名称找到对应的标签对象，具体示例如下

1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. <p>jQuery选择器</p>9. <pclass="foo">带class样式的p标签</p>10. <p><span>内嵌span的p标签</span></p>11. <pid="bar">带id的p标签<spanclass="foo">内嵌class的span标签</span></p>12. <div>13. <pmy-id="my_para">在div内部带id的p标签</p>14. <pmy-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15. </div>16. 17. 18. <scriptsrc="jQuery/jquery-3.5.1.js"></script>19. 20. <script>21. //$()该语法标识在html加载完成再执行function()匿名函数中的内容22. $(function(){23. 24. //class选择器语法格式是'.+class名称'如下所示25. vara=$(".foo");26. //我们将查询class名称为foo的所有标签对象27. console.log(a)28. })29. </script>30. 31. </body>32. </html>

（3）id选择器

1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. <p>jQuery选择器</p>9. <pclass="foo">带class样式的p标签</p>10. <p><span>内嵌span的p标签</span></p>11. <pid="bar">带id的p标签<spanclass="foo">内嵌class的span标签</span></p>12. <div>13. <pmy-id="my_para">在div内部带id的p标签</p>14. <pmy-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15. </div>16. 17. 18. <scriptsrc="jQuery/jquery-3.5.1.js"></script>19. 20. <script>21. //$()该语法标识在html加载完成再执行function()匿名函数中的内容22. $(function(){23. 24. //id选择器语法格式是'#+class名称'如下所示25. varbar=$("#bar");26. //将查询到id名称为bar的所有标签进行打印27. console.log(bar)28. })29. </script>30. 31. </body>32. </html>

（4）组合选择器

jquery允许在指定选择标签元素同时，指定其class名称或者id来进行筛选，这种筛选方式称其为组合选择器，具体示例如下:

1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. <p>jQuery选择器</p>9. <pclass="foo">带class样式的p标签</p>10. <p><spanid="boo">内嵌span的p标签</span></p>11. <pid="bar">带id的p标签<spanclass="foo">内嵌class的span标签</span></p>12. <div>13. <pmy-id="my_para">在div内部带id的p标签</p>14. <pmy-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15. </div>16. 17. 18. <scriptsrc="jQuery/jquery-3.5.1.js"></script>19. 20. <script>21. //$()该语法标识在html加载完成再执行function()匿名函数中的内容22. $(function(){23. 24. //组合选择器语法格式"元素标签+class名称/id名称"25. varspan_class=$("span.foo");26. varspan_id=$("span#boo")27. //将查询的标签对象打印出来28. console.log(span_class)29. console.log(span_id)30. })31. </script>32. 33. </body>34. </html>

（5）多选择器

1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. <p>jQuery选择器</p>9. <pclass="foo">带class样式的p标签</p>10. <p><spanid="boo">内嵌span的p标签</span></p>11. <pid="bar">带id的p标签<spanclass="foo">内嵌class的span标签</span></p>12. <div>13. <pmy-id="my_para">在div内部带id的p标签</p>14. <pmy-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15. </div>16. 17. 18. <scriptsrc="jQuery/jquery-3.5.1.js"></script>19. 20. <script>21. //$()该语法标识在html加载完成再执行function()匿名函数中的内容22. $(function(){23. 24. //多选择器,可以将多种选择器进行组合，之间用逗号隔开25. vara=$("p#bar,.foo");26. console.log(a);27. 28. })29. </script>30. 31. </body>32. </html>

（6）层级选择器

1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. <p>jQuery选择器</p>9. <pclass="foo">带class样式的p标签</p>10. <p><spanid="boo">内嵌span的p标签</span></p>11. <pid="bar">带id的p标签<spanclass="foo">内嵌class的span标签</span></p>12. <div>13. <pmy-id="my_para">在div内部带id的p标签</p>14. <pmy-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15. </div>16. 17. 18. <scriptsrc="jQuery/jquery-3.5.1.js"></script>19. 20. <script>21. //$()该语法标识在html加载完成再执行function()匿名函数中的内容22. $(function(){23. 24. //层级选择器,选择p标签中含有span标签的对象元素25. vara=$("pspan");26. console.log(a);27. 28. })29. </script>30. 31. </body>32. </html>

（7）属性选择器

1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="UTF-8">5. <title>jQuery基础教程</title>6. </head>7. <body>8. <p>jQuery选择器</p>9. <pclass="foo">带class样式的p标签</p>10. <p><spanid="boo">内嵌span的p标签</span></p>11. <pid="bar">带id的p标签<spanclass="foo">内嵌class的span标签</span></p>12. <div>13. <pmy-id="my_para">在div内部带id的p标签</p>14. <pmy-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15. </div>16. 17. 18. <scriptsrc="jQuery/jquery-3.5.1.js"></script>19. 20. <script>21. //$()该语法标识在html加载完成再执行function()匿名函数中的内容22. $(function(){23. 24. //属性选择器,语法格式"标签元素[属性名称=属性值]",查询含有my-id属性值为my_para的p标签25. vara=$("p[my-id=my_para]");26. console.log(a);27. 28. })29. </script>30. 31. </body>32. </html> 04 总结

至此我们《jQuery基础教程上篇》就讲完了，下篇内容主要讲解jQuery的过滤器及常用操作方法等相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

麻布岗信息网(www.517338.com)综合在线信息,汇聚城市生活,美食,购物,旅游,房产,交通,家居,财经,教育,健康,娱乐,历史,汽车,生活消费门户网站

• 邮件服务器如何搭建(winmail搭建邮件服务器)	• 钢琴基础教程(钢琴入门零基础教程)
• 初学者的教程(初学者基础教程具体操作如下说明	• 零基础怎样自学(零基础视频教学)
• 初学素描画简单教程(素描教程入门)	• 钢琴初学者基本教程(弹钢琴入门教学)
• 电子琴的基础教程(电子琴入门讲解)	• 爵士舞的基础教程(爵士舞的教程)
• 拜厄钢琴基础教程电子书(拜厄《钢琴基础教程》)	• 电子琴基础教程0基础(电子琴指法图解)