JQuery學習筆記系列（一）----選擇器詳解

時間 2019-11-18

原文原文鏈接

　　筆者好長時間沒有更新過博客園的筆記了，一部分緣由是去年剛剛開始工做一段時間忙碌的加班，體會了一種天天加班到凌晨的充實感，以後閒暇時間了也由於本身懶惰沒有堅持記筆記的習慣，如今從新拾起來。javascript

　　借用古人的一段話與諸君共勉：css

　　人之爲學,不日進則日退,獨學無友,則孤陋而難成；久處一方,則習染而不自覺.不幸而在窮僻之域,無車馬之資,猶當博學審問, 古人與稽,以求其是非之所在.庶幾可得十之五六.若既不出戶,又不讀書,則是面牆之士,雖子羔、原憲之賢,終無濟於天下. java

　　翻譯爲：人們求學（或作學問）,不能每天上進,就要每天后退.孤獨地學習,而不和朋友（互相交流啓發）,就必然學識淺薄難以成功；長久住在一個地方, 就會不知不覺地沾染上某種習氣.不幸住在窮鄉僻壤,而又沒有（僱用）車馬的盤費,還應當廣博地學習、詳細地考究,與古人相合,來探求學習裏邊哪是對的哪是不對的,這樣差很少能獲得十分之五六（的收穫）.若是既不出門（拜師友）,又不讀書,那就是不學無術的人,即便（你有）像子羔、原憲那樣的賢能,也終究無濟於社會.jquery

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------api

　　#basic 基本選擇器
　　$('code')   使用標籤名，eg：$('div')
　　$('.class')   使用標籤class屬性的值，eg：<div class="test">    $('.test')使用的就是對應的div塊
　　$('#id')       使用標籤id屬性的值，eg：<div class="test">    $('#test')使用的就是對應的div塊
　　$('*')           包括全部的標籤，包括body等等
　　$('code,.class,#id')       把上面三種選擇器結合使用學習

　　#hierarchy 層級選擇器ui

<body>
    <div class ="ss">
        <div class="test">
            <div class="first">1</div>
            <div id="even1">2</div>
            <div id="test">3</div>
            <div id="even3">4</div>
            <div id="even4">5</div>
        </div>
        <div id="test">10</div>
    </div>
    <div class="test">No.2</div>
    <div id="test">No.3</div>
    <button>Click Me</button>
</body>

　　$('div code')   選擇指定的父選擇器下面的子選擇器，包括間接繼承,eg:$('.ss div')是選擇class屬性是ss下面的全部div標籤
　　$('li > ui')           選擇指定的父選擇器下面的子選擇器，不包括間接繼承，eg:$('.ss > #id'),只會選擇<div id="test">10</div>這個div
　　$('strong + em')       選擇指定選擇器的妹妹，只選擇第一個匹配的，eg:$('#even1 + div'),會選擇   <div id="test">3</div>這個div
　　$('strong ~ em')       選擇指定選擇器的全部妹妹，eg：$('#even1 + div'),會選擇<div id="test">3</div><div id="even3">4</div><div id="even4">5</div>這三個divspa

#Filters 過濾器翻譯

<body>
    <ul>
        <li>No.1</li>
        <li>No.2</li>
        <li>No.3</li>
        <li>No.4</li>
        <li>No.5</li>
        <li>No.6</li>
        <li>No.7</li>
        <li>No.8</li>
        <li>No.9</li>
        <li>No.10</li>
    </ul>
    <ol>
        <li>not in ul</li>
    </ol>
    <button>Click Me</button>
</body>

　　$('li:first')           選擇標籤li的第一個，<li>No.1</li>，index=0
　　$('li:last')           選擇標籤li的最後一個，<li>not in ul</li>，index=10
　　$('li:not()')       選擇標籤li知足not方法的，eg:$('li:not(ul li)'),選擇不是ul標籤下面的li，實際選擇的是<li>not in ul</li>
　　$('li:even')       選擇標籤li下標是偶數的，下標從0開始
　　$('li:odd')           選擇標籤li下標是奇數的，下標從0開始
　　$('li:eq(2)')       選擇標籤li下標等於2的，<li>No.3</li>
　　$('li:gt(2)')       選擇標籤li下標大於2的
　　$('li:lt(2)')           選擇標籤li下標小於2的code

#content 內容

<body>
    <table>
        <tr><td>hello world!</td></tr>
        <tr><td>This is a test of HTML</td></tr>
        <tr><td><p></p></td></tr>
        <tr><td></td></tr>
        <tr><td>The world is beautiful</td></tr>
    </table>
    <input type="button" value="帶有world單詞的會變紅色" id="btn1">
    <input type="button" value="帶有is單詞的會變藍色"  id="btn2">
    <input type="button" value="td裏面爲空的會變黑色"  id="btn4">
    <input type="button" value="td裏面嵌套p的會變綠"  id="btn5">
    <input type="button" value="清除背景色"  id="btn3">
</body>

<script type="text/javascript">
    jQuery(function(){
        $('#btn1').click(function(){
            $('td:contains("world")').css("background-color","red");
        });
        
        $('#btn2').click(function(){
            $('td:contains("is")').css("background-color","blue");
        });
        
        $('#btn3').click(function(){
            $('td').css("background-color","white");
        });
        
        $('#btn4').click(function(){
            $("td:empty").css("background-color","black");
        });
        
        $('#btn5').click(function(){
            $("td:has(p)").css("background-color","green");
        });
        
    });
</script>

　　內容裏面有漢字的話也是能夠識別出來的
　　$('td:contains("world")'):   :contains的做用是查找到包含world的td標籤
　　$("td:empty")：   :empty的做用是查找到沒有子元素或內容的td標籤
　　$("td:has(p)")：   :has(p)的做用是查找到裏面嵌套標籤p的td標籤

　　JQuery還有其餘一些選擇器，像表單選擇器這些的不是經常使用到的我就不介紹了，想要深刻的研究的朋友能夠看一下jquery的中文api

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2016-06-21 10:10:01