（一）基本选择器：

1、根据类名、id名、标签名，直接选择；

2、* 选择全部标签，包含body；

3、选择器之间用逗号隔开，可同时并列选择多个，

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $(".cla").css("color","red");
            $("#dd").css("color","green");
            $("p").css("color","yellow");
            $("*").css("border","1px solid pink");
            $(".cla,.back").css("background-color","gray");
        })
    </script>
</head>
<body>
    <div class="cla">class变红</div>
    <div id="dd">id变绿</div>
    <p>element变黄</p>
    <div>匹配所有元素:加边框,所有元素包括body，</div>
    <div class="back">并列选择加背景</div>
</body>
</html>

View Code

（二）层级选择：后代、儿子、兄弟、长辈

1、直接使用层级选择器、

2、应用选择器加筛选器

注意：1）虽然可以实现相同的功能，但是层级选择器在进行选择时，语法中需要进行字符串的拼接，不易扩展和复用，效率低；推荐使用筛选器；

　　　2）选择器在使用的时候，由于空格代指后代，在使用过程中，常与显示格式的空格混淆，容易出错，不推荐使用，

所有兄弟：$（selector）.siblings（），

　儿子：$（selector）.children（），

　上一个：$（selector）.prev（），

　下一个：$（selector）.next（），

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
        ////////////////////层级选择器////////////////////////////////////////////
        /*
        //后代
            $(".levelSelector div").css("color","blue");
        //儿子
            $(".levelSelector > .boy").css("font-size","16px");
        //下一个兄弟
            $(".levelSelector .dad+").css("background-color","gray");
            //$(".levelSelector .dad + .girl").css("background-color","gray"); //无效果
        //后面所有的兄弟
            $(".levelSelector .dad~ ").css("border","1px solid pink");
        */
        /////////////////////筛选器/////////////////////////////////////////////
        //$(".yeye").children(".boy").css("color","blue");    //儿子
        //$(".yeye").find(".boy").css("font-size","16px");    //后代

        /*
        $(".lucy").parent().css("background-color","gray");              //爸爸
        $(".lucy").parents().css("color","blue");                        //全部祖先
        $(".lucy").parentsUntil(".yeye").css("text-align","center");     //直到指定位置的长辈
        */

        /*
        //$(".yeye").children(".girl").prev().css("background-color","gray");           //上一个兄弟
        //$(".yeye").children(".girl").prevAll().css("border","1px solid pink");        //上面所有兄弟
        //$(".yeye").children(".girl").prevUntil(".dad").css("text-align","center");   //上面直到指定位置的兄弟
        */

        /*
        //$(".yeye").children(".dad").next().css("background-color","gray");           //下一个兄弟
        //$(".yeye").children(".dad").nextAll().css("border","1px solid pink");        //下面所有兄弟
        //$(".yeye").children(".dad").nextUntil(".girl").css("text-align","center");   //下面直到指定位置的兄弟，不包含
        */

        /*
        //最常用的：所有兄弟
        $(".yeye").children(".boy").siblings().css("border","1px solid pink");
        */
        })
    </script>
</head>
<body>
        <div class="levelSelector yeye">
            爷爷
            <div class="dad">
                爷爷-爸爸
                <div class="boy">
                    爷爷-爸爸-孙子
                </div>
                <div class="girl lucy">
                    爷爷-爸爸-孙女
                </div>
            </div>
            <div class="boy">
                爷爷-叔叔
                <div class="boy">
                    爷爷-叔叔-表哥
                </div>
            </div>
            <div class="girl">
                爷爷-姑姑
                <div class="girl">
                    爷爷-姑姑-表姐
                </div>
            </div>
        </div>

</body>
</html>

View Code

（三）指定位置

1、第一个first（）、最后一个last（）

2、按索引指定位置eq（）、按索引切片silce（）

