jQuery最基础最全面的选择器大览

Posted 追逐梦想的路上

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery最基础最全面的选择器大览相关的知识，希望对你有一定的参考价值。

    一、基本选择器

    1.标签选择器 （element）:根据给定的标签名匹配元素

       eg:$("h2")选取所有h2元素 --- 返回元素集合

    2.类选择器 （.class）:根据给定的class匹配元素

       eg:$(".title")选取所有class为title的元素 --- 返回元素集合

    3.ID选择器 （#id） :根据给定的id匹配元素

       eg:$("#title")选取id为title的元素 --- 返回单个元素

    4.并集选择器 （select1,select2,...,selectorN）:将每一个选择器匹配的元素合并后一起返回

       eg:$("div,p,.title")选取所有div、p和拥有class为title的元素 ---返回元素集合

    5.交集选择器 （element.class或element#id）:匹配指定class或id的某元素或元素集合(若在同一个页面中指定id的元素返回值,则一定是单个元素;若指       定class的元素,则可以是单个元素,也可以是元素集合)

      eg:$("h2.title")选取所有拥有class为title的h2元素  ---返回单个元素或元素集合

    6.全局选择器 （*） :匹配所有元素

      eg:$("*")选取所有的元素  ---返回集合元素

    

    二、层次选择器

      1.后代选择器 （ancestor descendant）选取ancestor元素里所有descendant元素

      2.子选择器  （parent>child） 选取parent元素下的child（子）元素

      3.相邻元素选择器 （prev+next） 选取紧邻prev元素之后的next元素

      4.同辈元素选择器 （prev~sibings） 选取prev元素之后的所有sibings（同辈）元素

      *案例

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>上机练习1</title>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("p").click(function () {
                //后代
                $(".txt_box .current").css("background", "#6FF");
                //子集
                $("p>span").css("background", "#F9F");
                //相邻
                $("h1+p").css("background", "#F06");
                //同辈
                $("strong~span").css("color", "#00C");
            });
        });
    </script>
</head>
<body>
    <h1>英雄联盟</h1>
    <p>《英雄联盟》,简称LOL</p>
    <p>由<strong>Riot Game</strong>开发,为3D竞技场战游戏,其<span>主创团队由实力强劲的
        <strong>魔兽争霸</strong>
        系列游戏多人即时对战自定义地图开发团队
        </span>
        <a href="#">更多详情</a>
    </p>
    <h2>目录</h2>
    <ul class="txt_box">
        <li class="current">开发团队</li>
        <li>游戏周边</li>
        <li>游戏介绍</li>
        <li>游戏需求</li>
        <li>游戏背景</li>
    </ul>
</body>
</html>

 

 

    三、属性选择器

      1.[attribute] :选取包含给定属性的元素

         //改变含有title属性的h2元素的背景颜色

        eg:$("h2[title]").css("background","red");

      2.[attribute=value]:选取等于给定属性是某个特定值得元素

         //改变class属性的值为odds的元素的背景颜色

          eg:$("class=pdds").css("backround","red");

       3.[attribute!=value] :选取不等于给定属性是某个特定值的元素

             //改变id属性的值不为odds的元素的背景颜色

            eg:$("#id!=pdds").css("backround","red");

       4.[attribute^=value] :选取给定属性是以某特定值开始的元素

         //改变title属性的值以h开头的元素的背景颜色

        eg:$("title^=h").css("background","red");

       5.[attribute$=value]:选取给定属性是以某些特定值结尾的元素

         //改变title属性的值中以jp结尾的元素的背景颜色

          eg:$("title$=jp").css("backround","red");

       6.[attribute*=value] :选取给定属性是包含某些值的元素  

             //改变title属性的值中含有s的元素的背景颜色

            eg:$("title*=s").css("backround","red");

        7.[selector][selector2][selectorN] :选取满足多个条件的复合属性的元素

             //改变包含class属性,且title属性的值中含有y的<li>元素的背景颜色

            eg:$("li[class][title*=y]").css("background","red");

 

     四、基本过滤选择器

        1.:first :选取第一个元素 --- 返回单个元素

         2.:last : 选取第一个元素 --- 返回单个元素

         3.:not(selector):选取去除所有与给定选择器匹配的元素 --- 返回集合元素

         4.:even :选取索引是偶数的所有元素（索引index均从0开始） --- 返回集合元素

         5.:odd :选取索引是奇数的所有元素 --- 返回集合元素

         6.:eq : 选取索引等于index的元素--- 返回单个元素

         7.:gt : 选取索引大于index的元素 --- 返回集合元素

         8.:lt  : 选取索引小于index的元素 --- 返集合单元素

         9. :header : 选取所有标题的元素,如h1~h6

         10. :focus  : 选取当前获取焦点的元素

          //$(":focus").css("background", "red");

 

    五、可见性过滤选择器

      1.:visible :选取所有可见的元素 --- 返回集合元素

       2.:hidden :选取所有隐藏的元素 --- 返回集合元素

       3.其中,显示方法为--show()、隐藏方法为hide()。

 

      * 案例

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>上机练习3</title>
    <style type="text/css">
        h1 {
            color: green;
        }
        ul {
            margin-left: -40px;
            font-size:30px;
            color:gray;
        }
        li {
            list-style:none;
         }
        span {
            font-size: 22px;
            color: red;
        }
    </style>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" >
        $(function () {
            $("li:even").css("background", "#CCC");
            $("li:eq(2)").css("background", "#FF99CC");
            $("li:gt(5)").hide();
            $("#hid").click(function () {
                $("li:hidden").show();
            });
            $("#xid").mouseover(function () {
                $("li:visible").show();
            });
            $("#xid").mouseover(function () {
                $("li:hidden").show();
            });
            $("#xid").mouseout(function () {
                $("li:gt(5)").hide();
            });
        });
    </script>
</head>
<body>
    <h1>淘宝,发现更多生活,<strong>快乐</strong>就在你身边</h1>
    <ul>
        <li>近期热门........<span><a href="#" id="xid">（更多）</a></span></li>
        <li>言语之庭</li>
        <li>斯托克</li>
        <li>宿醉</li>
        <li>巨人捕手杰克</li>
        <li>副作用</li>
        <li>血肉之躯</li>
        <li>七号房的礼物</li>
        <li>惊声尖笑</li>
    </ul>
    <a href="#" id="hid">更多排名</a>>
</body>
</html>

 

以上是关于jQuery最基础最全面的选择器大览的主要内容，如果未能解决你的问题，请参考以下文章

史上最全的jQuery选择器

jQuery选择器

jQuery的选择器

jQuery 选择器

jQuery选择器基础入门教程

Jquery都有哪些选择器