jquery選擇器

時間 2019-11-12

原文原文鏈接

Jquery 選擇器

jquery是javascript封裝的一個函數包，這裏面有不少咱們能夠用到的函數，使用jq能夠爲咱們節省不少時間，空間而且還能夠爲咱們解決瀏覽器的兼容性問題。使用jquery咱們必需要注意的是要在html文件中調用文件今天咱們就來認識一下jquery裏面的一些基礎的選擇器。javascript

1. 基礎選擇器 Basics

.ID選擇器

<div id="imgDiv"></div>
<script type="text/javascript">
    $('#imgDiv').html('這是一個經過id選擇器得到的div！') .css({
        'border':'3px solid #008b8b',
        'position':'absolute',
        'background':'#ddd',
        'font-weight':'bold',
        'width':'150px',
        'height':'150px'})
</script>

效果圖以下：php

.element元素選擇器

   <html>
       <body>
          <a href="">Homepage</a>
          <a href="">about</a>
          <a href="">news</a>
          <a href="">contact</a>
       </body>        
    </html>

$("a").css({
            display:"block",lineHeight:40+"px",   
            float:"left",
            width:120+"px",height:40+"px",                                                                    
         backgroundColor:'green',textAlign:"center",
            color:"white",textDecoration:"none",
            marginLeft:20+"px"
        })

效果圖：css

.class類選擇器

<body>
<ul class="ul2">
    <li class="bgGreen">bgGreen</li>
    <li class="bgGreen">bgGreen</li>
    <li id="bgBlue">bgBlue</li>
    <li class="bgGreen">bgGreen</li>
</ul>
<script type="text/javascript">
    $(function(){
$(".bgGreen").css({
    background:'green',
    color:'white',
    fontWeight:'bold',
    paddingLeft:'15px'
});
    });
</script>
</body>

效果圖：html

.*全部元素選擇器

  <html>
       <body>
         <div>
            我是div標籤
            <p>
                我是P標籤
            </p>
        </div>
        <ul>
              我是ul標籤
            <li>我是li標籤</li>
        </ul>
        <a href="">我是A標籤</a>
       </body>        
    </html>
   <script type="text/javascript">
$("*").css({
    background:"#ccc",
    border:"2px solid green",
    color:"#B22222",
    padding:"10px",
    width:400+"px",
    margin:"10px",
})

顯示效果以下：html5

"selector1, selector2, selectorN"

selector1, selector2, selectorN 能夠將幾個選擇器用","分隔開
而後再拼成一個選擇器字符串.會同時選中這幾個選擇器匹配的內容.java

<div id="div1">我是div</div>
<p>我是p</p>
<span class="sp">我是span</span>
<script type="text/javascript">
    $("#div1,p,.sp").css({
        width:'200px',
        background:'green',
        padding:'10px',
        color:'white',
        fontWeight:'bold'

    });
</script>

效果圖以下：jquery

2.層次選擇器 Hierarchy

ancestor descendant層級選擇器

使用"form input"的形式選中form中的全部input元素.即ancestor
(祖先)爲from, descendant(子孫)爲input. 數組

<form action="" id="myform">
     <span>姓名：</span><input type="text"><br>
    <span>地址：</span><input type="text"><br>
    <span>性別：</span> <input type="radio" value="man">man <input type="radio" value="woman">womang
    <br>
    <span>年齡：</span>
    <select name="" >
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
    </select> <br>
    說明： <br>
    <textarea name=""  cols="30" rows="10"></textarea>
</form>
<script type="text/javascript">
    $("#myform input,textarea").css({
        border:' 2px solid #008b8b',
        boxShadow:'2px 2px 2px 2px #ccc'
    });
</script>

效果圖以下：瀏覽器

parent > child層級選擇器

選擇parent的直接子節點child. child必須包含在parent中而且父類是parent元素.閉包

<ul class="function_wbe">
    <li>javascript</li>
    <ul>
        <li>函數</li>
        <li>對象</li>
        <li>數組</li>
        <li>閉包</li>
        <li>prototype原型</li>
    </ul>
    <li>php</li>
    <li>html5</li>
    <li>jquery</li>
