jQuery系列（二）：常用选择器的分析与应用专刊（提供完整程序）

最新推荐文章于 2024-04-17 09:18:10 发布

北溟南风起

最新推荐文章于 2024-04-17 09:18:10 发布

阅读量180

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/QQQZSJ/article/details/107334028

版权

一.基本选择器

下面的实例是根据我自己的项目需要来写的，大家从中提取与知识点相关的部分自行理解就阔以啦！！！

1. id选择器 jQuery("#ID") 或者$("#id")

jQuery("#ID") 或者$("#id") : 查找id为为ID的元素
它调用JavaScript函数document.getElementById()

实例

//1.btn1 id
$("#btn1").click(function(){
    $("#one").css("background-color","#bbffaa");
});

2. 类选择器 jQuery(".CLASS") 或者$(".CLASS")

jQuery(".CLASS") 或者$(".CLASS") : 查找类为CLASS的元素
它调用JavaScript的原生getElementsByClassName()函数来实现

实例

//2.选择所有class为mini的元素
$("#btn2").click(function(){
    $(".mini").css("background-color","#bbffaa");
});

3. 标签选择器 jQuery(“element”) 或者$(“element”)

jQuery(“element”) 或者$(“element”) ：查找标签element的元素
它调用JavaScript的 getElementsByTagName()

实例

//3.选择元素名是div的所有元素
$("#btn3").click(function(){
    $("div").css("background-color","#bbffaa");
});

4. 全局选择器 jQuery("") 或者$("")

jQuery("*") 或者$(" * ") ：匹配所有元素

实例

//4.选择所有元素
$("#btn4").click(function(){
    $("*").css("background-color","#bbffaa");
});

5. 并集选择器 jQuery(" selector1,…,selectorN")

jQuery(" selector1,…,selectorN")
或者 $(" selector1,…,selectorN")

jQuery(“element”) 或者$(“element”) ：将每一个选择器匹配到的元素合并后一起返回。

实例

//5.选择所有span元素和id为two的元素
$("#btn5").click(function(){
    $("span,#two").css("background-color","#bbffaa");
});

* 基本选择器完整程序

我把程序分享给你，自行认真验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>层次选择器</title>

    <style type="text/css">
    div,span,p{
    width:140px;
    heigth:140px;
    margin:5px;
    background-color:#aaa;
    border:#000 2px solid;
    float:left;
    font-size:20px;
}
div.mini{
    width:50px;
    heigth:50px;
    background-color:#aaa;
    font-size:12px;
}
div.hide{
    display:none;
}
</style>
<script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">


    $(function(){
        /*
            1.后代选择器 $("E F")
            2.子代选择器 $("E>F")
            3.相邻选择器 $("E+F")
            4.同辈选择器 $("E~F")
        */


        //1.选择body中的所有div元素
        $("#btn1").click(function(){
            $("body div").css("background-color","#bbffaa");
        });
        //2.选择body中，div子元素(div孙子元素不能算)
        $("#btn2").click(function(){
            $("body > div").css("background-color","#bbffaa");
        });
        //3.同父条件下，选择id为one元素后的紧跟（第一个）div元素
        $("#btn3").click(function(){
            $("#one+div").css("background-color","#bbffaa");
        });
        //4.选择id为two的元素后面所有div兄弟元素
        $("#btn4").click(function(){
            $("#two~div").css("background-color","#bbffaa");
        });
    })

    </script>
    </head>
    <body>
    <form>
    <div class="one" id="one">
    id为one的div，class为one的div
<div class="mini">class为mini</div>
    </div>
    <div class="one" id="two">
    1id为two，class为one title为test的div
<div class="mini" title="other">class为mini  title为other</div>
<div class="mini" title="test">class为mini  title为test</div>
</div>
<br><br>
<div class="one">
    2
    <div class="mini">class为mini</div>
    <div class="hhh">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    </div>
    <br><br>
    <div class="one">
    <div class="hhh">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini title为tesst</div>
