經過一晚的查找整理,終於整理出一套應該算最全面的JQuery選擇過濾器的方法了。所有代碼均經過測試。
首先HTML程式碼
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元素
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=$("オプション:選択済み");