JQuery選擇過濾器大全-jQuery選擇器

1. 基礎選擇器 Basics
1.根據標籤名進行選擇

var input_query=$("input");

2.根據id值選取

var text11_query=$("#text11");

 3.根據class值進行選取

var text11_query=$(".text11");

 4.同時選擇多個符合條件的JQuery包裝集用,號分隔條件

var text_query=$("#text11,.text12");

 5.選擇全部DOM元素

var all_query=$("*");

2.層次選擇器 Hierarchy
1.從全部tr標籤中獲取其下面的全部id值爲text11的元素

var text11_query=$("tr #text11");

 2.獲取全部td標籤下的全部直接input子元素

var input_query=$("td>input");

 3.獲取id爲text11元素後面的class爲button11元素，只獲取一個符合條件的元素。text11與button11在地位上屬於同級關係

var button11_query=$("#text11+.button11");

 4.獲取id爲text11元素後面的全部class爲button11的元素

var button11_query=$("#text11~.button11");

3.基本過濾器 Basic Filters
1.獲取第一個input元素

var input_query=$("input:first");

 2.獲取最後一個input元素

var input_query=$("input:last");

 3.獲取全部未被選中的input元素

var input_query=$("input:not(:checked)");

 4.第一個input元素算一，查找全部第奇數個的input元素

var input_query=$("input:even");

 5.從第二個input算起，查找全部第偶數個的input元素

var input_query=$("input:odd");

 6.查找索引爲1的input元素，索引值從0算起

var input_query=$("input:eq(1)");

 7.查找索引大於0的全部input元素

var input_query=$("input:gt(0)");

 8.查找索引小於2的全部input元素

var input_query=$("input:lt(2)");

 9.獲取頁面全部<h>標題元素

var h_query=$(":header");

 10.獲取全部正在執行動畫效果的元素

var animated_query=$(":animated");

4. 內容過濾器 Content Filters
1.查找全部html內容含有"你好世界！"的h1元素

var h1_query=$("h1:contains('你好世界！')");

 2.獲取全部不含子標籤或html內容爲空的td元素

var td_query=$("td:empty");

 3.查找全部含有input子元素的td元素

var td_query=$("td:has(input)");

 4.查找全部含有子標籤或有html內容的td元素

var td_query=$("td:parent");

5.可見性過濾器  Visibility Filters
1.查找全部隱藏的input元素

var input_query=$("input:hidden");

 2.查找全部可見的input元素

var input_query=$("input:visible");

6.屬性過濾器 Attribute Filters
1.查找全部含有id屬性的input元素

var input_query=$("input[id]");

 2.查找name值爲text11的input元素

var input_query=$("input[name='text11']");

 3.查找name值不等於text11的全部input元素

var input_query=$("input[name!='text11']");

 4.查找name值以text開頭的input元素

var input_query=$("input[name^='text']");

 5.查找name值以11結尾的全部input元素

var input_query=$("input[name$='11']");

 6.查找name值中含有ext的全部input元素

var input_query=$("input[name*='ext']");

 7.查找全部含有id屬性而且name值中含有ext的input元素

var input_query=$("input[id][name*='ext']");

7.子元素過濾器 Child Filters
1.查找全部在父元素中的全部子元素中排第2的input元素
nth-child()裏參數可選even在這裏算偶數，odd在這裏算奇數，n任意數即選取全部有父元素的input元素，數字是直接選排在第幾個的input元素，第一個input元素算一

var input_query=$("input:nth-child(2)");

2.查找全部在父元素中的全部子元素中排第一的input元素

var input_query=$("input:first-child");

 3.查找全部在父元素中全部子元素中排最後一個的input元素

var input_query=$("input:last-child");

 4.查找全部在父元素中是惟一子元素的input元素

var input_query=$("input:only-child");

8.表單選擇器 Forms
1.查找全部input元素

var input_query=$(":input");

 2.查找全部文本框元素

var text_query=$(":text");

 3.查找全部密碼框元素

var password_query=$(":password");

 4.查找全部複選框

var checkbox_query=$(":checkbox");

 5.查找全部提交按鈕元素

var submit_query=$(":submit");

 6.查找全部圖像域元素

var image_query=$(":image");

 7.查找全部重置按鈕元素

var reset_query=$(":reset");

 8.查找全部按鈕元素

var button_query=$(":button");

 9.查找全部文件域元素

var file_query=$(":file");

9.表單過濾器 Form Filters
1.查找全部可用的input元素

var input_query=$("input:enabled");

 2.查找全部不可用的input元素

var input_query=$("input:disabled");

 3.查找全部選中的單選複選框

var input_query=$("input:checked");

 4.查找全部選中的下拉框

var option_query=$("option:selected");

 

10.操做select

jQuery獲取Select選擇的Text和Value:
語法解釋：
1. $("#select_id").change(function(){//code...}); //爲Select添加事件，當選擇其中一項時觸發
2. var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text
3. var checkValue=$("#select_id").val(); //獲取Select選擇的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值

jQuery設置Select選擇的Text和Value:
語法解釋：
1. $("#select_id ").get(0).selectedIndex=1; //設置Select索引值爲1的項選中
2. $("#select_id ").val(4); //設置Select的Value值爲4的項選中
3. $("#select_id option[text='jQuery']").attr("selected", true); //設置Select的Text值爲jQuery的項選中

jQuery添加/刪除Select的Option項： 語法解釋： 1. $("#select_id").append("<option value='Value'>Text</option>"); //爲Select追加一個Option(下拉項) 2. $("#select_id").prepend("<option value='0'>請選擇</option>"); //爲Select插入一個Option(第一個位置) 3. $("#select_id option:last").remove(); //刪除Select中索引值最大Option(最後一個) 4. $("#select_id option[index='0']").remove(); //刪除Select中索引值爲0的Option(第一個) 5. $("#select_id option[value='3']").remove(); //刪除Select中Value='3'的Option 5. $("#select_id option[text='4']").remove(); //刪除Select中Text='4'的Option