E024Web学习笔记-JQuery（二）：选择器

本文链接：https://blog.csdn.net/qq_29689343/article/details/100919412

一、基本选择器

1、标签选择器

语法：

$("html标签名")，获取所有匹配标签名称的元素

2、id选择器

$("#id值")，获取与指定id匹配的元素

3、类选择器

$(".class的属性值")，获取所有匹配.class的元素

4、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="div1" class="d">大哥哥。。。</div>
    <div id="div2" class="d">二哥哥。。。</div>
    <input type="button" value="点我呀" id="btn">
</body>
<script type="text/javascript">
    //1、标签选择器：$("html标签名")，获取所有匹配标签名称的元素
    var $divs = $("div");
    //2、id选择器：$("#id值")，获取与指定id匹配的元素
    var $div1 = $("#div1,#div2,#btn");
    //3、类选择器：$(".class的属性值")，获取所有匹配.class的元素
    var $ds = $(".d");
</script>
</html>

二、层级选择器

1、后代选择器

语法：

示例：
$("div span");

图解：

2、子选择器

语法：

示例：
$("div > span");

图解：

3、代码演示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <span>
            span1
            <span>span1.1</span>
        </span>
        <span>span2</span>
        <span>span3</span>
        =================================<br/>
    </div>
</body>
<script type="text/javascript">
    //1、后代选择器：选取所有span，包含span1.1
    var $spans = $("div span");
    for (var i = 0; i < $spans.length; i++) {
        document.write("第"+(i+1)+"个元素：<br/>");
        document.write($spans[i].innerHTML+"<br/>")
    }
    document.write("===============<br/>");
    //2、子选择器：选取子span，不包含span1.1
    var $spans1 = $("div > span");
    for (var j = 0; j < $spans1.length; j++) {
        document.write("第"+(j+1)+"个元素：<br/>");
        document.write($spans1[j].innerHTML+"<br/>");
    }
</script>
</html>

运行结果：

三、属性选择器

支持正则表达式；

1、属性名称选择器

语法：

示例：
$("span[class]");

2、属性选择器

语法：

示例：
$("span[class='s']");

3、复合属性选择器

语法：

示例：
$("span[class][content='zb']");

4、代码演示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <span id="s1" class="s1" content="zb">
            span1
            <span id="s11" class="s">span1.1</span>
        </span>
        <span class="s2" content="zb">span2</span>
        <span id="s" content="zb">span3</span>
        <br/>
    </div>
</body>
<script type="text/javascript">
    //1、属性名称选择器
    document.write("============所有class===========<br/>");
    var $spans1 = $("span[class]");
    for (var i = 0; i < $spans1.length; i++) {
        document.write("第"+(i+1)+"个元素：<br/>");
        document.write($spans1[i].innerHTML+"<br/>");
    }

    //2、属性选择器
    document.write("============所有值为s的class===========<br/>");
    var $spans2 = $("span[class='s']");
    for (var j = 0; j < $spans2.length; j++) {
        document.write("第"+(j+1)+"个元素：<br/>");
        document.write($spans2[j].innerHTML+"<br/>");
    }

    //3、符合属性选择器
    document.write("============所有带有content属性且值为zb的class===========<br/>");
    var $spans3 = $("span[class][content='zb']");
    for (var k = 0; k < $spans3.length; k++) {
        document.write("第"+(k+1)+"个元素：<br/>");
        document.write($spans3[k].innerHTML+"<br/>");
    }
</script>
</html>

运行结果：

四、过滤选择器

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span id="s4">span4</span>
        <span>span5</span>
        <span>span6</span>
        <br/>
    </div>
</body>
<script type="text/javascript">
    //1、首元素选择器
    document.write("======首元素选择器======<br/>");
    var $div1 = $("div > span:first");
    document.write($div1.text()+"<br/>");
    //2、尾元素选择器
    document.write("======尾元素选择器======<br/>");
    var $div2 = $("div > span:last");
    document.write($div2.text()+"<br/>");
    //3、非元素选择器
    document.write("======非元素选择器======<br/>");
    var $div3 = $("div > span:not(#s4)");
    for (var i = 0; i < $div3.length; i++) {
        document.write($div3.get(i).innerHTML+"<br/>");
    }
    //4、奇数选择器
    document.write("======偶数选择器：索引值======<br/>");
    var $div4 = $("div > span:even");
    for (var j = 0; j < $div4.length; j++) {
        document.write($div4.get(j).innerHTML+"<br/>");
    }
    //5、偶数选择器
    document.write("======奇数选择器：索引值======<br/>");
    var $div5 = $("div > span:odd");
    for (var k = 0; k < $div5.length; k++) {
        document.write($div5.get(k).innerHTML+"<br/>");
    }
    //6、等于索引选择器
    document.write("======等于索引选择器======<br/>");
    var $div6 = $("div > span:eq(0)");
    document.write($div6.text()+"<br/>");
    //7、大于索引选择器
    document.write("======大于索引选择器======<br/>");
    var $div7 = $("div > span:gt(3)");
    for (var p = 0; p < $div7.length; p++) {
        document.write($div7.get(p).innerHTML+"<br/>");
    }
    //8、小于索引选择器
    document.write("======小于索引选择器======<br/>");
    var $div8 = $("div > span:lt(3)");
    for (var u = 0; u < $div8.length; u++) {
        document.write($div8.get(u).innerHTML+"<br/>");
    }
    //9、标题选择器
    document.write("======标题选择器======<br/>");
    var $header = $(":header");
    $header.text("统一设置内容");
</script>
</html>

运行结果：

五、表单过滤选择器

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <label>
            <input type="text" placeholder="输入框1，可用"/>
            <input type="text" placeholder="输入框2，不可用" disabled="disabled"/>
            <input type="text" placeholder="输入框3，不可用" disabled="disabled"/>
            <input type="text" placeholder="输入框4，可用"/>
            爱好（多选）：<br />
            运动<input type="checkbox" name="radio" value="运动"/>
            读书<input type="checkbox" name="radio" value="读书"/>
            Java<input type="checkbox" name="radio" value="Java"/>
            <br />
            地区：<br />
            <select>
                <option value ="0">--请选择--</option>
                <option value ="1">北京</option>
                <option value ="2">上海</option>
                <option value ="3">杭州</option>
            </select>
            <br />
            <input id="hobby" type="button" value="爱好">
            <br />
            <input id="place" type="button" value="地区">
        </label>
        <br/>=======================================<br/>
    </div>
</body>
<script type="text/javascript">
    //1、可用元素选择器
    document.write("===可用元素选择器===<br/>");
    var $inputs1 = $("input:enabled");
    document.write("可用元素有"+$inputs1.length+"个<br/>");
    //2、不可用元素选择器
    document.write("===不可用元素选择器===<br/>");
    var $inputs2 = $("input:disabled");
    document.write("不可用元素"+$inputs2.length+"个<br/>");
    //3、选中选择器-单/多选
    $("#hobby").click(function () {
        var $inputs3 = $("input:checked");
        alert($inputs3.length);
    })
    //4、选中选择器-下拉框
    $("#place").click(function () {
        var $inputs4 = $("option:selected");
        alert($inputs4.text());
    })
</script>
</html>