</div>
</form>
<br><br>
<div style="display:none;" class="none">style为display："none"的div</div>
<br><br>
<div class="hide">class为hide</div>
    <br><br>
    <div>
    包含input的type为hideen的div<input type="hidden" size="8">
    </div>
    <br><br>
    <span class="one" id="span">span元素</span>
    <br><br>



    <h1>控制台</h1>
    <button id="btn1">1.选择body中的所有div元素</button><br><br>
<button id="btn2">2.选择body中，选择div子元素</button><br><br>
<button id="btn3">3.同父条件下，选择id为one元素后的紧跟（第一个）div元素</button><br><br>
<button id="btn4">4.选择id为two的元素后面的所有div兄弟元素</button>


</body>
</html>

二.层次选择器

1. 后代选择器 $(“E F”)

选择给定的祖先元素的所有后代元素。
一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。

实例

//1.选择body中的所有div元素
$("#btn1").click(function(){
    $("body div").css("background-color","#bbffaa");
});

2. 子代选择器 $(“E>F”)

选择所有指定“E”元素中指定的"F"的直接子元素。 (只能是儿子级别，不能是孙子级别)
子元素组合选择器(E > F)它只会选择第一级的后代。

实例

//2.选择body中，div子元素(div孙子元素不能算)
$("#btn2").click(function(){
    $("body > div").css("background-color","#bbffaa");
});

3. 相邻选择器 $(“E+F”)

选择紧跟（其后的第一个）在 “E” 元素后的 “F” 元素
必须在同一个父元素下

实例

//3.同父条件下，选择id为one元素后的所有div元素
$("#btn3").click(function(){
    $("#one+div").css("background-color","#bbffaa");
});

4. 同辈选择器 $(“E~F”)

匹配 “E” 元素之后的所有 ”F“ 元素
不要求统一父级，而是匹配所有F！

实例

//4.选择id为two的元素后面所有div兄弟元素
$("#btn4").click(function(){
    $("#two~div").css("background-color","#bbffaa");
});

* 层次选择器完整程序

我把程序分享给你，自行认真验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>层次选择器</title>
    <style type="text/css">
    div,span,p{
    width:140px;
    heigth:140px;
    margin:5px;
    background-color:#aaa;
    border:#000 2px solid;
    float:left;
    font-size:20px;
}
div.mini{
    width:50px;
    heigth:50px;
    background-color:#aaa;
    font-size:12px;
}
div.hide{
    display:none;
}
</style>
<script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
    $(function(){
        /*
            1.后代选择器 $("E F")
            2.子代选择器 $("E>F")
            3.相邻选择器 $("E+F")
            4.同辈选择器 $("E~F")
        */
        //1.选择body中的所有div元素
        $("#btn1").click(function(){
            $("body div").css("background-color","#bbffaa");
        });
        //2.选择body中，div子元素(div孙子元素不能算)
        $("#btn2").click(function(){
            $("body > div").css("background-color","#bbffaa");
        });
        //3.同父条件下，选择id为one元素后的紧跟（第一个）div元素
        $("#btn3").click(function(){
            $("#one+div").css("background-color","#bbffaa");
        });
        //4.选择id为two的元素后面所有div兄弟元素
        $("#btn4").click(function(){
            $("#two~div").css("background-color","#bbffaa");
        });
    })
    </script>
    </head>
    <body>
    <form>
    <div class="one" id="one">
    id为one的div，class为one的div
<div class="mini">class为mini</div>
    </div>
    <div class="one" id="two">
    1id为two，class为one title为test的div
<div class="mini" title="other">class为mini  title为other</div>
<div class="mini" title="test">class为mini  title为test</div>
</div>
<br><br>
<div class="one">
    2
    <div class="mini">class为mini</div>
    <div class="hhh">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    </div>
    <br><br>
    <div class="one">
    <div class="hhh">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini title为tesst</div>
