JQuery選擇器、過濾器大整理_jquery

經過一晚的查找整理，終於整理出一套應該算最全面的JQuery選擇過濾器的方法了。所有代碼均經過測試。

首先HTML程式碼

複製程式碼 程式碼如下:

HTML Code

 

   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
 

option1     option2     option3

你好世界！

JS程式碼

1.DOM物件與JQuery包裝集

1.透過document.getElementById()，document.getElementsByName()等取的就是DOM物件或DOM物件集，前者取的是對象，後者取得DOM物件集

複製程式碼 程式碼如下:

var text11_dom=document.getElementById("text11");
var text11_dom=document.getElementsByName("text11")[0];
var text11_dom=document.all.text11;//此處text11即可以是name值也可以是id值
var text11_dom=document.all[10];

2.如果要使用JQuery提供的函數首先要建構JQuery包裝集，透過$()傳回的即是JQuery包裝集。

複製程式碼 程式碼如下:

var text11_jquery=$("#text11");

2.JQuery包裝集與DOM物件互相轉換

1.DOM物件不能使用JQuery屬性方法，但DOM物件可以透過$()轉換成JQuery包裝集

複製程式碼 程式碼如下:

var text11_dom=document.getElementById("text11");
var text11_jquery=$(text11_dom);

2.JQuery包裝集可以使用部分DOM物件的屬性方法如.length，但也有個別屬性方法不能使用如.value，可以透過在JQuery包裝集後面加中括號及索引值取得對應DOM物件

複製程式碼 程式碼如下:

var text11_dom=$("#text11")[0];

3.在each循環時或觸發事件時的this也是DOM物件

複製程式碼 程式碼如下:

$("#text11").click(function(){
    var text11_dom_value=this.value;
    alert(text11_dom_value);
});

3.$符號在JQuery中代表對JQuery物件的引用，JQuery的核心方法有四個

1.jQuery(html[,ownerDocument]):根據HTML原始字串動態建立Dom元素

複製程式碼 程式碼如下:

$("

Hello!

").appendTo("body");

2.jQuery( elements ):將一個或多個Dom物件封裝為jQuery包裝集，就是上面的DOM物件與JQuery包裝集轉換

3.jQuery( callback ):$(document).ready()的簡寫方式

複製程式碼 程式碼如下:

$(function(){
    alert("Hello!");
});

 4.JQuery(selector[,context]):在指定範圍內尋找符合條件的JQuery包裝集，context為查找範圍，context可以是DOM物件集也可以是JQuery包裝集
在所有tr標籤中尋找id為text11元素的JQuery包裝集

複製程式碼 程式碼如下:

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

===================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.取得頁面所有標題元素
 

複製程式碼 程式碼如下:

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. すべてのリセット ボタン要素を見つけます

コードをコピー コードは次のとおりです:

varreset_query=$(":reset");

8. すべてのボタン要素を検索

コードをコピー コードは次のとおりです:

var button_query=$(":button");

9. すべてのファイルフィールド要素を検索

コードをコピー コードは次のとおりです:

var file_query=$(":file");

9. フォームフィルター

1. 使用可能な入力要素をすべて検索します

コードをコピー コードは次のとおりです:

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

2. 使用できない入力要素をすべて検索します

コードをコピー コードは次のとおりです:

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

3. 選択したラジオのチェックボックスをすべて検索します

コードをコピー コードは次のとおりです:

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

4. 選択したすべてのドロップダウン ボックスを検索します

コードをコピー コードは次のとおりです:

var option_query=$("オプション:選択済み");