JQ筆記

jQuery選擇器

基本篩選選擇器

$(":first") 匹配第一個元素
$(":last") 匹配最後一個元素
$(":not(select)") 去掉不匹配的選擇器元素
$(":eq(index)") 在匹配的集合中選擇索引值爲index的元素
$(":gt(index)") 選擇匹配集合中全部大於給定index（索引值）的元素
$(":even") 選擇索引值爲偶數的元素，從0開始計數
$(":odd") 選擇索引值爲奇數的元素，從0開始計數
$(":lt(index)") 選擇匹配集合中全部索引值小於給定index參數的元素
$(":header") 選擇全部標題元素，像h1,h2,h3等
$("lang(language)") 選擇指定語言的全部元素
$(":root") 選擇該文檔的根元素
$(":animated") 選擇全部正在執行動畫效果的元素

<div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>


<script type="text/javascript">
//找到第一個div
$(".div:first").css("color", "#CD00CD");
</script>

<script type="text/javascript">
//找到最後一個div
$(".div:last").css("color", "#CD00CD");
</script>

<script type="text/javascript">
//:even 選擇所引值爲偶數的元素，從 0 開始計數
$(".div:even").css("border", "3px groove red");
</script>

<script type="text/javascript">
//:odd 選擇所引值爲奇數的元素，從 0 開始計數
$(".div:odd").css("border", "3px groove blue");
</script>

demo
連接描述

內容篩選選擇器

$(":contain(text)") 選擇全部包含指定文本的元素
$(":parent") 選擇全部含有子元素或者文本的元素
$(":empty") 選擇全部沒有子元素的元素（包括文本節點）
$(":has(selector)") 選擇元素中至少包含指定選擇器的元素
圖片描述

<div class="left">
        <div class="div">
            <p>contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>
    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"contains"的元素節點
        //而且設置顏色
        $(".div:contains(':contains')").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"span"的元素節點
        //而且設置顏色
        $(".div:has(span)").css("color", "blue");
    </script>
    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //選擇全部包含子元素或者文本的a元素
       //增長一個藍色的邊框
       $("a:parent").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
       //找到a元素下面的全部空節點(沒有子元素)
       //增長一段文本與邊框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>

demo

子元素篩選選擇器

$(:first-chid)        //選擇全部父元素級下的第一個子元素
$(:last-child)        //選擇全部父元素下的最後一個元素
$(:only-child)        //若是某元素是其父元素的惟一子元素，那麼它就會被選中
$(:nth-child)         //選擇他們全部父元素的第n個元素
$(:nth-last-child)    //選擇他們全部父元素的第n個元素,計數從最後一個元素到第一個

<h2>子元素篩選選擇器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="first-div"下的第一個a元素
        //針對全部父級下的第一個
        $(".first-div a:fist-child").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的最後一個a元素
        //針對全部父級下的最後一個
        //若是隻有一個元素的話，last也是第一個元素
        $(".first-div a:last-child").css("color", "red");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的只有一個子元素的a元素
        $(".first-div a:only-child").css("color", "blue");
    </script>


    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="last-div"下的第二個a元素
        $(".last-div a:nth-child(2)").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="last-div"下的倒數第二個a元素
        $(".last-div a:nth-last-child(2)").css("color", "red");
    </script>

表單元素選擇器

$(:input) 選擇全部input,textarea,select和button元素
$(:text) 匹配全部文本框
$(:password) 匹配全部密碼框
$(:radio) 匹配全部單選按鈕
$(:checkbox) 匹配全部複選框
$(:submit) 匹配全部提交按鈕
$(:image) 匹配全部圖像域
$(:reset) 匹配全部重置按鈕
$(:button) 匹配全部按鈕
$(:file) 匹配全部按鈕
<h2>子元素篩選選擇器</h2>

<h3>input、text、password、radio、checkbox</h3>
<h3>submit、image、reset、button、file</h3>
<div class="left first-div">
    <form>
        <input type="text" value="text類型"/>
        <input type="password" value="password"/>
        <input type="radio"/> 
        <input type="checkbox"/>
        <input type="submit" />
        <input type="image" />
        <input type="reset" />
        <input type="button" value="Button" />
        <input type="file" />
    </form>
</div>

<script type="text/javascript">
    //查找全部 input, textarea, select 和 button 元素
    //:input 選擇器基本上選擇全部表單控件
    $(':input').css("border", "1px groove red"); 
</script>

<script type="text/javascript">
    //匹配全部input元素中類型爲text的input元素
    $('input:text').css("background", "#A2CD5A");
</script>

<script type="text/javascript">
    //匹配全部input元素中類型爲password的input元素
    $('input:password').css("background", "yellow");
</script>

<script type="text/javascript">
    //匹配全部input元素中的單選按鈕,並選中
    $('input:radio').attr('checked','true');
</script>

<script type="text/javascript">
    //匹配全部input元素中的複選按鈕,並選中
    $('input:checkbox').attr('checked','true'); 
</script>

<script type="text/javascript">
    //匹配全部input元素中的提交的按鈕,修改背景顏色
    $('input:submit').css("background", "#C6E2FF");
</script>

<script type="text/javascript">
    //匹配全部input元素中的圖像類型的元素,修改背景顏色
    $('input:image').css("background", "#F4A460");
</script>

<script type="text/javascript">
    //匹配全部input元素中類型爲按鈕的元素
    $('input:button').css("background", "red");
</script>

<script type="text/javascript">
    //匹配全部input元素中類型爲file的元素
    $('input:file').css("background", "#CD1076");
</script>

[1]: http://codepen.io/i-summer/pen/EWjZLv
  [2]: http://codepen.io/i-summer/details/RpPpKX/
  [3]: /img/bVJImf