jQuery-過濾選擇器二
阿新 • • 發佈:2017-05-16
字符 sel gre bsp orm span tex jquer code
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-過濾選擇器二