"JQUERY学习笔记,JavaScript库,选择器分类" 在JavaScript的世界中,jQuery是一个非常流行的库,它简化了许多常见的DOM操作、事件处理和动画效果。jQuery的选择器是其强大功能的核心部分,允许开发者高效地选取页面上的特定元素。 1. **ID选择器** (`#id`): 使用井号`#`前缀后跟一个ID名称,可以选取具有该ID的唯一元素。例如,`$('#myId')`会选取ID为`myId`的元素。 2. **类选择器** (`'.class'`): 通过点`.`来选取具有特定CSS类的所有元素。例如,`$('.myClass')`将选取所有类名为`myClass`的元素。 3. **标签选择器** (`element`): 直接写元素标签名,如`$('p')`,将选取页面上所有`<p>`元素。 4. **全选择器** (`'*'`): `*$`能选取页面上的所有HTML元素,但通常由于影响范围过大,不推荐在实际应用中频繁使用。 5. **多元素选择器** (`sele1,sele2`): 使用逗号分隔多个选择器,可以同时选取不同类型的元素,例如`$('div,span')`选取所有`<div>`和`<span>`元素。 6. **层次选择器** (`divp`): 这种选择器选取指定父元素下的子元素,如`$('div p')`选取所有`<div>`内的`<p>`元素。 7. **子元素选择器** (`div>p`): 与层次选择器类似,但只选取直接子元素,不包括后代元素。 8. **相邻兄弟选择器** (`div+p`): 选取紧邻`<div>`后面的那个同级元素,如`<p>`。 9. **后续兄弟选择器** (`div~p`): 选取所有紧随`<div>`之后的同级`<p>`元素,直到同级元素末尾。 10. **第一个元素选择器** (`:first`): 添加`:first`过滤器,如`$('div:first')`选取第一个`<div>`元素。 11. **最后一个元素选择器** (`:last`): 类似于`:first`,但选取最后一个元素,如`$('div:last')`。 12. **索引选择器** (`:eq(index)`): 通过`:eq()`选择特定索引的元素,从0开始。例如,`$('li:eq(1)')`选取第二个`<li>`元素(因为索引是从0开始的)。 13. **文本包含选择器** (`:contains(text)`): `$('li:contains("text")')`选取所有包含`text`文本的`<li>`元素,即使是在子元素中。 14. **后代元素选择器** (`:has(selector)`): 选取含有指定选择器元素的父元素,如`$('li:has("p")')`选取包含`<p>`的`<li>`元素。 15. **隐藏元素选择器** (`:hidden`): `$('div:hidden')`选取所有样式设置为`display:none`的`<div>`元素。 16. **可见元素选择器** (`:visible`): `$('span:visible')`选取所有`display`属性不是`none`的`<span>`元素。 17. **属性选择器** (`[attribute=value]`): `$('li[title=book]')`选取所有`<li>`元素,其`title`属性值等于`book`。 这些选择器的组合使用能帮助开发者更精确地定位和操作页面上的元素,从而实现丰富的交互和动态效果。理解并熟练掌握jQuery的选择器是提升前端开发效率的关键。
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/b32b7f32b6d748af9e9a1474d3165f4e_qq_56248592.jpg!1)
- 粉丝: 3949
- 资源: 328
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 解决Eclipse配置与导入Java工程常见问题
- 真空发生器:工作原理与抽吸性能分析
- 爱立信RBS6201开站流程详解
- 电脑开机声音解析:故障诊断指南
- JAVA实现贪吃蛇游戏
- 模糊神经网络实现与自学习能力探索
- PID型模糊神经网络控制器设计与学习算法
- 模糊神经网络在自适应PID控制器中的应用
- C++实现的学生成绩管理系统设计
- 802.1D STP 实现与优化:二层交换机中的生成树协议
- 解决Windows无法完成SD卡格式化的九种方法
- 软件测试方法:Beta与Alpha测试详解
- 软件测试周期详解:从需求分析到维护测试
- CMMI模型详解:软件企业能力提升的关键
- 移动Web开发框架选择:jQueryMobile、jQTouch、SenchaTouch对比
- Java程序设计试题与复习指南
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)