</div>
</form>
<br><br>
<div style="display:none;" class="none">style为display："none"的div</div>
<br><br>
<div class="hide">class为hide</div>
    <br><br>
    <div>
    包含input的type为hideen的div<input type="hidden" size="8">
    </div>
    <br><br>
    <span class="one" id="span">span元素</span>
    <br><br>
    <h1>控制台</h1>
    <button id="btn1">1.选择body中的所有div元素</button><br><br>
<button id="btn2">2.选择body中，选择div子元素</button><br><br>
<button id="btn3">3.同父条件下，选择id为one元素后的紧跟（第一个）div元素</button><br><br>
<button id="btn4">4.选择id为two的元素后面的所有div兄弟元素</button>
</body>
</html>

三.过滤选择器(直接举例)

1. 选择第一个div元素

//1.选择第一个div元素
$("#btn1").click(function(){
    $("div:first").css("background-color","#bbffaa");
});

2. 选择class不为one的所有div元素

//2.选择class不为one的所有div元素
$("#btn2").click(function(){
    $("div:not(.one)").css("background-color","#bbffaa");
});

3. 选择索引值为等于0的div元素

//3.选择索引值为等于0的div元素
$("#btn3").click(function(){
    $("div:eq(0)").css("background-color","#bbffaa");
});

4. 选择当前正在执行动画的所有元素

//4.选择当前正在执行动画的所有元素
$("#btn4").click(function(){
    $(":animated").css("background-color","#bbffaa");
});

5. 选择含有子元素的div元素

//5.选择含有子元素的div元素
$("#btn5").click(function(){
    $("div:parent").css("background-color","#bbffaa");
});

6. 选择所有不可见的div元素

//6.选择所有不可见的div元素
$("#btn6").click(function(){
    $("div:hidden").show("normal").css("background-color","#bbffaa");
});

7. 选择属性title值等于"test"的div元素

//7.选择属性title值等于"test"的div元素
$("#btn7").click(function(){
    $("div[title='test']").css("background-color","#bbffaa");
});

8. 选择class为one的div父元素下的第一个子元素

//8.选择class为one的div父元素下的第一个子元素
$("#btn8").click(function(){
    $("div.one > :first").css("background-color","#bbffaa");
});

9. 选择每个class为one的div父元素下的第一个子元素

//9.选择每个class为one的div父元素下的第一个子元素
$("#btn9").click(function(){
    $("div.one > :first-child").css("background-color","#bbffaa");
});

* 过滤选择器完整程序

我把程序分享给你，自行认真验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>过滤选择器</title>

    <style type="text/css">
    div,span,p{
    width:140px;
    heigth:140px;
    margin:5px;
    background-color:#aaa;
    border:#000 2px solid;
    float:left;
    font-size:20px;
}
div.mini{
    width:50px;
    heigth:50px;
    background-color:#aaa;
    font-size:12px;
}
div.hide{
    display:none;
}
</style>
<script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
    $(function(){
        //执行动画的div
        function anmateIt(){
            $("#mover").slideToggle(1000,anmateIt);//自己调用自己，根本停不下来------
        }
        //slideToggle 上上下下运动
        anmateIt();
    })

