jQuery学习笔记之jQuery选择器的使用
jQuery选择器是jQuery库中的核心功能,它允许开发者高效地选取DOM中的特定元素,进而进行操作。在jQuery中,选择器种类繁多,可以根据不同的需求来选取元素。下面将详细介绍各种jQuery选择器及其用法。 一、基本选择器 1. `#id`:通过ID选取元素,例如`$("#id1")`会选择id为"id1"的元素。 2. `.class`:通过类名选取元素,如`$(".myClass")`会选择所有类名为"myClass"的元素。 3. `element`:通过元素名选取所有该类型的元素,如`$("div")`会选择所有`<div>`元素。 4. `*`:匹配所有元素,例如`$("*")`会选取页面上的所有元素。 5. `selector1,selector2,...`:以逗号分隔的多个选择器,可以选择多个类或id名,如`$(".class1, #id2")`会选择类为"class1"或id为"id2"的元素。 二、层次选择器 1. `"ancestor descendant"`:选择祖先元素下的后代元素,如`$("div p")`会选择所有位于`<div>`内的`<p>`元素。 2. `"parent>child"`:选择父元素下的子元素,如`$("ul > li")`会选择所有`<ul>`下的直接`<li>`子元素。 3. `'prev+next'`:选择紧跟在`prev`后面的首个`next`元素,例如`$("div + span")`会选择紧跟在`<div>`后的第一个`<span>`元素。 4. `'prev~siblings'`:选择`prev`后面的同级`siblings`元素,例如`$("div ~ p")`会选择所有在`<div>`后面的`<p>`元素。这与`$(.prev).nextAll("siblings")`作用相同。 三、过滤选择器 1. `:first`:选择第一个元素,如`$("div:first")`会选择第一个`<div>`元素。 2. `:last`:选择最后一个元素。 3. `:not(selector)`:选择非`selector`的元素。 4. `:even`:选择偶数索引的元素。 5. `:odd`:选择奇数索引的元素。 6. `:eq(index)`:选择索引等于`index`的元素。 7. `:gt(index)`:选择索引大于`index`的元素。 8. `:lt(index)`:选择索引小于`index`的元素。 9. `:header`:选择所有`<H>`元素。 10. `:animated`:选择正在执行动画的元素。 四、内容过滤选择器 1. `:contains(text)`:选择包含特定文本的元素,如`$("div:contains('hello')")`会选择包含"hello"的`<div>`元素。 2. `:empty`:选择没有内容的元素。 3. `:has(selector)`:选择包含指定元素的元素。 4. `:parent`:选择有子元素的元素。 五、可见性过滤选择器 1. `:hidden`:选择所有隐藏的元素。 2. `:visible`:选择所有可见的元素。 六、属性过滤选择器 1. `[attribute]`:选择具有指定属性的元素,如`$("div[id]")`会选择所有有id属性的`<div>`元素。 2. `[attribute=value]`:选择属性`attribute`等于`value`的元素。 3. `[attribute!=value]`:选择属性`attribute`不等于`value`的元素。 4. `[attribute^=value]`:选择属性`attribute`以`value`开头的元素。 5. `[attribute$=value]`:选择属性`attribute`值以`value`结尾的元素。 6. `[attribute*=value]`:选择属性`attribute`值中包含`value`的元素。 7. `[selector1][selector2]...`:组合条件,选择满足所有条件的元素。 七、子元素过滤选择器 1. `:nth-child(index/even/odd/equation)`:选择父元素下的子元素,如`$("div:nth-child(2)")`会选择父元素的第二个子`<div>`。 2. `:first-child`:选择父元素的第一个子元素。 3. `:last-child`:选择父元素的最后一个子元素。 4. `:only-child`:选择父元素下唯一的孩子元素。 八、表单属性过滤 1. `:enabled`:选择所有启用的表单元素,如`$("#form1 :enabled")`会选择表单id为"form1"的可用元素。 2. `:disabled`:选择所有禁用的表单元素。 3. `:checked`:选择所有被选中的复选框或单选按钮。 4. `:selected`:选择所有被选中的选项元素。 九、表单对象过滤 1. `input`:选择所有`<input>`、`<textarea>`、`<select>`和`<button>`元素。 2. `text`、`password`、`radio`、`checkbox`、`submit`、`image`、`reset`、`button`、`file`、`hidden`:分别对应不同类型的输入元素。 掌握这些jQuery选择器,可以帮助开发者更加高效地定位和操作DOM元素,实现丰富的网页交互效果。在实际开发中,根据需求灵活运用选择器组合,可以实现更复杂的选取逻辑。
- 粉丝: 5
- 资源: 963
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 无人机检测2-YOLO(v5至v9)、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- linux内核学习很好的书籍,建议初学者都去阅读一下
- abb上位机开发,远程启动与数据读取
- wt-js-debug v2.7.6
- 施工防护检测38-YOLO(v5至v9)、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- 基于Python实现的新浪微博用户数据爬虫源码(文档说明,支持HTTP请求与数据解析,多格式数据存储与自动化采集)
- 实现按层次遍历二叉树的C++代码
- 施工防护分类检测45-YOLO(v5至v9)、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- 基于DS18B20数字温度计设计
- 地震数据处理小软件vista5.5