1. 程式人生 > >【JS】【jQuery】【獲取物件,選擇器】

【JS】【jQuery】【獲取物件,選擇器】

通過$(“XXX”)方式獲取的都是jQuery物件,由Dom的節點元素組成的偽陣列物件

- 基本選擇器

$("#id值");      //返回一個偽陣列,裡面只有一個對應id的節點元素
$("div");       //返回所有標籤是div的節點元素
$(".myclass");  //返回所有class='myclass'的節點元素
$("*");         //返回所有節點元素
//多重選擇
$("#myid,span,div.myclass"); //返回id=myid的元素,所有span標籤的元素,div標籤且class=myclass的元素 組成的JQuery偽陣列物件.

- 層級選擇器

$(
"ul li"); //返回ul下所有級別的li子元素. $("ul>li"); //返回ul下第一級的li子元素. $("div~input"); //返回div之後的第一個input元素 $("div+input"); //返回div之前的第一個input元素

- 屬性選擇器

$("*[name]");             //返回所有有name屬性的元素
$("*[name='armo']");      //返回所有name='armo'的元素
$("select[name='armo']")  //返回所有name='armo'的select元素
$("*[name^='armo']"
); //返回所有以armo開頭的元素 $("*[name$='armo']"); //返回所有以armo結尾的元素 $("*[name*='armo']"); //返回所有含有armo的元素

- 內容選擇器

$("div:empty");             //返回無子節點(文字也是節點)的div元素  
$("div:parent");           //返回有內容的div
$("div:has(p)");      //返回內容中有p節點的div
$("div:contains('armo')"); //返回內容中有'armo'文字的div

- 子元素選擇器

$(
"ul li:nth-child(2)"); //返回所有ul下的第二個li $("ul li:fist-child"); //返回所有ul下的第一個li $("ul li:last-child"); //返回所有ul下的最後一個li $("ul li:only-child"); //返回唯一的li(ul下只有一個ul)

- 表單選擇器

$(":input");   //返回所有input+select+textarea+button的節點
$(":text");    //返回所有input標籤中type=text的元素節點
$(":checkbox"); //返回所有input標籤中type=checkbox的元素節點

- 表單屬性選擇器

$(":checkbox"); //input的checkbox中被選中的節點
$(":selected"); //select的option中被選中的節點
$(":disabled");//input中不可以編輯的節點
$(":enabled"); //input中可以編輯的節點