本篇文章成哥继续带大家来学习前端教程之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.
2.
3.
4.
5. jQuery基础教程
6.
7.
8.
9.
10.
11.
12.
13.
14.
15. 03 jQuery选择器
我们先创建一个HTML页面，然后在其内引用jquery，通过该HTML我们来演示各种jquery选择器查询的内容，其HTML页面内容如下:
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
21. （1）HTML elements选择器
HTML elements选择器可以将HTML页面的div、p、span、table等标签通过在其上加引号进行筛选，具体如下
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
30.
31.
32. 
（2）class选择器
class选择器就是通过class名称找到对应的标签对象，具体示例如下
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
30.
31.
32. 
（3）id选择器
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
30.
31.
32. 
（4）组合选择器
jquery允许在指定选择标签元素同时，指定其class名称或者id来进行筛选，这种筛选方式称其为组合选择器，具体示例如下:
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
32.
33.
34. 
（5）多选择器
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
30.
31.
32. 
（6）层级选择器
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
30.
31.
32. 
（7）属性选择器
1.
2.
3.
4.
5. jQuery基础教程
6.
7.
8. jQuery选择器
9. 带class样式的p标签
10. 内嵌span的p标签
11. 带id的p标签 内嵌class的span标签
12.
13. 在div内部带id的p标签
14. 在div内部带id的p标签在内嵌span标签
15.
16.
17.
18.
19.
20.
30.
31.
32. 
04 总结
至此我们《jQuery基础教程上篇》就讲完了，下篇内容主要讲解jQuery的过滤器及常用操作方法等相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 ZLME@ZLME.COM 举报，一经查实，立刻删除。