$(function(){
    //1.选择第一个div元素
    $("#btn1").click(function(){
        $("div:first").css("background-color","#bbffaa");
    });
    //2.选择class不为one的所有div元素
    $("#btn2").click(function(){
        $("div:not(.one)").css("background-color","#bbffaa");
    });
    //3.选择索引值为等于0的div元素
    $("#btn3").click(function(){
        $("div:eq(0)").css("background-color","#bbffaa");
    });
    //4.选择当前正在执行动画的所有元素
    $("#btn4").click(function(){
        $(":animated").css("background-color","#bbffaa");
    });
    //5.选择含有子元素的div元素
    $("#btn5").click(function(){
        $("div:parent").css("background-color","#bbffaa");
    });
    //6.选择所有不可见的div元素
    $("#btn6").click(function(){
        $("div:hidden").show("normal").css("background-color","#bbffaa");
    });
    //7.选择属性title值等于"test"的div元素
    $("#btn7").click(function(){
        $("div[title='test']").css("background-color","#bbffaa");
    });
    //8.选择class为one的div父元素下的第一个子元素
    $("#btn8").click(function(){
        $("div.one > :first").css("background-color","#bbffaa");
    });
    //9.选择每个class为one的div父元素下的第一个子元素
    $("#btn9").click(function(){
        $("div.one > :first-child").css("background-color","#bbffaa");
    });
});
</script>
</head>
<body>
<div class="one" id="one">
    id为one的div，class为one的div
<div class="mini">class为mini</div>
    </div>
    <div class="one" id="two">
    id为two，class为one title为test的div
<div class="mini" title="other">class为mini  title为other</div>
<div class="mini" title="test">class为mini  title为test</div>
</div>
<br><br>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    </div>
    <br><br>
    <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini title为tesst</div>
</div>
<br><br>
<div style="display:none;" class="none">style为display："none"的div</div>
<br><br>
<div class="hide">class为hide</div>
    <br><br>
    <div>
    包含input的type为hideen的div<input type="hidden" size="8">
    </div>
    <br><br>
    <span class="one" id="span">span元素</span>
    <br><br>
    <div id= "mover">正在执行的div动画</div>  
    <br><br>


    <h1>控制台</h1>
    <button id="btn1">1.选择第一个div元素</button><br><br>
<button id="btn2">2.选择class不为one的所有div元素</button><br><br>
<button id="btn3">3.选择索引值为等于0的div元素</button><br><br>
<button id="btn4">4.选择当前正在执行动画的所有元素</button><br><br>
<hr>
<button id="btn5">5.选择含有子元素的div元素</button><br><br>
<button id="btn6">6.选择所有不可见的div元素</button><br><br>
<button id="btn7">7.选择属性title值等于"test"的div元素</button><br><br>
<button id="btn8">8.选择每个class为one的div父元素下的第一个子元素</button><br><br>
<button id="btn9">9.选择每个class为one的div父元素下的第一个子元素</button>
</body>
</html>

四.表单过滤、对象属性选择器(直接举例)

1. 对表单内可用input 赋值操作

(如有需要可以添加背景色方便查看变化)

//1.对表单内可用input 赋值操作 (如有需要可以添加背景色 方便查看变化)
$("#btn1").click(function(){
    $("input:enabled").val("新赋值1").css("background-color","#bbffaa");
})

2. 对表单内不可用input 赋值操作

//2.对表单内不可用input 赋值操作
$("#btn2").click(function(){
    $("input:disabled").val("新赋值2").css("background-color","#bbffaa");
})

3. 获取多选框中的个数(重点)

//3.获取多选框中的个数(重点)
$("#btn3").click(function(){
    var $cc = $(":checkbox:checked");
    alert($cc.length);
});

4. 获取多选框中的内容（有坑）

//4.获取多选框中的内容（有坑）
$("#btn4").click(function(){
    var $cc = $(":checkbox:checked");
    //办法1：
    /*
    for(var i= 0;i<$cc.length;i++)
        {
            alert($cc[i].value); //$cc[i]是一个数组 是DOM对象
        }
    */
    //办法2：使用。each迭代数组
    $cc.each(function(){
        //alert(this.value);//dom方法
        //或者
        alert($(this).val());//jquery方法
    });
});

5. 获取下拉框中的内容

//5.获取下拉框中的内容
$("#btn5").click(function(){
    var $ss = $("select option:selected");
    //只有jquery对象才能使用.each()  就是说$ss必须的是jquery，才能$ss.each()的表达方式
    $ss.each(function(){
        //this是dom对象   $(this)对象是jquery对象
        //alert(this.value);
        //或者
        alert($(this).val());
    })
});

