12.2.2 jQuery选择器

jQuery获取元素节点也需要选择器，类似于CSS的选择器，jQuery选择器非常丰富。

基本选择器

#id：根据给定的ID匹配一个元素。

element：根据给定的元素标签名匹配所有元素

.class：根据给定的类名匹配元素。

*：匹配所有元素，多用于全文搜索。

selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12.2.2_1.jQuery基本选择器</title>
</head>
<body>
    <h1 id="h1">h1</h1>
    <h2>h2</h2>
    <h3 class="h3">h3</h3>
    <h4 id="h4">h4</h4>
    <h5>h5</h5>
    <h6 class="h6">h6</h6>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
    // #id：根据给定的ID匹配一个元素。
    $('#h1').css('color', 'red');
    // element：根据给定的元素标签名匹配所有元素
    $('h2').css('color', 'orange');
    // .class：根据给定的类名匹配元素。
    $('h3').css('color', 'yellow');
    // *：匹配所有元素，多用于全文搜索。
    $('*').css('background-color', 'green');
    // selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。
    $('#h4, h5, .h6').css('color', 'blue');
</script>
</body>
</html>

显示结果为：

在这里插入图片描述

层级选择器

ancestor descendant：在给定的祖先元素下匹配所有的后代元素。

parent > child：在给定的父元素下匹配所有的子元素。

prev + next：匹配所有紧接在 prev 元素后的 next 元素。

prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12.2.2_2.jQuery层级选择器</title>
</head>
<body>
    <div>
        <ul>
            <li id="1">1</li>
            <li id="2">2</li>
            <li id="3">3</li>
            <li id="4">4</li>
        </ul>
    </div>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
    // ancestor descendant：在给定的祖先元素下匹配所有的后代元素。
    $('div li').css('color', 'red');
    // parent > child：在给定的父元素下匹配所有的子元素。
    $('div > ul').css('background-color', 'orange');
    // prev + next：匹配所有紧接在 prev 元素后的 next 元素。
    $('#1 + #2').css('background-color', 'yellow');
    // prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素。
    $('#2 ~ li').css('background-color', 'green');
</script>
</body>
</html>

显示结果为：

在这里插入图片描述

过滤选择器

:first：获取第一个元素。

:last：获取最后个元素。

:not(selector)：去除所有与给定选择器匹配的元素。

:even：匹配所有索引值为偶数的元素，从 0 开始计数。

:odd：匹配所有索引值为奇数的元素，从 0 开始计数。

:eq(index)：匹配一个给定索引值的元素。

:gt(index)：匹配所有大于给定索引值的元素。

:lang：选择指定语言的所有元素。

:lt(index)：匹配所有小于给定索引值的元素。

:header：匹配如 h1, h2, h3之类的标题元素。

:animated：匹配所有正在执行动画效果的元素。

:focus：匹配当前获取焦点的元素。

:root：选择该文档的根元素。

:target：选择由文档URI的格式化识别码表示的目标元素。

内容选择器

:contains(text)：匹配包含给定文本的元素。

:empty：匹配所有不包含子元素或者文本的空元素。

:has(selector)：匹配含有选择器所匹配的元素的元素。

:parent：匹配含有子元素或者文本的元素。

可见性选择器

:hidden：匹配所有不可见元素，或者type为hidden的元素。

:visible：匹配所有的可见元素。

属性选择器

[attribute]：匹配包含给定属性的元素。

[attribute=value]：匹配给定的属性是某个特定值的元素.

[attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。

[attribute^=value]：匹配给定的属性是以某些值开始的元素。

[attribute$=value]：匹配给定的属性是以某些值结尾的元素。

[attribute*=value]：匹配给定的属性是以包含某些值的元素。

[attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用。

子元素选择器

:first-child：匹配所给选择器( :之前的选择器)的第一个子元素。

:first-of-type：结构化伪类，匹配E的父元素的第一个E类型的孩子。

:last-child：匹配最后一个子元素。

:last-of-type：结构化伪类，匹配E的父元素的最后一个E类型的孩子。

:nth-child：匹配其父元素下的第N个子或奇偶元素。

:nth-last-child()：选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个。

:nth-last-of-type()：选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。

:nth-of-type()：选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

:only-child：如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配。

:only-of-type：选择所有没有兄弟元素，且具有相同的元素名称的元素。

表单选择器

:input：匹配所有 input, textarea, select 和 button 元素。

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

:password：匹配所有密码框。

:radio：匹配所有单选按钮。

:checkbox：匹配所有复选框。

:submit：匹配所有提交按钮，理论上只匹配 type=“submit” 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果，为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。

:image：匹配所有图像域。

:reset：匹配所有重置按钮。

:button：匹配所有按钮。

:file：匹配所有文件域。