JQuery选择器详解与示例
需积分: 9 187 浏览量
更新于2024-10-18
收藏 122KB PDF 举报
"这篇文档是关于JQuery选择器的详细说明,主要涵盖了1.3.2版本中的各种选择器用法,包括基本选择器、属性选择器、子元素选择器等,并通过实例代码展示了如何使用这些选择器进行元素操作。"
在JQuery库中,选择器是一个强大的工具,用于选取HTML文档中的特定元素。JQuery 1.3.2版本提供了丰富的选择器功能,简化了DOM操作。以下是对JQuery选择器的详细解析:
1. **基础选择器 (Basics)**
- **#id**:通过元素的ID选择器,如`$("#divId")`将选取具有指定ID的唯一元素。
- **.class**:根据元素的class选择,如`$(".some-class")`选取所有class为some-class的元素。
- **tagname**:按元素标签名选择,如`$("p")`选取所有段落元素。
2. **更变通的实例**
- 子元素选择器:`$("#selected-plays > li")`选取id为selected-plays元素下的所有li子元素。
- 属性选择器:无需使用`@`前缀,直接使用`$('a[title]')`选取所有有title属性的链接。例如,`$('a[href^="mailto:"]').addClass('mailto')`将所有href属性以"mailto:"开头的链接添加一个'mailto'类。
3. **属性选择器**
- **属性值以...开头**:`$('a[href^="mailto:"]')`选取href属性以"mailto:"开头的链接。
- **属性值以...结尾**:`$('a[href$=".pdf"]')`选取href属性以".pdf"结尾的链接。
- **属性值包含...**:`$('a[href*="mysite.com"]')`选取href属性中包含"mysite.com"的链接。
4. **jQuery自定义选择器**
- **:eq(index)**:选取索引为index的元素,如`$('div.horizontal:eq(1)')`选取所有水平排列的div中的第二个元素。
- **:contains(text)**:选取包含指定文本的元素,如`$('table td:contains("Henry")').addClass('highlight')`将包含"Henry"的表格单元格高亮。
5. **其他选择器**
- **:first**:选取第一个元素,如`$('div:first')`选取第一个div。
- **:last**:选取最后一个元素,如`$('p:last')`选取最后一个段落。
- **:not(selector)**:排除符合选择器的元素,如`$('input:not(:checked)')`选取未被选中的输入元素。
- **:gt(index)**:选取索引大于index的元素,如`$('li:gt(2)')`选取所有索引大于2的li元素。
- **:lt(index)**:选取索引小于index的元素,如`$('div:lt(3)')`选取前三个div。
JQuery的选择器体系极大地增强了对DOM的操作效率,使得开发者能更轻松地选取和操作页面上的元素,实现丰富的动态效果和交互。通过熟练掌握这些选择器,可以编写出更加高效和简洁的JQuery代码。
2013-02-15 上传
218 浏览量
2012-12-13 上传
2011-05-04 上传
2018-10-26 上传
2012-08-02 上传
2011-06-24 上传
2009-12-13 上传
2013-03-01 上传
deb_ug
- 粉丝: 7
- 资源: 14
最新资源
- C++ Qt影院票务系统源码发布,代码稳定,高分毕业设计首选
- 纯CSS3实现逼真火焰手提灯动画效果
- Java编程基础课后练习答案解析
- typescript-atomizer: Atom 插件实现 TypeScript 语言与工具支持
- 51单片机项目源码分享:课程设计与毕设实践
- Qt画图程序实战:多文档与单文档示例解析
- 全屏H5圆圈缩放矩阵动画背景特效实现
- C#实现的手机触摸板服务端应用
- 数据结构与算法学习资源压缩包介绍
- stream-notifier: 简化Node.js流错误与成功通知方案
- 网页表格选择导出Excel的jQuery实例教程
- Prj19购物车系统项目压缩包解析
- 数据结构与算法学习实践指南
- Qt5实现A*寻路算法:结合C++和GUI
- terser-brunch:现代JavaScript文件压缩工具
- 掌握Power BI导出明细数据的操作指南