JQuery基础教程:选择器与过滤方法解析
版权申诉
115 浏览量
更新于2024-06-28
收藏 1.46MB DOCX 举报
"这篇文档是关于JQuery基础的笔记,主要涵盖了JQuery的选择器、层级选择器和过滤选择器的使用方法,适用于互联网开发中的DOM操作。"
在JQuery库中,"$"符号是一个非常核心的标识,它实际上是对JQuery函数的别名。`$(document).ready(function() {...})` 和 `$(function() {...})` 是等价的,它们都是确保在HTML文档加载完成后执行的代码,这样可以避免因页面未完全加载而引发的问题。JQuery的一个特点是它具有容错机制,即使在JQuery发生错误时,也不会像JavaScript那样抛出错误,而是默默地处理错误,这提高了程序的稳定性。
**1. JQuery选择器**
- **基本选择器**:`$("#idName")` 用于选取id为"idName"的元素;`$(".className")` 用于选取class为"className"的元素;`$("tagName")` 用于选取所有标签名为"tagName"的元素;`$("*")` 则匹配所有元素;`$("li*")` 匹配所有li元素的子元素。
- **群组匹配**:`$("selector1,selector2")` 可以同时选取符合"selector1"或"selector2"的元素。
- **限定选择器**:`$("box.div")` 会选取父元素为box的div元素。
**2. 层级选择器**
- **后代选择器**:`$("ab")` 选取所有a元素的后代b元素。
- **子代选择器**:`$("a>b")` 选取a元素的直接子元素b。
- **相邻兄弟选择器**:`$("a+b")` 选取紧跟在a元素后面的b元素。
- **后续兄弟选择器**:`$("a~b")` 选取a元素后面的所有同级b元素。
**3. 过滤选择器**
- **基本过滤**:
- `$("li:first")` 选取第一个li元素。
- `$("li:last")` 选取最后一个li元素。
- `$("li:eq(index)")` 选取索引为index的li元素(索引从0开始)。
- **范围过滤**:
- `$("li:lt(index)")` 选取索引小于index的所有li元素。
- `$("li:gt(index)")` 选取索引大于index的所有li元素。
- `$("li:not(selector)")` 选取不匹配"selector"的li元素。
- **行过滤**:
- `$("li:odd")` 选取索引为奇数的li元素(即偶数行)。
- `$("li:even")` 选取索引为偶数的li元素(即奇数行)。
**4. 属性过滤选择器**
- `$("tag[attribute]")` 选取具有指定属性"attribute"的元素。
- `$("tag[attribute=value]")` 选取属性"attribute"等于"value"的元素。
- `$("tag[attribute^=value]")` 选取属性"attribute"以"value"开头的元素。
- `$("tag[attribute$=value]")` 选取属性"attribute"以"value"结尾的元素。
- `$("tag[attribute!=value]")` 选取属性"attribute"不等于"value"的元素。
**5. 子元素选择器**
- `$("li:first")` 选取所有匹配元素中的第一个。
- `$("li:first-child")` 选取每个父元素中的第一个li子元素。
这些选择器极大地简化了DOM操作,使得开发者可以更高效地定位和操作网页上的元素。了解并熟练掌握这些选择器对于进行网页动态效果的实现和交互设计至关重要。在实际开发中,结合使用这些选择器,可以实现诸如事件绑定、元素增删改查等各种功能,大大提高开发效率。
2020-04-04 上传
2023-06-10 上传
2023-02-24 上传
2023-05-30 上传
2023-05-31 上传
2024-01-11 上传
2023-05-31 上传
![](https://profile-avatar.csdnimg.cn/3c39599dc7cf4373a282763035024fb7_m0_62089210.jpg!1)
春哥111
- 粉丝: 1w+
- 资源: 5万+
最新资源
- 多模态联合稀疏表示在视频目标跟踪中的应用
- Kubernetes资源管控与Gardener开源软件实践解析
- MPI集群监控与负载平衡策略
- 自动化PHP安全漏洞检测:静态代码分析与数据流方法
- 青苔数据CEO程永:技术生态与阿里云开放创新
- 制造业转型: HyperX引领企业上云策略
- 赵维五分享:航空工业电子采购上云实战与运维策略
- 单片机控制的LED点阵显示屏设计及其实现
- 驻云科技李俊涛:AI驱动的云上服务新趋势与挑战
- 6LoWPAN物联网边界路由器:设计与实现
- 猩便利工程师仲小玉:Terraform云资源管理最佳实践与团队协作
- 类差分度改进的互信息特征选择提升文本分类性能
- VERITAS与阿里云合作的混合云转型与数据保护方案
- 云制造中的生产线仿真模型设计与虚拟化研究
- 汪洋在PostgresChina2018分享:高可用 PostgreSQL 工具与架构设计
- 2018 PostgresChina大会:阿里云时空引擎Ganos在PostgreSQL中的创新应用与多模型存储