jquery選擇器

1：基礎選擇器

/*基礎選擇器*/
$("#one").css("background","#bbffaa"); //改變id為one的元素的背景色
$(".mini").css("background","red");//改變class為.mini的元素的背景色
$("div").css("background","blue");//改變所有div元素的背景色
//$("*").css("background","yellow");//改變所有元素的背景色
$("span,#two").css("background","#bbffaa");//改變所有span元素和id為two的元素的背景色      

2：層次選擇器

/*層次選擇器*/
$("body div").css("background","#bbffaa");//改變body裡所有div的背景色
$("body > div").css("background","red");//改變body内子div元素的背景色
$(".one + div").css("background","green");//改變class為.one的下一個div元素的背景色   等價于$(".one").next("div");
$("#two ~ div").css("background","#FF0066");//改變id為two的元素後面的所有div兄弟元素的背景色
//$("#two").siblings("div")  不受前後順序先知，擷取所有同輩的節點      

/*過濾選擇器*/
//基礎過濾選擇器
$("div:first").css("background","green"); //改變所有div中第一個div的背景色
$("div:last").css("background","red"); //改變所有div中最後一個div的顔色
$("div:not(.one)").css("background","red");//改變class不是one的div元素的顔色
$("div:even").css("background","#000000");//改變索引值為偶數的div元素的背景色
$("div:odd").css("background","#FFFFFF");//改變索引值為奇數的div元素的背景色
$("div:eq(3)").css("background","#4b0082");//改變索引值等于3的div元素的背景色
$("div:gt(3)").css("background","#FFFFFF");//改變索引值大于3的div元素的背景色
$('div:lt(3)').css("background","#4b0082");//改變索引值小于3的div元素的背景色
$(':header').css("background","#bbffaa");//改變書喲有标題元素，例如<h1><h2>...這些
$(':animated').css("background","#bbffaa");//改變目前正在執行動畫的元素的背景色
//内部過濾器
$("div:contains(in)").css("background","red");//改變含有文本in的div元素的背景色    好像中文不支援呀  用到時  百度
$('div:empty').css("background","#4b0082");//改變不包含子元素或者文本為空的元素
$('div:parent').css("background","#000000");//改變包含子元素或文本的div
$('div:has(.mini)').css("background","red")//改變含有class為.mini元素的div元素的背景色
//可見性過濾選擇器
$(':hidden').css("background","red");//改變所有不可見元素的背景色
$('div:hidden').show(3000);//顯示隐藏的div元素     $('input:hidden')
//$(':visible').css("background","red");//改變所有可見元素的背景色
//$('div:visible')  $('input:visible')
//屬性過濾選擇器
//$('div[title]').css();//改變含有屬性title的div原色的背景色  這裡可以使title屬性、id屬性、name屬性等等
//$('div[title=test]').css();//改變屬性title值等于test的div元素的背景色
//$('div[title!=test]').css();//改變屬性title值不等于test的div元素的背景色
//$('div[title^=te]').css();//改變屬性title值以te開始的div元素的背景色
//$('div[title$=te]').css();//改變屬性title值以te結束的div元素的背景色
//$('div[title*=es]').css();//改變屬性title值含有es的div元素的背景色
//$('div[id][title*=es]').css();//改變含有屬性id并且屬性title值含有es的div元素的背景色    可以一層層遞增
//子元素過濾選擇器
//$('div.one :nth-child(2)').css();//改變每個class為one的div父元素下的第2個子元素的背景色
/*
* :nth-child(even)     能夠選取每個父元素下的索引值是偶數的元素
* :nth-child(odd)      能夠選取每個父元素下的索引值是奇數的元素
* :nth-child(3n)       能夠選取每個父元素下的索引值是3的倍數的元素(n從0開始)
* :nth-child(3n+1)     能夠選取每個父元素下的索引值是3n+1的元素(n從0開始)
* */
//$('div.one :first-child').css();//改變每個class為one的div父元素下的第1個子元素的背景色
//$('div.one :last-child').css();//改變每個class為one的div父元素下的最後1個子元素的背景色
//$('div.one :only-child').css();//如果class為one的div父元素下隻有一個子元素，那麼則改變這個子元素的背景色
/*
* eq(index)隻比對一個元素，而:nth-child将為每一個符合條件的父元素比對子元素  eq(index)是從0開始 :nth是從1開始
* */      

//表單屬性過濾選擇器
$('#form1 input:enabled').val("改變可用input值了");//改變表單内容可用的input值
$('#form1 input:disabled').val("改變不可用input值了");//改變表單内容不可用的input值
//alert($('input:checked').length);//擷取多選框選中的個數
//alert($('select :selected').text());//擷取下拉框選中的内容
/*
* :input
* :text   擷取所有單行文本
* :password
* :radio
* :checkbox
* :submit
* :p_w_picpath
* :reset   擷取所有的重置按鈕
* :button
* file    擷取所有的上傳域
* */