jQuery — 选择器

Posted 2020-11-27 格物致知_Tony

　　jQuery中最大亮点之一就是其强大的选择器，使用其选择器基本可以快速轻松的找到页面的任意节点。

一、基本选择器

　　它是jQuery中最简单，也是最常用的选择器，可以通过标签名，id 属性，class 属性来查找匹配的 DOM 元素

　　1、id 选择器

　　　　用法：

格式：$("#id")

返回值：根据id属性匹配一个标签, 封装成jQuery对象

　　2、标签选择器

　　　　用法：

格式： $("tagName")

返回值：根据标签名匹配的一个或多个标签, 封装成jQuery对象

　　3、class 选择器

　　　　用法：

格式： $(".class")

返回值：根据class属性值匹配一个或多个标签, 封装成jQuery对象

　　4、* 选择器

　　　　用法：

格式： $("*")

返回值: 匹配所有标签, 封装成jQuery对象

　　5、selector1,selector2,...

　　　　用法：

格式： $("div,span,.myClass")

返回值: 所有匹配选择器的标签, 封装成jQuery对象

二、层次选择器

　　  如果想通过 DOM 元素之间的层次关系来获取特定元素，例如：子元素、兄弟元素等，则需要通过层次选择器。

　　1、ancestor descendant （后代选择器）

　　　　用法：

格式：$("form input")

说明：在给定的祖先元素下匹配所有后代元素

　　2、parent > child （子代选择器）

　　　　用法：

格式： $("form > input")

说明：在指定父元素下匹配所有子元素。 注意：后代元素包括儿子辈、孙子辈等，子代只包括儿子辈。

　　3、prev + next

　　　　用法：

格式： $("label + input")

说明：匹配所有紧接在 prev 元素后的 next 元素

　　4、prev~siblings　　

　　　　用法：

格式：$("form ~ input")

说明：匹配 prev 元素之后的所有 siblings 元素，不包含该元素在内，并且 siblings 匹配的是和 prev 同辈的元素，其后辈元素不被匹配。

三、过滤选择器

　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头

　　按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤, 表单过滤和表单属性过滤选择器

　　1、基本过滤选择器

　　　　1）:first

　　　　　　用法：

格式： $("tr:first")

说明：匹配找到的第一个元素

　　　　2)  :last

　　　　　　用法：

格式： $("tr:last")

说明：匹配找到的最后一个元素，与 :first 相对应

　　　　3）:not(selector)

　　　　　　用法：

格式：$("input:not(:checked)")

说明：去除所有与给定选择器匹配的元素，有点类似于“非”，意思是没有被选中的 input（当input的 type="checkbox"）

　　　　4）:even

　　　　　　用法：

格式：$("tr:even")

说明：匹配所有索引值为偶数的元素，从0开始计数，js的数组都是从0开始计数的

　　　　5）:odd

　　　　　　用法：

格式：$("tr:odd")

说明：匹配所有索引值为奇数的元素，和 :even 对应，从0开始计数

　　　　6）:eq(index)

　　　　　　用法：

格式：$("tr:eq(0)")

说明：匹配一个给定索引的元素，eq(0)就是获取第一个 tr 元素，括号里面的是索引值，不是元素排列数

　　　　7）:gt(index)

　　　　　　用法：

格式：$("tr:gt(0)")

说明：匹配所有大于给定索引值的元素

　　　　8）:lt(index)

　　　　　　用法：

格式：$("tr:lt(0)")

说明：匹配所有小于给定索引值的元素

　　　　9）:header

　　　　　　用法：

格式： $(":header")

说明： 匹配如 h1、h2、h3之类的标题元素

　　　  10）:animated

　　　　　　用法：

格式：$("div:animated")

说明：匹配所有正在执行动画效果的元素

　　2、内容过滤选择器

　　　　内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

　　　　1)  :contains(text)

　　　　　　用法：

格式： $("div:contains(‘‘Tom)")

说明：匹配包含给定文本的元素，当要选择的不是 dom 标签元素时，就可以使用该方法，它的作用是查找被标签“包围”起来的文本内容是否符合指定的内容的

　　　　2)  :empty

　　　　　　用法：

格式：$("td:empty")

说明：匹配所有不包含子元素或文本的空元素

　　　　3)  :parent

　　　　　　用法：

格式：$("td:parent")

说明：匹配含有子元素或者文本的元素，这里的 :parent 与上面的 :empty 是反义词

　　　　4)  :has(selector)

　　　　　　用法：

格式：$("div:has(p)").addClass("test")

说明：匹配含有选择器所匹配的元素的元素，如上面案例，给所有包含 p 元素的 div 标签加上类名

　　3、可见性过滤选择器

　　　　根据元素的可见和不可见状态来选择相应的元素

