jQuery-過濾選取器二

標籤：class   複選框   開頭   orm   logs   test   ble   log   ext   

1、屬性過濾選取器

$(function(){            $(‘div[title]‘).css(‘background‘,‘red‘);  //有title屬性的所有div元素            $(‘div[title = test]‘).css(‘background‘,‘yellow‘);  //title屬性值為test的所有div元素            $(‘div[title != test]‘).css(‘background‘,‘black‘);  //title屬性值不為test的所有div元素（包含沒有title的div元素）            $(‘div[title ^=te]‘).css(‘background‘,‘pink‘);  //title屬性以te開頭的所有div元素            $(‘div[title $=est]‘).css(‘background‘,‘red‘);  //title屬性以est結束的所有div元素            $(‘div[title *=es]‘).css(‘background‘,‘blue‘);  //title屬性包含es字元的所有div元素            $(‘div[id][title *=es]‘).css(‘background‘,‘green‘);  //有id屬性且title屬性包含es字元的所有div元素});

2、子項目過濾選取器

:nth-child(index/even/odd/equation) 選取每個父元素下的第index子項目或者奇偶元素（index從1算起）

:first-child 選取每個父元素下的第一個子項目

:last-chlid 選取每個父元素下的最後一個子項目

:only-chlid 如果某個元素是父元素的唯一子項目，則匹配；如果含有其他子項目，則不匹配

$(function(){            $(‘div.one :nth-child(2)‘).css(‘background‘,‘red‘);  //class為one的div的第二個子項目            $(‘div.one :last-child‘).css(‘background‘,‘blue‘);  //class為one的div的最後一個子項目            $(‘div.one :first-child‘).css(‘background‘,‘green‘);  //class為one的div的第一個子項目            $(‘div.one :only-child‘).css(‘background‘,‘yellow‘);});

3、表單屬性過濾選取器

$(function(){            $(‘#form1 input:enabled‘).val(‘這裡變化了‘);  //:enabled-選取id為#form1下的input所有可用元素            $(‘#form1 input:disabled‘).val(‘這裡變化了‘);  //:disabled-選取id為#form1下的input所有不可用元素            $(‘input:checked‘).length(); //:checked-選取所有被選中的元素（單選框和複選框）            $(‘select:selected‘).text();  //:selected-選取所有被選中的選擇元素（下拉式清單）});

 

jQuery-過濾選取器二