Home > Article > Web Front-end > Comprehensive explanation of Jquery selector
1 Overview
We have used the jQuery selection function with a simple CSS selector: $(). Now it's time to dive into jQuery selector syntax and some methods for extracting and expanding the set of selected elements.
1. jQuery selector
In the selector syntax defined by the CSS3 selector standard draft, jQuery supports a fairly complete set of subsets, and also adds some non-standard but useful ones. pseudo-class. Note: This section is about jQuery selectors. Many of these selectors (but not all) can be used in CSS style sheets. Selector syntax has a three-level structure. You've no doubt seen selectors in their simplest form. "#te st" selects the element with the id attribute "test". "blockquote" selects all
elements in the document, while "div.note" selects allelements with the class attribute "note". Simple selectors can be combined into "combined selectors", such as "div.note>p" and "blockquote i", as long as the combining characters are used as separators. Simple and combined selectors can also be grouped into comma-separated lists. This type of selector group is the most common form of selection passed to the $() function. Before explaining combined selectors and selector groups, we must first understand the syntax of simple selectors.
##2.1 List##2 Basic Selector
##2.2 Sample code
(1)id selector
Set the background color of the element with id lastname to blue
Set the background color of the intro element with class to blue
Set the background color of the p element to blue
Traverse all elements under the body and set their background color to blue
1 2 3 4 5 6 7View CodeJQuery函数 8 15 16 17选择器测试18p元素
19 20(5)并列选择器
将元素p和元素div背景色设置为蓝色
3 层次选择器
3.1 一览表
3.2 示例代码
(1)parent>child(直系子元素,即直接下一代元素)
设置div元素的第一代元素为span的元素的背景色为蓝色
测试结果:
结果分析:根据如上代码画出的DOM树如下,可以很清晰看出,DIV有三个直接孩子,即第一代span,p,span,代码中div>span,表示div下的直接第一代span,因此,测试结果就不难理解了。
(2)prev+next(prev元素的下一个兄弟元素,等同于next()方法)
设置类为intro元素的下一个兄弟元素背景色为蓝色
测试结果:
结果分析:根据如上代码画出DOM树如下图,测试结果显而易见。
(3)prev~siblings(prev元素的所有兄弟元素,等同于nextAll()方法)
设置类为intro元素之后的所有兄弟元素为div元素的背景色为蓝色
测试结果:
分析测试结果:根据如上代码画出DOM树如下图,测试结果显而易见。
4 过滤选择器
4.1 基本过滤选择器
4.1.1 一览表
4.1.2 代码示例
(1):first(选取第一个元素)
测试结果:
(2):last(选取最后一个元素)
测试结果:
(3):not(取非元素)
但是,请注意下面的代码:当G1所在div和G2所在div是父子关系时,G1和G2都会变色。
View Code12 G1G23(4):even(索引为偶数,索引 index从0开始)
测试结果:
(5):odd(索引为奇数,索引 index从0开始)
测试结果:
(6):eq(x)(取指定索引的元素,x为从0开始的索引)
设置索引为2的div元素背景为蓝色
测试结果:
(7):lt(x))(取小于指定索引的元素,x为从0开始的索引)
测试结果:
(8):gt(x))(取大于指定索引的元素,x为从0开始的索引)
测试结果:
(8):header(取h1-h6标题元素)
View Code1 2 3 4 5 6 7JQuery函数 8 14 15 16测试H1标题
17G118G219G320测试h2标题
21测试h3标题
22测试h4标题
23G424测试h5标题
25测试h6标题
26 27测试结果:
(9):animated(所有动画元素)
测试结果:
4.2 内容过滤选择器
4.2.1 一览表
4.2.2 示例代码
(1):contains(text)(取包含text文本的元素)
测试结果:
(2):empty(取不包含子元素或文本为空的元素)
测试结果:
(3) :has(selector)(取选择器匹配的元素)
即使span不是div的直系子元素,也会生效
测试结果:
(4):parent(取包含子元素或文本的元素)
测试结果:
4.3 可见性过滤选择器
4.3.1 一览表
4.3.2 示例代码
(1):hidden(取不可见的元素)
匹配display:none,,visibility:hidden,capacity:0元素
测试结果:
(2):visible(取可见的元素)
测试结果:
4.4 属性过滤选择器
4.4.1 一览表
4.4.2 代码示例
(1)[attribute](取拥有attribute属性的元素)
测试结果:
(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值)
测试结果:
注释:在属性选择器中,^$符号和正则表达式的开始结束符号表示的含义是一致的,*模糊匹配,类似于sql中的like '%str%'。
(7)[selector1][selector2](复合型属性过滤器,同时满足多个条件)
测试结果:
4.5 子元素过滤选择器
4.5.1 一览表
4.5.2 代码示例
(1)first-child(表示匹配的第一个元素)和last-child(表示匹配的最后一个子元素)
需要大家注意的是,:fisrst和:last返回的都是单个元素,而:first-child和:last-child返回的都是集合元素。举个 例子:div:first返回的是整个DOM文档中第一个div元素,而div:first-child是返回所有div元素下的第一个元素合并后的集 合。
测试结果:
(3)only-child(当某个元素有且仅有一个子元素时,:only-child才会生效)
测试结果:
(4)nth-child
看到这个就想起英文单词里的,fourth, fifth, sixth……,nth表示第n个,:nth-child就表示第n个child元素。要注意的是,这儿的n不像eq(x)、gt(x)或lt(x)是从 0开始的,它是从1开始的,英文里好像也没有zeroth这样的序号词吧。
:nth-child有三种用法:
1) :nth-child(x),获取第x个子元素
2) :nth-child(even)和:nth-child(odd),从1开始,获取第偶数个元素或第奇数个元素
3) :nth-child(xn+y),x>=0,y>=0。例如x = 3, y = 0时就是3n,表示取第3n个元素(n>=0)。实际上xn+y是上面两种的通项式。(当x=0,y>=0时,等同于:hth- child(x);当x=2,y=0时,等同于nth-child(even);当x=2,y=1时,等同于:nth-child(odd))4.6 表单对象属性过滤选择器
4.6.1 一览表
4.6.2 代码示例
(1):enabled和:disabled(取可用或不可用元素)
:enabled和:diabled的匹配范围包括input, select, textarea
测试结果:
(2):checked(取选中的单选框或复选框元素)
View Code1 2 3 4 5 6 7JQuery函数 8 15 16 17 18 Male19
20 Female21
22 I have a bike:23 24
25 I have a car:26 27
28 I have an airplane:29 30 31 32 33(3):selected(取下拉列表被选中的元素)
5 表单选择器
5.1 一览表
5.2 测试代码
(1):input()(选择所有input元素)
测试结果:
(2):text(选取所有text元素)
测试结果:
(3):select和:button
(4)其他表单元素比较简单,在此不列举。
The above is the detailed content of Comprehensive explanation of Jquery selector. For more information, please follow other related articles on the PHP Chinese website!