天天看點

java學習(jQuery選擇器)

來自雷豐陽老師課程

1.基本選擇器

$("#id")            //ID選擇器
$("div")            //元素選擇器
$(".class")     //類選擇器
$(".class,#id1")     //組合選擇器:用逗号隔開           

複制

2.層次選擇器

$("parent > child")    //子元素選擇器:>
$("parent child ")    //後代元素選擇器:空格隔開
$("element + next")    //相鄰元素選擇器:+
$("element ~ siblings")    //兄弟元素選擇器:~           

複制

3.過濾選擇器

3.1基本過濾選擇器

$("div:first")    //第一個div
$("div:last")     //最後一個div
$("div:even")     //挑選下标為偶數的div
$("div:odd")      //挑選下标為奇數的div
$("div:eq(4)")    //下标等于 4 的div
$("div:gt(3)")    //下标大于 3 的div
$("div:lt(3)")    //下标小于 3 的div
$("div:not(:animated):last") //除去動畫div剩餘div中的最後一個div           

複制

3.2内容過濾選擇器

$(":contains("euclid")")    // 包含euclid文本的元素
$(":empty")                 //所有空元素
$("div:has(p)")        //含有p元素的div元素
$("div:parent")                //含有子元素或者文本的div元素           

複制

3.3可見性過濾選擇器

$("div:hidden")       //所有不可見div元素,或type為hidden的元素
$("div:visible")      //所有可見div元素

//例如
alert($("input:hidden").attr("value"))           

複制

3.4屬性過濾選擇器

$("div[title]")        //所有含有 title 屬性的 div 元素
$("div[id='123']")        // id屬性值為123的div 元素
$("div[id!='123']")        // id屬性值不等于123的div 元素
$("div[id^='123']")        // id屬性值以123開頭的div 元素
$("div[id$='123']")        // id屬性值以123結尾的div 元素
$("div[id*='123']")        // id屬性值包含123的div 元素
$("input[id][name$='man']") //多屬性選過濾,同時滿足兩個屬性的條件的元素           

複制

3.5子元素屬性過濾器

//從1開始計數
$("div.one :nth-child(2)");  // clas為one的div下的第二個子元素
$("div.one :first-child");  // clas為one的div下的第一個子元素
$("div.one :last-child");  //class為one的div下的最後一個子元素
$("div.one :only-child")  //class為one的div且僅有一個子元素的div           

複制

4.1表單選擇器

$(":input")      //比對所有 input, textarea, select 和 button 元素
$(":text")       //所有的單行文本框,$(":text") 等價于$("[type=text]")
$(":password")   //所有密碼框
$(":radio")      //所有單選按鈕
$(":checkbox")   //所有複選框
$(":submit")     //所有送出按鈕
$(":reset")      //所有重置按鈕
$(":button")     //所有button按鈕
$(":file")       //所有檔案域            

複制

##4.2表單對像屬性選擇器

$("input:disable");   //禁用的元素
$("input:enable");   //啟用input
$(":selected");   //所有標明的下拉清單元素
$(":checkbox:check"); //所有選中的複選框選項           

複制