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

秒速五厘米 2024-04-19 10:23 113阅读 0赞

# 一、基本选择器 #

## 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");

### 图解： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 2、子选择器 ##

### 语法： ###

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

### 图解： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

# 三、属性选择器 #

支持正则表达式；

## 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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 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>
            <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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 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>
            <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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0f8810c31c52437c83e72dbdaac7caef.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8fa2bbbd131c4fc09a0ff75c312e908f.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/eb34a42c382e497caca697bf88cbeb4a.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/403f6237245c43c38aca383a1ec14a04.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8fd05fce7786485d80047b45d3d1af75.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f30733ea744448a2b695a18762a58695.jpg