首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 15:57:44
原創
981 人瀏覽過

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

首先HTML程式碼

複製程式碼 程式碼如下:

HTML Code






 


   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
 

     
     
     

     
     
     

     
     

     
     
     
     

     
     
     
     

     
     

 

     



你好世界!




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=$("オプション:選択済み");
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板