* 表单过滤、对象属性选择器完整程序

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>表单过滤选择器&对象属性过滤选择器</title>
    <script type="text/javascript" src="../4.jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
    $(function(){
        //1.对表单内可用input 赋值操作 (如有需要可以添加背景色 方便查看变化)
        $("#btn1").click(function(){
            $("input:enabled").val("新赋值1").css("background-color","#bbffaa");
        })
        //2.对表单内不可用input 赋值操作
        $("#btn2").click(function(){
            $("input:disabled").val("新赋值2").css("background-color","#bbffaa");
        })
        //3.获取多选框中的个数(重点)
        $("#btn3").click(function(){
            var $cc = $(":checkbox:checked");
            alert($cc.length);
        });
        //4.获取多选框中的内容（有坑）
        $("#btn4").click(function(){
            var $cc = $(":checkbox:checked");
            //办法1：
            /*
            for(var i= 0;i<$cc.length;i++)
                {
                    alert($cc[i].value); //$cc[i]是一个数组 是DOM对象
                }
            */
            //办法2：使用。each迭代数组
            $cc.each(function(){
                //alert(this.value);//dom方法
                //或者
                alert($(this).val());//jquery方法
            });
        });
        //5.获取下拉框中的内容
        $("#btn5").click(function(){
            var $ss = $("select option:selected");
            //只有jquery对象才能使用.each()  就是说$ss必须的是jquery，才能$ss.each()的表达方式
            $ss.each(function(){
                //this是dom对象   $(this)对象是jquery对象
                //alert(this.value);
                //或者
                alert($(this).val());
            })
        });
    });
</script>
</head>
<body>
<form id="form1" action="#">
    可用元素：<input name="add" value="可用文本框1" /><br><br>
    不可用元素:<input name="email" disabled="disabled" value="不可用文本框" /><br><br>
    可用元素：<input name="che" value="可用文本框2"/><br><br>
    不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br><br>

    多选框：<br>
<input type="checkbox" name="newsLetter" checked="checked" value="test1" />test1
    <input type="checkbox" name="newsLetter" value="test2" />test2
    <input type="checkbox" name="newsLetter" value="test3" />test3
    <input type="checkbox" name="newsLetter" checked="checked" value="test4"/>test4
    <input type="checkbox" name="newsLetter" value="test5" />test5
    <br><br>

    下拉列表1：<br>
<select name="test" multiple="multiple" style="height:100px">
    <option>浙江</option>
    <option selected="selected">辽宁</option>
    <option>北京</option>
    <option selected="selected">天津</option>
    <option>广州</option>
    <option>湖北</option>
    </select>
    <br>

    下拉列表2：<br>
<select name="test2" multiple="multiple" style="height:100px">
    <option>浙江</option>
    <option>辽宁</option>
    <option>北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
    </select>
    </form>
    <h1>控制台</h1>
    <h1>表单对象属性过滤选择器</h1>
    <button id="btn1">1.对表单内  可用input赋值操作</button><br><br>
<button id="btn2">2.对表单内  不可用input赋值操作</button><br><br>
<button id="btn3">3.获取多选框选中的个数</button><br><br>
<button id="btn4">4.获取多选框中的内容</button><br><br>
<button id="btn5">5.获取下拉菜单中的内容</button><br><br>

</body>
</html>

北溟南风起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery系列（二）：常用选择器的分析与应用专刊（提供完整程序）

目录一.基本选择器1. id选择器 jQuery("#ID") 或者$("#id")2. 类选择器 jQuery(".CLASS") 或者$(".CLASS")3. 标签选择器 jQuery("element") 或者$("element")4. 全局选择器 jQuery("*") 或者$("*")5. 并集选择器 jQuery(" selector1,...,selectorN")* 基本选择器完整程序二.层次选择器1. 后代选择器 $("E F")2. 子代选择器 $("E>F"
复制链接

扫一扫