3、关于奇数索引位置、偶数索引位置，筛选器无法实现，使用悬选择器$（selector:odd（））、$（selector:even（））,

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            /*//第一个
            $("#yeye").children().first().css("color","blue");
            $("#yeye>:first").css("color","blue");  //第一个孩子，也是第一个节点
            $("#yeye :first").css("color","blue");  //第一个节点
            */

            /*//最后一个
            $("#yeye").children().last().css("color","red");
            $("#yeye>:last").css("color","red");    //最后一个儿子
            $("#yeye :last").css("color","red");    //最后一个节点
            */

            /*//指定索引位置
            //$("#yeye").children().eq(1).css("color","pink");
            $("#yeye>:eq(1)").css("color","pink");
            */

            /*//按索引切片
            //$("#yeye").children().slice(1,).css("color","pink");    //end索引位置可以省略，表示到最后
            //$("#yeye").children().slice(1,2).css("color","pink");   //包含开始，不包含结束
            $("#yeye>:lt(2):gt(0)").css("color","pink");              //gt不包含，lt不包含
            */

            //奇数位置、偶数位置
            $("#yeye>:even()").css("color","pink"); //偶数索引
            $("#yeye>:odd()").css("color","red");   //奇数索引

        })
    </script>
</head>
<body>
        <div id="yeye">
            爷爷
            <div>
                爷爷-爸爸
                <div>
                    爷爷-爸爸-孙子
                </div>
                <div>
                    爷爷-爸爸-孙女
                </div>
            </div>
            <div>
                爷爷-叔叔
                <div>
                    爷爷-叔叔-表哥
                </div>
            </div>
            <div>
                爷爷-姑姑
                <div>
                    爷爷-姑姑-表姐
                </div>
            </div>
        </div>

</body>
</html>

View Code

（四）内容选择

1、has（），包含指定后代的元素，筛选器的参数范围较大：选择器字符串、DOM元素，

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            /*
            //包含特定后代的元素，参数：选择器
            //$("#yeye>:has(p)").css("color","blue");
            //$("#yeye>:has(.sn)").css("color","blue");

            //包含特定后代的元素，参数：选择器字符串、DOM元素
            //$("#yeye").children().has("p").css("color","blue");
            //$("#yeye").children().has(".sn").css("color","blue");
            var ret = document.getElementById("ss");
            $("#yeye").children().has(ret).css("color","blue");
            */


        })
    </script>
</head>
<body>
        <div id="yeye">

            <p>p爷爷</p>

            <div>
                div爷爷-爸爸
                <div>
                    <p>p爷爷-爸爸-孙子</p>
                </div>
                <div class="sn">
                    div爷爷-爸爸-孙女
                </div>
            </div>

            <div class="ss">
                <p>p爷爷-叔叔</p>
                <div id="ss">
                    div爷爷-叔叔-表哥
                </div>
            </div>

            <div>
                爷爷-姑姑
                <div>
                    div爷爷-姑姑-表姐
                </div>
            </div>
        </div>

</body>
</html>

View Code

2、not（），指定元素意外的其他元素，

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //指定之外其他元素
            $("#yeye").children().not(".ss").css("color","blue");

        })
    </script>
</head>
<body>
        <div id="yeye">

            <p>p爷爷</p>

            <div>
                div爷爷-爸爸
                <div>
                    <p>p爷爷-爸爸-孙子</p>
                </div>
                <div class="sn">
                    div爷爷-爸爸-孙女
                </div>
            </div>

            <div class="ss">
                <p>p爷爷-叔叔</p>
                <div id="ss">
                    div爷爷-叔叔-表哥
                </div>
            </div>

            <div>
                爷爷-姑姑
                <div>
                    div爷爷-姑姑-表姐
                </div>
                <div></div>
            </div>

        </div>


</body>
</html>

View Code

3、：contains（），包含指定文本的元素，

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //含有指定文本
            $("#yeye :contains('表姐')").css("color","blue");

        })
    </script>
</head>
<body>
        <div id="yeye">

            <p>p爷爷</p>

            <div>
                div爷爷-爸爸
                <div>
                    <p>p爷爷-爸爸-孙子</p>
                </div>
                <div class="sn">
                    div爷爷-爸爸-孙女
                </div>
            </div>

            <div class="ss">
                <p>p爷爷-叔叔</p>
                <div id="ss">
                    div爷爷-叔叔-表哥
                </div>
            </div>

            <div>
                爷爷-姑姑
                <div>
                    div爷爷-姑姑-表姐
                </div>
                <div></div>
            </div>

        </div>


</body>
</html>

View Code

4、：empty，空元素，不含子元素、不含文本，

：parent，非空元素，含有子元素或者文本，

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
        //empty:空元素,不含子元素、不含文本，
            //$("#yeye :empty").prev().css("color","red");
            //$("#yeye>:empty").css("background","red");
        //parent：非空元素，含有子元素或文本
            $("#yeye>:parent").css("background","yellow");

        })
    </script>
