选择器
基本选择器
- 通过 id:
$('#id')
- 通过 class:
$('.class')
- 通过标签名:
$('tagName')
- 通过通配符
*
全选:$(*)
组合选择器
- 写入多个选择器,会获取每个选择器选中的元素,选择器之间用
,
隔开
$('div, p.class, span#id');
结果的顺序,就是页面中标签的顺序(从上到下)
- 选择后代,辈分之间用空格分开
$('ul.box li.item1');
- 选择子元素,父子之间用
>
分开
$('ul.box > li.item1');
- 选择兄弟元素,兄弟之间用
~
分开
$('li.item1 ~ li.item3');
- 选择相邻兄弟元素,兄弟之间用
+
分开
$('li.item1 + li.item2');
过滤器
基本过滤器
:first
&:last
:获取第一个 / 最后一个标签元素
$('li:first');
:not(selector)
:反选
$('li:not(:first)'); // 除第 1 个以外,都获取
:even
&:odd
:获取索引值为偶数 / 奇数的标签元素(索引从 0 开始)
$('li:odd');
:eq(index)
&:gt(index)
&:lt(index)
:获取等于 / 大于 / 小于给定索引值的标签元素
$('li:eq(1)');
:header
:匹配标题标签元素(h1
~h6
):animated
:匹配设置了动画的标签元素:focus
:匹配获取了焦点的标签元素
子元素过滤器
first-child
:选中当前元素的父元素下,第 1 个子元素
(先拿到第 1 个元素,再检查条件)
<div class="box1">
<p class="b1-c1">p1</p>
<span class="b1-c1">span1</span>
<span class="b1-c2" class="abc">span2</span>
</div>
<div class="box2">
<span class="b2-c1">span1</span> <!-- 获取了这个 -->
<span class="b2-c2">span2</span>
</div>
console.log($('span:first-child')); // jQuery.fn.init [span.b2-c1, …]
获取 span
的父元素的第 1 个子元素,该子元素必须为 span
标签,否则获取失败
first-of-type
:选中当前元素的父元素下,第 1 个符合条件的子元素
(先检查条件,再拿到符合条件的第 1 个元素)
<div class="box1">
<p class="b1-c1">p1</p>
<span class="b1-c1">span1</span>
<span class="b1-c2" class="abc">span2</span> <!-- 获取了这个 -->
</div>
<div class="box2">
<span class="b2-c1">span1</span> <!-- 获取了这个 -->
<span class="b2-c2">span2</span>
</div>
console.log($("span:first-of-type")); // jQuery.fn.init(2) [span.b1-c2, span.b2-c1, …]
获取 span
的父元素的第 1 个为 span
标签的子元素
last-child
:最后 1 个子元素(先拿到最后 1 个元素,再检查条件)last-of-type
:最后 1 个符合条件的子元素(先检查条件,再拿到符合条件的最后 1 个元素)nth-child(n)
:第 n 个子元素(先拿到第 n 个元素,再检查条件)nth-of-type(n)
:第 n 个符合条件的子元素(先检查条件,再拿到符合条件的第 n 个元素)nth-last-child(n)
:倒数第 n 个子元素(先拿到第 n 个元素,再检查条件)nth-last-of-type(n)
:倒数第 n 个符合条件的子元素(先检查条件,再拿到符合条件的第 n 个元素)
内容过滤器
:contains('text')
:匹配包含给定文本的标签元素
$('.item:contains("JQuery")');
:empty
:匹配所有不包含子元素 / 文本为空的标签元素
$('li:empty');
:parent
:匹配包含子元素 / 包含文本的标签元素
$('li:parent');
:has(selector)
selector
是一个选择器,选中了一些元素;:has(selector)
就是获取包含这些元素的标签元素
$('li:has(.groundson)');
选择器 .groundson
选中了类名为 groundson
的元素,li:has(.groundson)
匹配包含这些元素的 li
属性过滤器
[attribute]
:匹配设置了attribute
属性的标签元素
$('#form input[type]');
[attribute=value]
:匹配attribute
属性为value
值的标签元素
$('#form input[type="tel"]');
[attribute!=value]
:匹配attribute
属性不是value
值的标签元素 / 不含有attribute
属性的标签元素
$('#form input[type!="tel"]');
该属性等价于 :not([attribute=value])
$('#form input:not([type="tel"])');
[attribute^=value]
:匹配attribute
属性的前缀为value
的标签元素
$('#form input[name^="p"]');
[attribute$=value]
:匹配attribute
属性的后缀为value
的标签元素
$('#form input[name$="e"]');
[attribute*=value]
:匹配attribute
属性包含value
的标签元素
$('#form input[name="n"]');
[selector1][selector2][selector3]
:复合属性选择器,需要同时满足多个条件
$('#form input[type="text"][name^="n"]');
表单过滤器
:text
:匹配所有的单行文本框
$('input:text');
:password
:匹配所有的密码框:radio
:匹配所有的单选框:checkbox
:匹配所有的复选框:submit
:匹配所有的提交按钮:button
:匹配所有的按钮:file
:匹配所有的文件域
表单对象属性过滤器
:enabled
:匹配可用的表单元素:disabled
:匹配不可用的表单元素:checked
:匹配选中的表单元素(一般是单选 / 复选):selected
:匹配选中的option
元素
筛选器
基本筛选器
.eq(index)
:获取索引值为 index 的 JQuery 对象;返回的是 JQuery 对象
$('.btn').click(() => {
let $input = $('#form input');
let $second = $input.eq(1);
console.log($second); // jQuery.fn.init [input.input2, prevObject: jQuery.fn.init(3)]
$second.css('border', 'lightskyblue 1px solid');
})
index
:可以为负数,-1
为倒数第 1 个
.first()
:获取第 1 个 JQuery 对象.last()
:获取最后 1 个 JQuery 对象.hasClass('className')
:判断该 JQuery 对象是否有类名className
,返回布尔值.filter(exp)
:过滤
- 筛选出与与
exp
选择器字符串匹配的 JQuery 对象 - 多个
exp
表达式之间,用,
隔开
$('button').click(() => {
let $div = $('div');
let $first = $div.filter('.1'); // 获取类名为 1 的标签元素
console.log($first); // jQuery.fn.init [div.1, …]
$first.css('border', 'lightSkyBlue 1px solid');
})
.is(exp)
:判断
- 判断该 JQuery 对象是否含有与
exp
字符串匹配的元素 - 返回布尔值
$('button').click(() => {
let $div = $('div');
let $result = $div.is('.1');
console.log($result); // true
})
.has(exp)
:效果类比:has(selector)
exp
选中指定的元素;.has(exp)
就是获取包含这些元素的标签元素
$('button').click(() => {
let $div = $('div');
let $result = $div.has('p');
console.log($result); // jQuery.fn.init [div.1, …]
})
.not(exp)
:效果类比:not()
过滤器;反选exp
字符串选中的元素
查找筛选器
.children([exp])
:获取与exp
字符串匹配的子元素,不写exp
则获取全部子元素.find(exp)
:获取与exp
字符串匹配的后代元素,必须写exp
.next([exp])
:获取与exp
匹配的下一个兄弟元素,无参则直接获取下一个兄弟元素.nextAll([exp])
:获取与exp
匹配的后面所有的兄弟元素,无参则直接获取后面所有的兄弟元素.nextUntil([exp])
:获取当前元素到指定元素为止的后面的兄弟元素,无参则直接获取后面所有的兄弟元素.parent([exp])
:获取与exp
匹配的父元素,无参则直接获取父元素.parents([exp])
:获取与exp
匹配的获取所有的父元素,无参则获取父元素所有的父元素,直到html
.offsetParent()
:获取最近的定位父元素.prev([exp])
:获取与exp
匹配的上一个兄弟元素,无参则直接获取上一个兄弟元素.prevAll([exp])
:获取与exp
匹配的前面的兄弟元素,无参则直接获取前面的兄弟元素.prevUntil([exp])
:获取当前元素到指定元素为止的前面的兄弟元素,无参则直接获取前面的兄弟元素.siblings([exp])
:获取与exp
匹配的兄弟元素,无参则直接获取所有的兄弟元素
串联筛选器
.add(exp)
:返回新的 JQuery 对象,新对象包含:匹配exp
的元素 & 调用该方法的 JQuery 对象的元素
let $p = $('p');
console.log($p); // jQuery.fn.init [p, …]
let $result = $p.add('div');
console.log($p); // jQuery.fn.init [p, …]
console.log($result); // jQuery.fn.init(7) [div.box, div.1, p, div.2, div.3, …]
此时 $result
就可以把匹配 'div'
的对象 & 匹配 'p'
的对象都选中啦
- 因为返回的是新的 JQuery 对象,所以可以链式调用:
let $result = $('p').add('div').add('span');