</ul>
<script type="text/javascript">
    $(".function_wbe>li").css({
        background:'#008b8b',
        color:'white',
        fontWeight:'bold'
    });
</script>

效果圖以下：

prev + next

prev和next是兩個同級別的元素. 選中在prev元素後面的next元素.

<div id="div1" style="background: #008b8b;width:300px;height:100px;margin-bottom: 5px">id="div1"</div>
            <div style="background: #008b8b;width:300px;height:100px;margin-bottom: 5px"></div>
            <div style="background: #008b8b;width:300px;height:100px"></div>

            <script type="text/javascript">
            $("#div1+div").html('$("#div1+div")').css({
                textAlign:'center',
                lineHeight:'100px',
                color:'#fff',
                fontWeight:'bold',
                background:"orange"
            })
</script>

效果圖以下：

prev ~ siblings選擇器

選擇prev後面的根據siblings過濾的元素注:siblings是過濾器

<div title="div2"  id="div3"  style="background: green;width:300px;height:100px;
        margin-top:10px">
</div>

<div id="div1" style="background:
          green;width:300px;height:100px;margin-top:10px">
</div>

<div  title="div1"  id="div2" style="background: green;width:300px;height:100px;margin-top:10px">
</div>
<div style="background:
          green;width:300px;height:100px;margin-top:10px">
    <div id="xiaoDiv" style="width:100px;height:40px;border: 2px solid #CCC;">ddddddddd</div>
</div>

<script type="text/javascript">
    $("#div1~[id]").css({
        background:"orange"
    })
</script>

效果圖以下：