</head>
<body>
        <div id="yeye">

            <p>p爷爷</p>

            <div>
                div爷爷-爸爸
                <div>
                    <p>p爷爷-爸爸-孙子</p>
                </div>
                <div class="sn">
                    div爷爷-爸爸-孙女
                </div>
            </div>

            <div class="ss">
                <p>p爷爷-叔叔</p>
                <div id="ss">
                    div爷爷-叔叔-表哥
                </div>
            </div>

            <div>
                爷爷-姑姑
                <div>
                    div爷爷-姑姑-表姐
                </div>
                <div></div>
            </div>

            <div style="width:100%;height:50px;border:1px solid red;"></div>
        </div>


</body>
</html>

View Code

hasClass（），判断是否含有指定类，返回布尔值

　　　is（），判断是否有元素符合is指定内容，返回布尔值，参数可以是选择器字符串、DOM元素、函数function，

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
        /*
            //hasClass()，判断元素是否含有指定类，返回布尔值
            console.log($("#yeye").children().hasClass("ss")); //true
            console.log($("#yeye").children().hasClass("sn")); //false
        */

            //is(),判断是否有元素符合指定内容，返回布尔值,还可以添加函数
            //console.log($("#yeye").children().is(".ss")); //true

        })
    </script>
</head>
<body>
        <div id="yeye">

            <p>p爷爷</p>

            <div>
                div爷爷-爸爸
                <div>
                    <p>p爷爷-爸爸-孙子</p>
                </div>
                <div class="sn">
                    div爷爷-爸爸-孙女
                </div>
            </div>

            <div class="ss">
                <p>p爷爷-叔叔</p>
                <div id="ss">
                    div爷爷-叔叔-表哥
                </div>
            </div>

            <div>
                爷爷-姑姑
                <div>
                    div爷爷-姑姑-表姐
                </div>
                <div></div>
            </div>
        </div>


</body>
</html>

View Code

（五）属性选择器

1、基本属性选择器，语法：$（selector【attr】）,其中attr还可以进一步的进行判断，

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("div[attr]").css("font-size","18px");
            $("div[attr = 'hin']").css("color","red");
            $("div[attr != 'hin']").css("color","blue");
            $("div[attr ^= 'h']").css("border","1px solid yellow");
            $("div[attr $= 'o']").css("background","gray");
            $("div[attr *= 'n']").css("text-align","center");
            $("div[attr = 'lucy'][maam = 'dongxue']").css("color","pink");
        })
    </script>
</head>
<body>
    <div attr="hin">属性选择器</div>
    <div attr="hello">属性选择器</div>
    <div attr="no">属性选择器</div>
    <div attr="lucy" maam="dongxue">组合1</div>
    <div attr="lucy">组合2</div>
</body>
</html>

View Code

2、input表单的type属性，例如：$（input【type=text】），可以缩写成：$（：text），其他type属性值类似

：selected、：checked、：disabled、：enabled、

jquery筛选器模糊筛选id jq筛选选择器_css

jquery筛选器模糊筛选id jq筛选选择器_css_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
        //input表单type属性简写，：checked
            //$(":checkbox:checked").removeAttr("checked");
            //$(":radio:checked").removeAttr("checked");
        //：selected
            //$(":selected").removeAttr("selected");
            //$(":not(':selected')").attr("selected","selected");
        //：disabled
            //$(":disabled").removeAttr("disabled");
        //：enabled
            $(":enabled").attr("disabled","disabled");

        })
    </script>
</head>
<body>
    <div class="like">
        <input type="checkbox" name="ch" value="1" checked="checked"/>画画
        <input type="checkbox" name="ch" value="2" disabled="disabled" />游泳
        <input type="checkbox" name="ch" value="3" disabled="disabled" />轮滑
        <input type="checkbox" name="ch" value="4"  />跳舞
    </div>
    <div class="sex">
        <input type="radio" name="se" value="1" checked="checked" />男
        <input type="radio" name="se" value="2" />女
    </div>
    <select class="sel">
        <option value="2" disabled="disabled" >上海</option>
        <option value="3" selected="selected" disabled="disabled">南京</option>
    </select>



</body>
</html>

View Code