Jquery的選擇器

1、選擇器的使用:

 

 

基本選擇器:

#id(根據給定的ID匹配一個元素)、element(根據給定的元素名匹配所有元素)、.class(根據給定的類匹配元素)、*(匹配所有的元素)、selector1,selectorN(將每個選擇器匹配到的元素合並後一起返回)

例:

使用JQuery:

$('#myp').css('background-color','red');

使用js:

document.getElementById('myp').style.backgroundColor = 'red';

 

 

層次選擇器:

ancestor descendant(根據祖先元素匹配需哦有的後臺代元素)、parent>child(根據父元素匹配配所有的子元素)、prev+next(匹配所有緊接在prev元素後的相鄰元素)、prev~siblings(匹配prev元素之後的所有兄弟元素)

例:

$(function () {

$('#Button1').click(function () {

// $('#pfirst img').hide(2000);//獲取的是id為pfirst的層中的所有tagname為img的元素,不管這些元素是否還嵌套在別的元素中:在本題當中指的是第一層的內容有變化

$('#pfirst span img').hide(2000); //獲取的是id為pfirst的層中的所有span子元素中的img元素,需要註意的是這個span子元素可以是pFirst的兒子或者孫子:再加一個p在第二個span上面,也就是說用一個新的p把第二個span括起來,這種方法指出的是第一個p是第二個p的父類,也能獲取第二個p內容,所以zilei和父類都能獲得

//$('#pfirst>span img').hide(2000); //獲取的是id為pFirst的層中的第一級span元素中的所有img元素::在本題當中指的是第一層的內容有變化

//$('#pfirst+p img').hide(2000); //獲取的是id為pFirst的層後面的同級的第一個p元素,且此p必須緊隨其後,如果中間有別的元素隔開,則不能獲取。:本題當中指的是id為img6的圖片

//$('#pfirst+p img').hide(2000); //本題當中指的是id為img6的圖片

//$('#pfirst').next().hide(2000);//獲取的是id為di

vfirst的層後面的第一個同級元素,不管是什麼類型:本題當中指的是id為img2的圖片

//$('#pfirst~p img').hide(2000); //獲取的pfirst後邊所有同級別的,且類型為p裡邊的所有img元素:本題當中指的是id為img3的圖片,也就是第二層裡面的東西的改變

//$('#pfirst').nextAll().hide(2000);//獲取的是pfirst後變的所有同級元素,不管是什麼類型(類型不確定):本題 當中指的是除瞭第一層外,其它所有的層都有變化

    })

})

<body><input id="Button1" type="button" value="層次選擇器" />

    <p id="pfirst">

        <span>風景 <a href="#"><img alt="" id="img1" src="images/1.jpg" class="imgclass" /></a></span>

        <!–<p>–>

        <!–第二種方法利用時,加上該p–>

        <span><img alt="" id="img2" src="images/2.jpg" class="imgclass" /></span>

        <!– </p>–>

第一層

    </p>

    <!– 如果添加  $('#pfirst+p img').hide(2000);這個屬性,就要把id為img6的圖片隱藏–>

    <img alt="" id="img6" src="images/3.jpg" class="imgclass" />

    <p>第二層<img alt="" id="img3" src="images/4.jpg" class="imgclass" /></p>

    <p>第三層<img alt="" id="img4" src="images/5.jpg" class="imgclass" /></p><img alt="" id="img5" src="images/1.jpg" class="imgclass" />

</body>

 

 

過濾選擇器:

(簡單過濾選擇器):first()或:first(獲取死一個元素)、last()或:last(獲取最後一個元素)、:not(selector)(獲取除給定選擇器外的所有元素)、:even(獲取所有索引值為偶數的元素,索引號從0開始)、:odd(獲取所有索引值為奇數的元素,索引號從0開始)、:eq(index)(獲取指定索引值的元素,索引號從0開始)、:gt(index)(獲取所有大於給定索引值的元素,索引號從0開始)、:lt(index)(獲取所有小於給定索引值的元素,索引號從0開始)、:header(獲取所有標題類型的元素,如h1、h2…)、:animated(獲取正在執行動畫效果的元素)

(內容過濾選擇器)::contains(text)(獲取包含給定文本的元素)、:empty(獲取所有不包含子元素或者文本的空元素)、:has(selector)(獲取含有選擇器所匹配的元素的元素)、:parent(獲取含有子元素或者文本的元素)

(可見性過濾選擇器)::hidden(獲取所有不可見元素,或者type為hidden的元素)、:visible(獲取所有的可見元素)

(屬性過濾選擇器):[attribute](獲取包含給定屬性的元素)、[attribute=value](獲取等於給定的屬性是某個特定值的元素)、[attribute!=value](獲取不等於給定的屬性是某個特定值的元素)、[attribute^=value](獲取給定的屬性是以某些特定值開始的元素)、[attribute$=value](獲取給定的屬性是某個特定值結束的元素)、[attribute*=value](獲取給定的屬性是以包含某些值的元素)、[selector1][selector2][selectorN](獲取滿足多個條件的復合屬性的元素)

(子元素顧慮選擇器)::nth-child(eq|even|odd|index)(獲取每個父元素下的特定位置元素,所以鬧從1開始)、:first-child(獲取每個父元素下的第一個子元素)、:last-child(獲取每個父元素下的最後一個子元素)、:only-child(獲取每個父元素下的僅有一個子元素)

(表單對象屬性過濾器)::enable(獲取表單中所有屬性為可用的元素)、:disabled(獲取表單中所有屬性為不可用的元素)、:checked(獲取表單中所有被選中的元素)、:selected(獲取表單中所有被選中option的元素)

 

 

表單選擇器:

:input(獲取所有input、textarea、select)、:text(獲取所有單行文本框)、:password(獲取所有密碼框)、:radio(獲取所有單選按鈕)、:checkbox(獲取所有復選框)、:submit(獲取所有提交按鈕)、:image(獲取所有圖像域)、:reset(獲取所有重置按鈕)、:button(獲取所有按鈕)、:file(獲取所有文件域)

 

You May Also Like