解釋： $(「#div1~[id]」)選擇id爲div1的對象,這個對象後面（且與id爲div1的對象屬於同一層次的對象中)全部帶有id屬性的元素(~後面能夠跟元素，也能夠跟屬性，若是跟的是元素，就是對應對象後面的與之同一層次的某種元素)

3.基本過濾器 Basic Filters

:first,:last

:first 匹配找到的第一個元素或者左後一個元素

<table class="tab_guolv" >
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
</table>
<script type="text/javascript">
    $(".tab_guolv tr:first").css({
        background:'#008b8b'
    })
$(".tab_guolv tr:last").css({
        background:'orange'
    })
</script>

效果圖以下：

:not(selector)/:selector

去除全部與給定選擇器匹配的元素或則是找到與給定選擇其匹配的元素；

<form action="" id="myform" style="border:2px #008b8b dashed;width:300px ;padding-left: 15px">
    <h3 style="color: orange">學生信息</h3>
    <span>姓名：</span><input type="text" id="Text1"><br>
<span>性別：</span> <input type="radio" value="man" id="Radio1">man <input type="radio" value="woman">womang
<br>
<span>年齡：</span>
<select name="" >
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
</select> <br>
 <span>學號:</span>
    <input type="checkbox" value="0">0
    <input type="checkbox" value="1">1
    <input type="checkbox" value="2">2
    <input type="checkbox" value="3">3
    <input type="checkbox" value="4">4
<br>
    <input type="button" id="Button1" value="提交" class="btnCss"  />
</form>
<div id="divTip" class="divTip"></div>
<script type="text/javascript">
    $("#Button1").click(function(){

        var text = $("#Text1").val();
        var sex=$("input[type=radio]:checked").val();
//        var sex = $("#Radio1").is(":checked")?"man":"woman";
        var age=$("option:checked").val();
        var number="";
        $("input[type=checkbox]:checked").each(function(index,item){
            number+=$(item).val()
        });
//       = $("input[type=checkbox]:checked").val();
//        alert(number);
        $("#divTip").css("display","block").html(text + "<br />" + sex + "<br />" + age + "<br />"+ number + "<br />");
    })
</script>

效果圖以下：

解釋：將信息填寫完整後，點擊提交，將填寫好的與選擇好的選項的值顯示在先隱藏的div中；

:even，:odd，:eq(index)

匹配全部索引值爲偶數或是奇數 :eq(index)匹配一個給定索引值的元素

<ul class="ul_even">
    <li><a href="">aaaaa</a></li>
    <li><a href="">bbbbb</a></li>
    <li><a href="">ccccc</a></li>
    <li><a href="">ddddd</a></li>
</ul>
<script type="text/javascript">
    $(".ul_even li:even").css({
        background:'orange'
    });
    $(".ul_even li:odd").css({
        background:'#008b8b',
        border:'orange 2px solid'
    });
    $(".ul_even li").each(function(index,item){
     alert($(".ul_even li").eq(index).html());
    })
</script>

效果圖以下：

解釋：對於(：eq())選擇器舉例的效果就是依次彈出

<a href="">aaaaa</a>，
<a href="">bbbbb</a>

......

:lg,:gt

gt:匹配全部大於給定索引值的元素 ,注:index從 0 開始計數,
lt:選擇結果集中索引小於 N 的 elements ;

$(".ul_even li").each(function(index,item){
    $(".ul_even li:gt(1)").html("ooooo");
})
$(".ul_even li").each(function(index,item){
     $(".ul_even li:lt(1)").html("ggggg");
})

效果圖以下：

; 解釋：將li的索引大於1的html改成「ooooo」,li的索引小於1的改成「ggggg」,

header

選擇全部h1,h2,h3一類的header標籤.

<div style="border:2px #008b8b dashed;width: 350px;padding-left: 30px">
    <h1>這是一個h1</h1>
    <h2>這是一個h2</h2>
    <h3>這是一個h3</h3>
    <h4>這是一個h4</h4>
    <h5>這是一個h5</h5>
    <h6>這是一個h6</h6>
</div>
<script type="text/javascript">
    $(":header").css({
                color:'orange'
            });
</script>

效果圖以下：

:animated/not(:animated)

匹配全部正在執行(或則是沒有在執行)動畫效果的元素這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每一個屬性都表示一個能夠變化的樣式屬性（如「height」、「top」或「opacity」）。注意：全部指定的屬性必須用駱駝形式，好比用marginLeft代替margin-left. 而每一個屬性的值表示這個樣式屬性到多少時動畫結束。若是是一個數值，樣式屬性就會從當前的值漸變到指定的值。若是使用的是「hide」、「show」或「toggle」這樣的字符串值，則會爲該屬性調用默認的動畫形式。

<button id="run">Run</button><br><br>

<div style="position:relative;width: 150px;height:150px;background: orange;border: 2px solid #008b8b"></div>
<script type="text/javascript">
    $("#run").click(function(){
        $("div:not(:animated)").animate({ left: "+=50" }, 1000);
    });
</script>

效果圖如圖：

解釋：先有一個div距離左邊的距離是0，點擊run按鈕以後，div就慢慢的向右邊移動50px ;

4. 內容過濾器 Content Filters

:contains(text)

匹配包含給定文本的元素
查找全部包含 "John" 的 div 元素:
$("div:contains('John')")

:empty

匹配全部不包含子元素或者文本的空元素查找全部不包含子元素或者文本的空元素:$("td:empty")

:has(selector)

匹配含有選擇器所匹配的元素的元素給全部包含 p 元素的 div 元素添加一個 text 類: $("div:has(p)").addClass("test");

:parent

匹配含有子元素或者文本的元素查找全部含有子元素或者文本的 td 元素:
$("td:parent")

5.可見性過濾器 Visibility Filters

:hidden

匹配全部的不可見元素注:在1.3.2版本中, hidden匹配自身或者父類在文檔中不佔用空間的元素.若是使用CSS
visibility屬性讓其不顯示可是佔位,則不輸入hidden. 查找全部不可見的 tr 元素:$("tr:hidden")

:visible

匹配全部的可見元素查找全部可見的 tr 元素:$("tr:visible")

7.子元素過濾器 Child Filters

:nth-child(index/even/odd/equation)

匹配其父元素下的第N個子或奇偶元素 ':eq(index)' 只匹配一個元素，而這個將爲每個父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！可使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)

在每一個 ul 查找第 2 個li: $("ul li:nth-child(2)")