【JS】【jQuery】【獲取物件,選擇器】
阿新 • • 發佈:2018-12-26
通過$(“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中可以編輯的節點