首頁 > 開發者 > JavaScript

JQuery學習(2)選取器(1)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

通過標籤名，屬性名稱或內容對DOM元素進行選擇，沒有瀏覽器的相容問題
選取器類型：
基本選取器
層次選取器
過濾選取器
表單選取器
基本選取器：JQuery中使用最頻繁的選取器


使用JQuery：
 $('#mydiv').css('background-color','red');
使用js:
 document.getElementById('mydiv').style.backgroundColor = 'red';
 按照JQuery的習慣，下面的代碼應該改成第二種方式
element:根據給定的元素名稱匹配所有元素，也就是<後邊的元素名稱
  $(function () {
            $('#but').click(function () {
                //$('#a1').css('background-color', 'blue');
                  $('a').css('background-color','red');
            })
        })
根據類型匹配元素：若多個元素使用的類型相同，則選擇多個元素

 

層次選取器

 

$('#divMid').css('display', 'block')：設定id為'divMid'的層可見
$('div span').css('display', 'block')：設定id為'divMid'的層裡面的所有span元素可見，無論有幾級嵌套
$('div>span').css('display', 'block')：設定id為'divMid'的層裡面的第一級span元素可見，此span元素裡面的span元素不可見

$('#divMid+div').css('display','block')：設定id為'divMid'的層後面的第一個div可見
$('#divMid+span').css('display', 'block')：設定id為'divMid'的層後面的第一個span可見
$('#divMid').next().css('display','block'):設定id為'divMid'的層後面的第一個元素可見,無論是什麼元素

 $('#divMid').nextAll().css('display', 'block')：設定id為'divMid'的層後面的所有元素可見，無論是什麼元素，必須與divMid平級，平級元素裡面的嵌套元素不可見
$('#divMid~div').css('display', 'block')：設定id為'divMid'的層後面的所有div元素可見，必須是平級的。
$('#divMid~span').css('display','block');：設定id為'divMid'的層後面的所有span元素可見，必須是平級的。

例:

[javascript]
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        //層次選取器  
        $(document).ready(function () { 
            $('#Button1').click(function () { 
                //$('#divfirst span img').hide(2000); //找到id為divfirst裡的span元素下的img元素    
                //$('#divfirst  img').hide(2000);     //找到id為divfirst裡所有的img元素  
                $('#divfirst>span img').hide(3000)    //找到id為divfirst裡第一級span元素裡得img元素  注意！ 這個第一級是指所有divfirst下一級span元素  
                //$('#divfirst+div img').hide(3000)         //找到和id為divfirst的元素同級的第一個緊鄰他的div元素 的img元素  
                //$('#divfirst~div img').hide(3000)         //找到和id為divfirst的元素同級的所有div元素 的img元素  
                //$('#divfirst').next().hide(3000); //找到和id為divfirst的元素後面的同級的第一個元素  
                //$('#divfirst').nextAll().hide(3000); //找到和id為divfirst的元素後面的同級的所有元素  
            }) 
        }) 
    </script> 

<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //層次選取器
        $(document).ready(function () {
            $('#Button1').click(function () {
                //$('#divfirst span img').hide(2000); //找到id為divfirst裡的span元素下的img元素 
                //$('#divfirst  img').hide(2000);     //找到id為divfirst裡所有的img元素
                $('#divfirst>span img').hide(3000)    //找到id為divfirst裡第一級span元素裡得img元素  注意！ 這個第一級是指所有divfirst下一級span元素
                //$('#divfirst+div img').hide(3000)         //找到和id為divfirst的元素同級的第一個緊鄰他的div元素 的img元素
                //$('#divfirst~div img').hide(3000)         //找到和id為divfirst的元素同級的所有div元素 的img元素
                //$('#divfirst').next().hide(3000); //找到和id為divfirst的元素後面的同級的第一個元素
                //$('#divfirst').nextAll().hide(3000); //找到和id為divfirst的元素後面的同級的所有元素
            })
        })
    </script>


[html]
<body> 
    <input id="Button1" type="button" value="button " /> 
<div id="divfirst"> 
<span>第一層<img src="風景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span> 
   <span><img src="風景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span> 
 
</div> 
<div> 
    <img src="風景/d159717ab855f729066b333d439f630e.jpg" /> 
第二層 
</div> 
<div> 
    <img src="風景/f6b31d9bca975794bd23fdf71295e1c4.jpg" /> 
第三層 
</div> 
<div> 
    <img src="風景/f856bd37b432eb532098fa170dfbafd4.jpg" /> 
第四層 
</div> 
</body> 

<body>
    <input id="Button1" type="button" value="button " />
<div id="divfirst">
<span>第一層<img src="風景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span>
   <span><img src="風景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span>

</div>
<div>
    <img src="風景/d159717ab855f729066b333d439f630e.jpg" />
第二層
</div>
<div>
    <img src="風景/f6b31d9bca975794bd23fdf71295e1c4.jpg" />
第三層
</div>
<div>
    <img src="風景/f856bd37b432eb532098fa170dfbafd4.jpg" />
第四層
</div>
</body>
過濾選取器

 

根據某類過濾規則進行元素的匹配

例

[javascript]
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        $(function () { 
            //$('img:eq(1)').hide(3000);  //第幾個  
            //$('img:gt(0)').hide(3000);  //大於  
            //$('img:lt(2)').hide(3000);  //小於  
            //$('img:even').hide(3000);   //偶數下標  
            //$('img:odd').hide(3000);    //奇數下標  
            //$('img:not(#img1)').hide(3000)  //除了ID為img1  
            //$('img:not(.imgclass1)').hide(3000)//除了樣式為imgclass1  
 
        }) 

<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //$('img:eq(1)').hide(3000);  //第幾個
            //$('img:gt(0)').hide(3000);  //大於
            //$('img:lt(2)').hide(3000);  //小於
            //$('img:even').hide(3000);   //偶數下標
            //$('img:odd').hide(3000);    //奇數下標
            //$('img:not(#img1)').hide(3000)  //除了ID為img1
            //$('img:not(.imgclass1)').hide(3000)//除了樣式為imgclass1

        })
 

[html]
<body> 
    <img src="風景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" /> 
    <img src="風景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" /> 
    <img src="風景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" /> 
    <img src="風景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" /> 
</body> 

<body>
    <img src="風景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" />
    <img src="風景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" />
    <img src="風景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" />
    <img src="風景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" />
</body>

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More