JQuery選擇器【JQ筆記一】 - by kiwi

1.js
var pp = document.getElementsByTagName('p');

2.jq基本選擇器
$(".class_name");
$("#id_name");
$("p");
$("span, p, input.user_name");  //多選

3.層次選擇器
$("div p");     // div中全部的p
$("div > p");   // 選div下span的子元素  ??不是很懂,跟上面的效果同樣
$('#one + p');  //選取clss爲one的p元素下一個p標籤,兩者貌似必須都爲相同標籤,測試了的  等價與  $('#one').next('p');
$("#two~div");   //選取id爲two的元素後面的全部div同輩元素 $('#two').next('div');

4.基本過濾選擇器
$('div:first');    //選擇第一個div
$('div:last');     // 選擇最後一個div
$('input:not(.className)');  //選取class不是className的input
$('input:even');   //選擇索引爲偶數的input
$('input:odd');   //選擇索引爲奇數的input
$('input:eq(1)'); //選取索引爲1的input  
$('input:gt(1)');  //選擇索引大於1的input,不包括1
$('input:lt(1)');  
$(':header');        //選取全部的標題元素,h1 h2 h3 ...
$('div:animated');  //選擇正在執行的動畫div
$(':focus');       //選擇當前獲取焦點的元素

5. 內容過濾選擇器
$("div:contains('測試')");            //選取含有文本「測試」的div元素
$("div:empty");                 //選擇不包含子元素的div元素
$("div:has(p)");       //選擇含有p元素的div元素
$("div:parent");       //選擇擁有子元素的div元素

6. 可見性過濾選擇器
$(":hidden");   //選擇全部不可見的元素
$("div:visible");  //可見的div,及只要不是hidden就ok

7. 屬性過濾選擇器
$('div[id]');             //   選擇擁有屬性id的div
$('div[title=test]');      //   選擇屬性title等於test的div元素
$("div[title!=test]");     //  不等於
$("div[title^=test]");     //  選擇屬性title以test開頭的div元素
$("div[title$=test]");     //  選擇屬性title以test結束的div元素
$("div[title*=test]");     //選擇屬性title含有test的div元素
$('div[title|=en]');     //選擇屬性title等於en或者以en爲前綴(en-test)的元素
$('div[title~="uk"]');     //
$("div[id][title$='test']");  // 擁有屬性id,而且title一test結束

8. 表單對象屬性過濾選擇器
$("#formName :enabled");       //選擇id爲fromName的表單內全部可用的元素
$("#formName :disabled");      //選擇id爲fromName的表單內全部bu可用的元素
$("input:checked");            //選擇全部勾選上的checkbox
$("select option:selected");   //選擇全部選中的option

9.表單選擇器
$(":input");   //全部input 包括input textarea  selext button
$(":password");   
$(":radio");  
$(":checkbox");  
$(":submit");  
$(":image"); 
$(":reset");  
$(":button");   
$(":file");  
$(":hidden");   
相關文章
相關標籤/搜索