Jquery基本选择器与层次选择器

一、什么是jquery选择器？
就是允许通过标签名、属性或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的景区呃呃呃定位，才能完成元素属性和行为的处理。

二、下面是一个使用jQuery选择器实现隔行变色的实例

<html>
    <head></head>
    <meta/>
    <style type="text/css">
        body{font-size:12px;text-align:center;}
        #tbStu{width:260px;border:solid 1px #666;background-color:#eee}
        #tbStu tr{line-height:23px}
        #tbStu tr th{background-color:#eee;color:#fff}
        #tbStu .trOdd{background-color:#fff}
    </style>
    <!-- 导入Jquery框架 -->
    <script src="jquery-3.1.1.min.js" language="javascript" type="text/javascript"></script>
    <script type="text/javascript">
        //使用的是传统的javascript实现的
        //window.onload = function(){
            /*var oTb = document.getElementById("tbStu");
            for(var i=0;i<=oTb.rows.length-1;i++){
                alert(i%2);
                if(i%2){
                    oTb.rows[i].className="trOdd";
                }
            }*/
            /*if(document.getElementById("divT")){//检测网页上是否存在该Div
                var oDiv = document.getElementById("divT");
                oDiv.innerHTML = "这是一个检测页面";
            }*/
        //};

        //下面是使用jQuery实现的
        //$(document).ready(function(){
            $("#tbStu tr:nth-child(even)").addClass("trOdd");
            //$("#divT").html("这是一个检测页面");//不需要检测网页上是否存在该Div
        //});

    </script>
    <body>
        <table id="tbStu" cellpadding="0px" cellspacing="0">
            <tbody>
                <tr>
                    <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
                </tr>
                <tr>
                    <td>1</td><td>张晓明</td><td>男</td><td>67</td>
                </tr>
                <tr>
                    <td>2</td><td>张晓</td><td>男</td><td>89</td>
                </tr>
                <tr>
                    <td>3</td><td>张明</td><td>男</td><td>90</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

三、jquery选择器的分类：
1、基本选择器：
是由Id、Class、元素名、多个选择符组成。

<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text;charset=utf-8"/>
        <style type="text/css">
            body{font-size:12px;text-align:center}
            .BigDiv{width:300px;height:100px}
            .BigDiv div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px}
            .div2{background-color:#eee}
        </style>
        <script src="jquery-3.1.1.min.js" language="javascript" type="text/javascript"></script>
        <script type="text/javascript">
            //匹配ID元素
            $(function(){
                $("#div1").css("display","block");
            });
            //元素名匹配元素
            $(function(){
                $("div span").css("display","block");
            });

            //类匹配元素
            $(function(){
                $(".BigDiv .div2").css("display","block");
            });

            //合并匹配元素
            $(function(){
                $("#divOne,span").css("display","block");
            });
        </script>
    </head>

    <body>
        <div class="BigDiv">
            <div id="div1">ID</div>
            <div class="div2">CLASS</div>
            <span>SPAN</span>
        </div>
    </body>
</html>

2、层次选择器：
通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。

<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text;charset=utf-8"/>
        <style type="text/css">
            body{font-size:12px;text-align:center}
            div,span {float:left;border:solid 1px #ccc;margin:8px;display:none}
            .div1{width:65px;height:65px;}
            .span1{width:45px;height:45px;background-color:#eee}
            .span2{width:25px;height:25px;background-color:#dd}
        </style>
        <script src="jquery-3.1.1.min.js" language="javascript" type="text/javascript"></script>
        <script type="text/javascript">
            //匹配后代所有元素(祖先与后代)
            /*$(function(){
                $("#divMid").css("display","block");
                $("div span").css("display","block");
            });*/

            //匹配子元素(父子关系)
            /*$(function(){
                $("#divMid").css("display","block");
                $("div>span").css("display","block");
            });*/

            //匹配后面的元素(相邻关系)
            /*$(function(){
                //$("#divMid+div").css("display","block");
                $("#divMid").next().css("display","block");
            });*/

            //匹配后面所有元素
            /*$(function(){
                //$("#divMid~div").css("display","block");
                $("#divMid").nextAll().css("display","block");
            });*/   

            //匹配所有相邻元素
            $(function(){
                $("#divMid").siblings("div").css("display","block");
            }); 

            //注意：siblings方法与选择器pre~siblings区别在于，前者获取所有的相邻元素，不分前后，而后者只取后面的全部元素，不能获取前面的全部元素

        </script>
    </head>

    <body>
        <div class="div1">Left</div>
        <div class="div1" id="divMid">
            <span class="span1" id="SpanA">
                <span class="span2" id="spanB"></span>
            </span>
        </div>
        <div class="div1">Right-1</div>
        <div class="div1">Right_2</div>
    </body>
</html>

Jquery基本选择器与层次选择器

猜你喜欢