Jquery程式碼筆記(選擇器)
Jquery選擇器
1.基本選擇器
1. id選擇器(#id) $("#div1").css("background","red"); 2.元素選擇器(元素名字) $("div").css("background","red"); 3. 樣式選擇器(.class) $(".box").css("background","red"); 4. 並列選擇器(elem,elem) $("div,span").css("background","red"); 5. 元素樣式選擇器(elem.class) $("div.box").css("background","red");
2.層次選擇器
1.後代選擇器 ancestor descendant
$("table tr ").css("background","red");
2.子代選擇器 parent>child
$("table>tr ").css("background","red");
3.兄弟選擇器 prev+next
$("tr +tr").css("background","red");
4.此元素之後的所有元素 prev~siblings
$("tr~* ").css("background","red");
3.屬性選擇器
1.第一個元素:first
$("tr:first ").css("background","red");
2.最後一個元素:last
$("tr:last ").css("background","red");
3.大於:gt()
$("tr:gt(1)").css("background","red");
4.小於:lt()
$("tr:lt(10) ").css("background","red");
5.等於:eq()
$("tr:eq(5) ").css("background","red");
6.包含(文字內容非屬性值) :contains("")
$("tr:contains('wwww')").css("background","red");
7.元素隱藏 :hidden
console.log( $("tr:hidden ").text());
8.元素擁有屬性 div[id]
$("div[id]").css("background","red");
9.屬性值為username的元素 div[id=username]
$("div[id=username]").css("background","red");
4.表單選擇器
1.所有的input表單(:input)
$(":input").css("background","red");
2.不可用的表單 (:disabled)
$(":input:disabled").css("background","red");
3.選中的表單 (:checked 適用於CheckBox)(:selected 適用於下拉框select的option)
$(":input:checked").css("background","red");
$("select>option:checked").css("background","red");
4.提交按鈕 (:submit)
$(":submit").css("background","red");