摘要：选择器选择器一基本选择器语法说明选择文档中的所有元素元素选择器，选择所有的元素，返回数组选择器，返回单个元素选择器，返回数组并列选择器，返回所有的元素和元素二层次选择器语法说明后代选择器，选择所有元素下面的所有子元素，包含非直接
title: jQuery 选择器
date: 2017-01-07 20:32:26
| 语法 | 说明 |
|---|---|
| $("*") | 选择文档中的所有元素 |
| $("div") | 元素选择器，选择所有的div元素，返回数组 |
| $("#id") | Id选择器，返回单个元素 |
| $(".class") | class选择器，返回数组 |
| $("p , div") | 并列选择器，返回所有的p元素和div元素 |
| 语法 | 说明 |
|---|---|
| $("A B") | 后代选择器，选择所有A元素下面的所有B子元素，包含非直接子节点 |
| $("A > B") | 子元素选择器，选择A下面的直接B子元素，不包含非直接子节点 |
| $("A + B") | 紧邻兄弟元素选择器，选择A元素后面紧邻的B元素，如果没有不选中，等同于next()方法 |
| $("A ~ B") | 兄弟元素选择器，选择A后面所有的B元素，等同于nextAll()方法 |
1、基本过滤选择器
| 语法 | 说明 |
|---|---|
| $("span : first") | 选取第一个元素 |
| $("span : last") | 选取第二个元素 |
| $("span : not(.wrap)") | 取非元素 |
| $("tr : even") | 选取偶数行（索引从0开始） |
| $("tr : odd") | 选取奇数行（索引从0开始） |
| $("tr : eq(2)") | 选取指定索引的元素（索引从0开始） |
| $("tr : gt(2)") | 选取大于索引号的元素（索引从0开始） |
| $("ul li : lt(2)") | 选取小于索引号的元素（索引从0开始） |
| $(" : header") | 选取所有的标题元素 |
| $(" : animated") | 选取所有的动画元素 |
2、内容过滤选择器
| 语法 | 说明 |
|---|---|
| $("span : contains("hello")") | 选取包含具体文本的元素 |
| $("span : empty”) | 选取不包含子元素或文本为空的元素 |
| $("ol li : parent”) | 选取包含子元素或文本不为空的元素 |
| $("div : has(span)”) | 选取子元素含有指定元素的元素，不是直系子元素也会生效 |
3、可见性过滤选择器
| 语法 | 说明 |
|---|---|
| $("div : hidden") | 仅选取display:none或input type="hidden"的元素，不选取visibility: hidden或opacity:0的元素，也就是说:hidden只匹配那些“隐藏的”并且不占空间的元素 |
| $("div : visible") | 选取可见的元素 |
4、属性过滤选择器
| 语法 | 说明 |
|---|---|
| $("[href]") | 选取所有带有 href 属性的元素 |
| $("[href = "#"]") | 选取所有 href 属性的值等于 "#" 的元素 |
| $("[href != "#"]") | 选取所有 href 属性的值不等于 "#" 的元素 |
| $("[herf ^= "http"]") | 选取所有 href 属性的值以 "http" 开头的元素 |
| $("[herf $= ".jsp"]") | 选取所有 href 属性的值以 "jsp" 结尾的元素 |
| $("[herf *= "www"]") | 选取所有 href 属性的值包含 "www" 的元素 |
1、基本表单选择器
| 语法 | 说明 |
|---|---|
| $(":input") | 选取所有的 input 元素 |
| $(":text") | 选取所有type="text"的 input 元素 |
| $(":password") | 选取所有type="password"的 input 元素 |
| $(":radio") | 选取所有type="radio"的 input 元素 |
| $(":checkbox") | 选取所有type="checkbox"的 input 元素 |
| $(":submit") | 选取所有type="submit"的 input 元素和button的元素 |
| $(":reset") | 选取所有type="reset"的 input 元素和button的元素 |
| $(":button") | 选取所有type="button"的 input 元素和所有标签为button的元素 |
| $(":image") | 选取所有type="image"的 input 元素 |
| $(":file") | 选取所有type="file"的 input 元素 |
2、表单元素过滤选择器
| 语法 | 说明 |
|---|---|
| $(":enabled") | 选择所有启用的 input 和 button 元素 |
| $(":disabled") | 选择所有禁用（即设置了disabled="disabled"）的 input 和 button 元素 |
| $(":selected") | 选择所有被选中下拉列表 选项 |
| $(":checked") | 选择所有被选中的复选框 或单选 按钮元素 |
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
语法： jQuery选择器.css("css属性", "css属性值");
$("div").css("background-color","red");
六、jQuery查找父、子、兄弟节点的方法
| 语法 | 说明 |
|---|---|
| jQuery.parent(expr) | 找父节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") |
| jQuery.parents(expr) | 查找所有祖先元素，从父元素开始查找 |
| jQuery.closest(expr) | 查找第一个匹配的祖先元素，从当前元素开始查找 |
| jQuery.children(expr) | 返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点 |
| jQuery.contents() | 返回下面的所有内容，包括节点和文本。 |
| jQuery.prev() | 返回上一个兄弟节点，不是所有的兄弟节点 |
| jQuery.prevAll() | 返回所有之前的兄弟节点 |
| jQuery.next() | 返回下一个兄弟节点，不是所有的兄弟节点 |
| jQuery.nextAll() | 返回所有之后的兄弟节点 |
| jQuery.siblings() | 返回兄弟姐妹节点，不分前后 |
| jQuery.find(expr) | 不会有初始集合中的内容，比如$("p"),find("span"),是从子元素中找，等同于$("p span") |
| jQuery.filter(expr) | 会有初始集合中的内容 |
jQuery选择器大全
jQuery选择器总结
w3school-jQuery 参考手册 - 选择器
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84758.html
摘要：选择器，若未作特别说明，获取的都是元素集合。过滤器名语法说明选取所有不可见元素选取所有可见元素注意过滤器一般是包含的内容为样式为表单类型为和的元素。四子元素过滤器子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。 转自个人博客本来是单独整理了一个CSS选择器的，但是在jQuery中基本都有对应的，所以就不发了。 jQuery选择器，若未作特别说明，获取的都是元素集合。...
摘要：代表的上下文对象是一个的上下文对象，可以调用的方法和属性值特殊选择器点击测试通过原生处理点击测试通过原生处理直接通过的方法改变颜色通过包装成对象改变颜色 DOM对象转化成jQuery对象 如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象 元素一 元素二 元素三 var ...
摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javasc...
摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javasc...
摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javasc...
阅读 2000·2023-04-25 17:57
阅读 1255·2021-11-24 09:39
阅读 2440·2019-08-29 16:39
阅读 3279·2019-08-29 13:44
阅读 3018·2019-08-29 13:14
阅读 2269·2019-08-26 11:36
阅读 3743·2019-08-26 11:00
阅读 915·2019-08-26 10:14