　　　　1）:hidden

　　　　　　用法：

格式： $("tr:hidden")

说明：匹配所有的不可见元素，input元素的 type 为 “hidden”也会被匹配到，意思是会匹配 CSS 中 display="none"和 input type="hidden" 都会匹配到

　　　　2）:visible

　　　　　　用法：

格式：$("tr:visible")

说明：匹配所有可见元素

　　4、属性过滤选择器

　　　　属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

　　　　1）[attribute]

　　　　　　用法：

格式： $("div[id]")

说明：匹配包含给定属性的元素，上面的案例是选中了所有带 id 属性的 div 标签

　　　　2）[attribute=value]

　　　　　　用法：

格式： $("input[name=‘test‘]")

说明：匹配给定的属性是某个特定值的元素，上面的案例是选中了所有name是test的input元素

　　　　3）[attribute!=value]

　　　　　　用法：

格式：$("input[name!=‘test‘]")

说明：匹配所有不含有指定的属性，或者属性不等于特定值的元素，如果要匹配含有特定属性但不等于特定值的元素，使用 [attr]:not([attr=value])

　　　　4）[attribute^=value]

　　　　　　用法：

格式：$("input[name^=‘test‘]")

说明：匹配给定的属性是以某些值开始的元素

　　　　5）[attribute$=value]

　　　　　　用法：

格式： $("input[name$=‘test‘]")

说明：匹配给定的属性是以某些值结尾的元素

　　　　6）[attribute*=value]

　　　　　　用法：

格式：$("input[name*=‘test‘]")

说明：匹配给定的属性是以包含某些值的元素

　　　　7）[attrSel1][attrSel2][attrSel3]

　　　　　　用法：

格式：$("input[id][name$=‘est‘]")

说明：复合属性选择器，需要同时满足多个条件时使用

　　5、子元素过滤选择器

　　　　1）:nth-child(index/even/odd/equation)

　　　　　　用法：

格式： $("ul li:nth-child(2)")

说明：匹配其父元素下的第N个子或奇偶元素，注意，这里的第一个是从1开始，不是从0开始

　　　　2）:first-child

　　　　　　用法：

格式：$("ul li:first-child")

说明：匹配第一个子元素，只匹配一个元素，此选择符将为每个父元素匹配一个子元素

　　　　3）:last-child

　　　　　　用法：

格式：$("ul li:last-child")

说明：匹配最后一个子元素，只匹配一个元素，此选择符将为每个父元素匹配一个子元素

　　　　4）:only-child

　　　　　　用法：

格式：$("ul li:only-child")

说明：如果某个元素是父元素中唯一的子元素，那么将会被匹配；如果父元素中含有其他元素，将不会匹配

 

　　6、表单过滤选择器

　　　　1）:input

　　　　　　用法：

格式：$(":input")

说明：匹配所有的 input、textarea、select和button元素

　　　　2）:text

　　　　　　用法：

格式：$(":text")

说明：匹配所有的单行文本框

　　　　3）:password

　　　　　　用法：

格式： $(":password")

说明：匹配所有密码框

　　　　4）:radio

　　　　　　用法：

格式： $(":radio");

说明：匹配所有单选按钮

　　　　5）:checkbox

　　　　　　用法：

格式： $(":checkbox")

说明：匹配所有复选框

　　　　6）:submit

　　　　　　用法：

格式：$(":submit")

说明：匹配所有提交按钮

　　　　7）:image

　　　　　　用法：

格式：$(":image")

说明：匹配所有图像域

　　　　8）:reset

　　　　　　用法：

格式：$(":reset")

说明：匹配所有重置按钮

　　　　9）:button

　　　　　　用法：

格式：$(":button")

格式：匹配所有按钮，包括直接写的元素 button

　　　　10）:file

　　　　　　用法：

格式：$(":file")

说明：匹配所有文件域

　　　　11）:hidden

　　　　　　用法：

格式：$("input：hidden")

说明：匹配所有不可见元素，或type为hidden的元素，还会匹配 style 中为 hidden 的元素

　　7、表单对象属性过滤选择器

　　　　此选择器主要对所选择的表单元素进行过滤

　　　　1）:enabled

　　　　　　用法：

格式：$("input:enabled")

说明：匹配所有可用元素，即查找input中不带有 disabled="disabled" 的元素

　　　　2）:disabled

　　　　　　用法：

格式：$("input:disabled")

说明：匹配所有不可用元素

　　　　3）:checked

　　　　　　用法：

格式：$("input:checked")

说明：匹配所有被选中的元素（复选框、单选框等，不包括select中的 option）

　　　　4）:selected

　　　　　　用法:

格式：$("select option:selected")

说明：匹配所有选中的 option 元素