前端備忘錄--JQuery選擇器

基本選擇器

　　基本選擇器是最經常使用的選擇器,也是最簡單的選擇器.

$("#test")     //選取id爲test的元素
$(".test")     //選取class爲test的元素
$("div.test")  //選取class爲test的div元素
$("div")       //選取全部的div元素
$("*")         //選取全部元素
$("div,p")     //選取全部div元素和p元素

  通常使用基本選擇器就能夠完成大部分工做

層次選擇器

　　若是但願經過元素之間的層次關係來獲取特定元素,好比後代元素,子元素,相鄰元素等,那就須要使用層次選擇器

$("div p")  //選取div裏全部的p元素
$("div>p")  //選取div的子元素中全部的p元素
//上面這兩個是有區別的,前者選擇的div下的後代元素,後者選擇的是div下一級的子元素
$(".test + div") //選取class爲test的下一個div同輩元素
$(".test ~ div")//選取class爲test的元素後面全部的div同輩元素

　　層次選擇器中,前兩個比較經常使用,後兩個不經常使用,通常會使用next()和nextAll()代替

過濾選擇器

　　過濾選擇器經過特定的規則開篩選出所需的DOM元素,這個稍微複雜些,又可分爲如下幾種

　　基本過濾選擇器

$("div:first")      //選取全部div元素中的第一個div元素
$("div:last")       //選取全部div元素中的最後一個div元素
$("div:not(.test)") //選取全部div元素中class不爲test的div元素
$("input:focus")    //選取當前獲取焦點的input元素
$("div:eq(1)")      //選取全部div元素中索引是1的div元素
$("div:gt(1)")      //選取全部div元素中索引大於1的div元素
$("div:lt(1)")      //選取全部div元素中索引小於1的div元素
$("div:even")       //選取全部div元素中索引是偶數的div元素
$("div:odd")        //選取全部div元素中索引是奇數的div元素

　　內容過濾選擇器

　　內容過濾器主要是經過它所包含的子元素或者文本內容來定位某些元素

$("div:contains("test")") //選取全部div元素中含有文本test的div元素
$("div:has(p)")           //獲取含有p元素的div元素
$("div:empty")            //選取不包含子元素或者文本元素的div元素
$("div:parent")           //選取包含子元素或者文本元素的div元素

　　可見性過濾選擇器

　根據元素的可見和不可見狀態來選擇相應的元素

$("div:hidden")    //選取全部不可見的div元素
$("div:visible")   //獲取全部可見的div元素

　　屬性過濾選擇器

　屬性過濾器的規則是經過元素的屬性來獲取響應的元素.

$("div[id=test]")                //選取屬性id爲test的div元素
$("div[class!=test]")            //選取屬性class不爲test的div元素
$("div[class^=test]")            //選取屬性class以test開始的div元素
$("div[class$=test]")            //選取屬性class以test結束的div元素
$("div[class*=test]")            //選取屬性class類名中包含test的div元素
$("input[class=test][name=a]")   //選取屬性class類名爲test而且name爲a的的input元素

　　表單對象屬性過濾選擇器

　　對所選擇的表單元素進行篩選,好比下拉框,多選框等

$("#form1:enabled")         //選取id爲form1的表單內的全部可用元素
$("#form1:disabled")        //選取id爲form1的表單內的全部不可用元素
$("input:checked")          //選取全部被選中的input元素,適用於單選框,多選框
$("select option:selected") //選取全部被選中的option元素,適用於下拉框