選擇器

id選擇器

$("#id") 等同于 document.getElementById("id")

類選擇器

$(".classname")

類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選。也就是可以有多個div的class都為相同的一個值。

如果通過javascript處理document.getElementsByClassName("name")得到的是一個合集，需要通過循環給合集中每一個元素修改樣式。

元素選擇器

$("elementname")

元素選擇器即為标記名稱後的元素。例如 < div > 标簽，同樣可以取得合集。等同于document.getElementsByTagName("div")

篩選選擇器

基本篩選選擇器

基本篩選選擇器針對的都是元素DOM節點。

例如 < div class = "name" > </ div >

< div class = "name" > </ div >

$(".name:first")找到第一個name。

内容篩選選擇器

基本篩選選擇器針對的都是元素DOM節點，如果我們要通過内容來過濾。

:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素。

<div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>
           

$(".div:has(span)")查找所有class='div'中DOM元素中包含"span"的元素節點。

$(".div:contains(':contains')")查找所有class='div'中DOM元素中包含"contains"的元素節點。

屬性篩選選擇器

屬性選擇器讓你可以基于屬性來定位一個元素。可以隻指定該元素的某個屬性。

<div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
</div>
<div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
</div>  
           

$('div[name~="a"]')查找所有div中，有屬性name中的值包含一個連字元“空”和“a”的div元素。

$("div[name=p1]")查找所有div中，屬性name=p1的div元素。

表單元素選擇器

$(":input") :input 選擇器基本上選擇所有表單控件

$("input:text")比對所有input元素中類型為text的input元素。

表單對象屬性篩選選擇器

表單對象屬性篩選選擇器也是專門針對表單元素的選擇器，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行篩選。

<input type="text" value="設定disabled" disabled="disabled" />
<input type="text" value="未設定disabled" />

<select name="garden" multiple="multiple">
            <option>imooc</option>
            <option selected="selected">慕課網</option>
            <option>aaron</option>
            <option selected="selected">部落格園</option>
</select>
           

$("input:enabled")查找所有input所有可用的（未被禁用的元素）input元素。

$("input:disabled")查找所有input所有不可用的（被禁用的元素）input元素。

$("option:selected").removeAttr('selected')查找所有option元素中,有selected屬性被選中的選項移除option的selected屬性。這樣一來下拉框預設沒有選中任何條目。

特殊選擇器this

this，表示目前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。

$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值。

javascript中：

var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接通過dom的方法改變顔色
            this.style.color = "red"; 
        },false);
           

this.style.color等同于p1.style.color

jquery 中：

通過把$()方法傳入目前的元素對象的引用this，把這個this加工成jQuery對象，我們就可以用jQuery提供的快捷方法直接處理樣式了。

$('#test2').click(function(){
            //通過包裝成jQuery對象改變顔色
           $(this).css('color','blue');
    })
           

作者:六月的餘晖

出處:http://www.cnblogs.com/zhaozihan/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。