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>
    
    <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>1td><td>张晓明td><td>td><td>67td>
                tr>
                <tr>
                    <td>2td><td>张晓td><td>td><td>89td>
                tr>
                <tr>
                    <td>3td><td>张明td><td>td><td>90td>
                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">IDdiv>
            <div class="div2">CLASSdiv>
            <span>SPANspan>
        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">Leftdiv>
        <div class="div1" id="divMid">
            <span class="span1" id="SpanA">
                <span class="span2" id="spanB">span>
            span>
        div>
        <div class="div1">Right-1div>
        <div class="div1">Right_2div>
    body>
html>

你可能感兴趣的:(web前端,Jquery)