jQuery 选择器 作者：马育民 • 2024-12-23 22:04 • 阅读：10015 # 介绍 jQuery选择器：用于获取jQuery对象，与 CSS 选择器类似 # 语法 ``` $("选择器表达式") ``` # 基础选择器 用法与 CSS 选择器类似 ### id选择器 ``` $("#id) ``` 相当于： `document.getElementById("id");` ### 标签选择器 ``` $("div") ``` 相当于 `document.getElementsByTagName(“div");` ### 类选择器 参数为css的样式类名，返回使用当前样式类渲染的全部元素对应的jQuery对象。 ``` $(".myClass")； ``` ### 通配符选择器 匹配所有元素对应的jQuery对象。 ``` $("*") ``` ### 选择多个元素 用来获取符合多个表达式的jQuery对象 ``` jQuery(“#book,div,.box”); ``` 选择 `id是book`、`div标签`、`类样式是 .box` 的元素 # 层次选择器 通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等。 - parent child：匹配的parent选择器选择的元素下符合child选择器的后代元素（所有子孙）。 例子：`$("form input")` 获取form表单下所有input标签。 - parent > child：匹配的parent选择器选择的元素下所有符合child选择器的直接后代元素。 例子：`$("form > input")` 获取form表单下直接子节点input标签。 # 兄弟选择器 - prev + next：匹配符合prev选择器的元素后的下一个匹配next选择器的元素（同级兄弟）。 例子：`$("label + input")` 获取label标签的下一个input标签的dom元素 # 属性选择器 通过元素的属性来获取相应的元素。 - `[attribute]`： 匹配包含指定属性的元素。 例子：`$("div[id]")` 获取所有具有id值的div对象。 - `[attribute=value]`：匹配给定的属性是某个特定值的元素。 例子：`$("input[name='userName']")` 获取name取值为userName的输入框。 - `[attribute!=value]`：匹配所有不含有指定的属性，或者属性不等于特定值的元素。 例子：`$("input[name!='userName']")`获取name取值为非userName或不具备name属性的输入框。 - `[attribute^=value]`：匹配给定的属性是以某些值开始的元素 例子：`$("input[name^='news']")` 获取name取值以news开头的输入框 - `[attribute$=value]`：匹配给定的属性是以某些值结尾的元素。 例子：`$("input[name$='end']")`获取name取值以end结尾的输入框。 - `[attribute*=value]`:匹配给定的属性是以包含某些值的元素。 例子：`$("input[name*='con']")` 获取name取值包含con的输入框。 - `[attributeFilter1][attributeFilterN]`：组合使用。 例子：`$("input[id][name$='man']")` 获取具有id属性，name取值以man结尾的输入框。 # 过滤选择器 通过特定的过滤规则来筛选出所需的 DOM 元素， , 都以 `:` 开头。 过滤选择器可以分为如下几种： - 基础过滤选择器 - 子元素过滤选择器 - 内容过滤选择器 - 可见性过滤选择器 - 表单过滤选择器 ### 基础过滤选择器 - :first :匹配找到的第一个元素。示例:$(”tr:first”) - :last :匹配找到的最后一个元素。与 :first 相对应。示例:$(”tr:last”) - :not(selector)：在返回集合清除不匹配指定选择器的元素。示例:$(”input:not(:checked)”) - :even ：匹配返回结果集合中索引值为偶数的元素。示例:$(”tr:even”) - : odd ：匹配返回结果集合中索引值为基数的元素。 示例:$(”tr:odd”) - :eq(index)：匹配返回结果集中第index位置的元素。示例:$(”tr:eq(0)”) - :gt(index) ： : 匹配所有大于指定索引值的元素。示例:$(”tr:gt(0)”) - :lt(index) ：匹配所有小于指定索引值的元素。示例:$(”tr:lt(2)”) - :header(固定写法) ：匹配 h1-h6的标题元素。示例:$(”:header”) ### 子元素过滤选择器 - :nth-child(index/even/odd/equation):匹配选中元素是父元素的第（index）/基数/偶数/3n/个元素。与的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始。 示例: $(”ul li:nth-child(2)”) - :nth-last-child(index/even/odd/equation):匹配选中元素是父元素的倒数第（index）/基数/偶数/3n/个元素。与nth-child顺序相反。 示例: $(”ul li:nth-last-child(2)”) - :first-child :匹配选中元素是父元素的第一个子元素。 示例: $(”ul li:first-child”) - :last-child ：匹配选中元素是父元素的最后一个子元素。 示例: $(”ul li:last-child”) - : only-child ：匹配选中元素是父元素的唯一子元素，如当前元素有兄弟节点，将被过滤掉。 示例: $(”ul li:only-child”) ### 内容过滤选择器 在已经选择的对象中根据它所包含的子元素和文本内容进行过滤。 - :contains(text)：匹配包含给定文本的元素，一般用作对元素内文字内容进行过滤 示例: $(”div:contains(’str’)”) - :empty ：匹配所有不包含子元素或者文本的空元素。 示例: $(”td:empty”) 返回值 集合元素 - :has(selector)：在已经筛选的元素中根据selector在进行筛选，只有符合：之前以及has中定义的选择器规则，元素才能被选择。 示例: $(”div:has(p)”) - :parent ：匹配含有子元素或者文本的元素，与empty相对。 示例: $(”td:parent”) 返回值 集合元素 ### 可见度过滤选择器 是根据元素的可见和不可见状态来选择相应的元素，例如元素display：none、<input type=hidden/>为不可见。 - :hidden :匹配所有的不可见元素。 示例: $(”input:hidden”) - :visible:匹配所有的可见元素。 示例: $(”input:visible”) 返回值 集合元素 ### 表单过滤选择器 可根据表单元素的类型以及表单元素的状态进行过滤 类型过滤器：示例 $(li:input) - :input： 匹配input, textarea, select 和 button 元素。 - :text ：匹配所有的单行文本框。 - :password :匹配所有密码框。 - :radio ：匹配所有单选按钮。 - :checkbox ：匹配所有复选框。 - :submit ：匹配所有提交按钮。 - :image ：匹配所有图像域。 ### 状态过滤器 根据表单元素当前状态进行过滤的选择器。 - :enabled :匹配所有input中不带有disabled=”disabled”的元素。 示例: $(”input:enabled”) - :disabled ：匹配所有不可用元素。与enabled 相反。 示例: $(”input:disabled”) 返回值 集合元素 - :checked ：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。 示例: $(”input:checked”) - :selected ：匹配所有选中的option元素。 示例: $(”select option:selected”) 原文出处：http://malaoshi.top/show_1GWH5Rt5ni4.html