jQuery 选择器

jQuery在线手册

jQuery 选择器

jQuery 选择器类似于CSS的选择器，能够实现定位元素的功能。

jQuery 选择器支持 CSS1~CSS3 的全部选择器，通信扩展了少量CSS中没有的独有选择器。

使用 jQuery 选择器时，需要考虑浏览器知否支持这些选择器。

ID 选择器

　　- 作用：返回匹配 id 属性值的所有元素。

　　- 特点：最快，尽量使用 id 选择器。

　　- 用法：$( "#myDiv" )

　　- 说明：返回HTML页面中 id 为myDiv 的所有元素。

Class 选择器

　　- 作用：返回匹配 class 属性值得所有元素。

　　- 用法：$( ".className" )

　　- 说明：返回 HTML 页面中 class 为 className 的所有元素。

元素选择器

　　- 作用：返回匹配元素名的所有元素。

　　- 用法：$( "elementName" )

　　- 说明：返回 HTML 页面中元素名为 elementName 的所有元素。

通配符选择器

　　- 作用：返回当前 HTML 页面的所有元素。

　　- 用法：$( " * " )

　　- 说明：返回 HTML 页面中所有的元素。

分组选择器

　　- 作用：分组选择器，即所有选择器的合集。

　　- 用法：$( "selector1,selector2..." )

　　- 说明：将每个选择器匹配到的元素合并后一起返回。

内容练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象</title>
    <style>
        div, p {
            border: 2px solid #666;
            margin: 10px;
            width: 50%;
        }
    </style>
</head>
<body>

<div id="d1" class="mydiv">id为d1，class为mydiv
    <div class="mini">class为mini</div>
</div>
<div id="d2" class="mydiv">id为d2，class为mydiv
    <p class="mini">我是p标记，class为mini</p>
</div>
<div id="d3">id为d3
    <div class="mini">class为mini</div>
</div>
<p class="mydiv">我是p标记，class为mydiv</p>

<button type="button" id="btn1">选择id为d1的元素</button>
<button type="button" id="btn2">选择class为mydiv的元素</button>
<button type="button" id="btn3">选择所有的div元素</button>
<button type="button" id="btn4">选择所有的元素</button>
<button type="button" id="btn5">选择id为d1的元素和所有p元素</button>

<script src="js/jquery-3.3.1.js"></script>
<script>
    $("#btn1").click(function () {
        // 选择id为d1的元素,将边框变为红色
        $("#d1").css("border-color", "#f00");
    });

    $("#btn2").click(function () {
        // 选择 class 为mydiv 的元素,边框变为蓝色
        $(".mydiv").css("border-color", "#00f");
    });

    $("#btn3").click(function () {
        //选择所有的div元素 ,修改边框为绿色
        $("div").css("border-color", "#0f0");
    });

    $("#btn4").click(function () {
        //选择所有的元素 ,修改边框为艳红色，所有包括按钮
        $("*").css("border-color", "#f0f");
    });

    $("#btn5").click(function () {
        //选择id为d1的元素和所有p元素,修改为黄色
        $("#d1,p").css("border-color", "#ff0");
    });

</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>jquery对象</title>
    <style>
        div, p, span {
            border: 2px solid #666;
            margin: 10px;
            width: 50%;
        }
    </style>
</head>
<body>

<div id="d1" class="mydiv">id为d1，class为mydiv
    <div class="mini">class为mini</div>
</div>
<div id="d2" class="mydiv">id为d2，class为mydiv
    <p class="mini">我是p标记，class为mini</p>
</div>
<div id="d3">id为d3
    <div class="mini">class为mini</div>
</div>
<p class="mydiv">我是p标记，class为mydiv
    <span class="mini">我是span元素，class为mini</span>
</p>

<button type="button" id="btn1">选择body下的所有p的元素</button>
<button type="button" id="btn2">选择div下为class为mini的元素</button>
<button type="button" id="btn3">选择body下的所有直接子元素p元素</button>
<button type="button" id="btn4">选择id为d1的相邻兄弟元素</button>
<button type="button" id="btn5">选择div元素的相邻元素的p元素</button>
<button type="button" id="btn6">选择id为d1所有的兄弟元素</button>

<script src="js/jquery-3.3.1.js"></script>
<script>
    $("#btn1").click(function () {
        // 选择body下的所有p的元素修改为红色 后代选择器
        $("body p").css("border-color", "#f00");
    });

    $("#btn2").click(function () {
        // 选择div下为class为mini的元素 后代选择器
        $("div .mini").css("border-color", "#00f");
    });

    $("#btn3").click(function () {
        //选择body下的所有直接子元素p元素,修改边框为绿色 直接子元素  子代选择器
        $("body > p").css("border-color", "#0f0");
    });

    $("#btn4").click(function () {
        //选择id为d1的相邻兄弟元素 ,修改边框为艳红色  相邻兄弟元素
        $("#d1 + *").css("border-color", "#f0f");
    });

    $("#btn5").click(function () {
        //选择div元素的相邻元素的p元素，修改为黄色
        $("div + p").css("border-color", "#ff0");
    });

    $("#btn6").click(function () {
        //选选择id为d1所有的兄弟元素，修改为深绿色 后续所有兄弟元素选择器
        $("#d1 ~ *").css("border-color", "#195");
    });
</script>

</body>
</html>