【JQuery】选择器 ＆ 过滤器 & 筛选器

选择器

基本选择器

1. 通过 id：$('#id')
2. 通过 class：$('.class')
3. 通过标签名：$('tagName')
4. 通过通配符 * 全选：$(*)
   
   

组合选择器

1. 写入多个选择器，会获取每个选择器选中的元素，选择器之间用 , 隔开

$('div, p.class, span#id');

结果的顺序，就是页面中标签的顺序（从上到下）

2. 选择后代，辈分之间用空格分开

$('ul.box li.item1');

3. 选择子元素，父子之间用 > 分开

$('ul.box > li.item1');

4. 选择兄弟元素，兄弟之间用 ~ 分开

$('li.item1 ~ li.item3');

5. 选择相邻兄弟元素，兄弟之间用 + 分开

$('li.item1 + li.item2');

过滤器

基本过滤器

1. :first & :last：获取第一个 / 最后一个标签元素

$('li:first');

2. :not(selector)：反选

$('li:not(:first)'); // 除第 1 个以外，都获取

3. :even & :odd：获取索引值为偶数 / 奇数的标签元素（索引从 0 开始）

$('li:odd');

4. :eq(index) & :gt(index) & :lt(index)：获取等于 / 大于 / 小于给定索引值的标签元素

$('li:eq(1)');

5. :header：匹配标题标签元素（ h1 ~ h6 ）
6. :animated：匹配设置了动画的标签元素
7. :focus：匹配获取了焦点的标签元素
   
   

子元素过滤器

1. 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 标签，否则获取失败

2. 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 标签的子元素

3. last-child：最后 1 个子元素（先拿到最后 1 个元素，再检查条件）
4. last-of-type：最后 1 个符合条件的子元素（先检查条件，再拿到符合条件的最后 1 个元素）
5. nth-child(n)：第 n 个子元素（先拿到第 n 个元素，再检查条件）
6. nth-of-type(n)：第 n 个符合条件的子元素（先检查条件，再拿到符合条件的第 n 个元素）
7. nth-last-child(n)：倒数第 n 个子元素（先拿到第 n 个元素，再检查条件）
8. nth-last-of-type(n)：倒数第 n 个符合条件的子元素（先检查条件，再拿到符合条件的第 n 个元素）
   
   

内容过滤器

1. :contains('text')：匹配包含给定文本的标签元素

$('.item:contains("JQuery")');

2. :empty：匹配所有不包含子元素 / 文本为空的标签元素

$('li:empty');

3. :parent：匹配包含子元素 / 包含文本的标签元素

$('li:parent');

4. :has(selector)

selector 是一个选择器，选中了一些元素；:has(selector) 就是获取包含这些元素的标签元素

$('li:has(.groundson)');

选择器 .groundson 选中了类名为 groundson 的元素，li:has(.groundson) 匹配包含这些元素的 li

属性过滤器

1. [attribute]：匹配设置了 attribute 属性的标签元素

$('#form input[type]');

2. [attribute=value]：匹配 attribute 属性为 value 值的标签元素

$('#form input[type="tel"]');

3. [attribute!=value]：匹配 attribute 属性不是 value 值的标签元素 / 不含有 attribute 属性的标签元素

$('#form input[type!="tel"]');

该属性等价于 :not([attribute=value])

$('#form input:not([type="tel"])');

4. [attribute^=value]：匹配 attribute 属性的前缀为 value 的标签元素

$('#form input[name^="p"]');

5. [attribute$=value]：匹配 attribute 属性的后缀为 value 的标签元素

$('#form input[name$="e"]');

6. [attribute*=value]：匹配 attribute 属性包含 value 的标签元素

$('#form input[name="n"]');

7. [selector1][selector2][selector3]：复合属性选择器，需要同时满足多个条件

$('#form input[type="text"][name^="n"]');

表单过滤器

1. :text：匹配所有的单行文本框

$('input:text');

2. :password：匹配所有的密码框
3. :radio：匹配所有的单选框
4. :checkbox：匹配所有的复选框
5. :submit：匹配所有的提交按钮
6. :button：匹配所有的按钮
7. :file：匹配所有的文件域
   
   

表单对象属性过滤器

1. :enabled：匹配可用的表单元素
2. :disabled：匹配不可用的表单元素
3. :checked：匹配选中的表单元素（一般是单选 / 复选）
4. :selected：匹配选中的 option 元素
   
   
   

筛选器

基本筛选器

1. .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 个

2. .first()：获取第 1 个 JQuery 对象
3. .last()：获取最后 1 个 JQuery 对象
4. .hasClass('className')：判断该 JQuery 对象是否有类名 className，返回布尔值
5. .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');
})

5. .is(exp)：判断

• 判断该 JQuery 对象是否含有与 exp 字符串匹配的元素
• 返回布尔值

$('button').click(() => {
    let $div = $('div');
    let $result = $div.is('.1');
    console.log($result); // true
})

6. .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, …]
})

7. .not(exp)：效果类比 :not() 过滤器；反选 exp 字符串选中的元素
   
   

查找筛选器

1. .children([exp])：获取与 exp 字符串匹配的子元素，不写 exp 则获取全部子元素
2. .find(exp)：获取与 exp 字符串匹配的后代元素，必须写 exp
3. .next([exp])：获取与 exp 匹配的下一个兄弟元素，无参则直接获取下一个兄弟元素
4. .nextAll([exp])：获取与 exp 匹配的后面所有的兄弟元素，无参则直接获取后面所有的兄弟元素
5. .nextUntil([exp])：获取当前元素到指定元素为止的后面的兄弟元素，无参则直接获取后面所有的兄弟元素
6. .parent([exp])：获取与 exp 匹配的父元素，无参则直接获取父元素
7. .parents([exp])：获取与 exp 匹配的获取所有的父元素，无参则获取父元素所有的父元素，直到 html
8. .offsetParent()：获取最近的定位父元素
9. .prev([exp])：获取与 exp 匹配的上一个兄弟元素，无参则直接获取上一个兄弟元素
10. .prevAll([exp])：获取与 exp 匹配的前面的兄弟元素，无参则直接获取前面的兄弟元素
11. .prevUntil([exp])：获取当前元素到指定元素为止的前面的兄弟元素，无参则直接获取前面的兄弟元素
12. .siblings([exp])：获取与 exp 匹配的兄弟元素，无参则直接获取所有的兄弟元素
    
    

串联筛选器

1. .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');