1. 程式人生 > >jquery選擇器和遍歷總結

jquery選擇器和遍歷總結

jquery選擇器的一些基本元素

選擇器 例項 選取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
$(".intro") 所有 class="intro" 的元素
$("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
$("p:first") 第一個 <p> 元素
:last $("p:last") 最後一個 <p> 元素
:even $("tr:even") 所有偶數 <tr> 元素
:odd $("tr:odd") 所有奇數 <tr> 元素
$("ul li:eq(3)") 列表中的第四個元素(index 從 0 開始)
$("ul li:gt(3)") 列出 index 大於 3 的元素
$("ul li:lt(3)") 列出 index 小於 3 的元素
:not(selector) $("input:not(:empty)") 所有不為空的 input 元素
$(":header") 所有標題元素 <h1> - <h6>
$(":contains('W3School')") 包含指定字串的所有元素
$(":empty") 無子(元素)節點的所有元素
:hidden $("p:hidden") 所有隱藏的 <p> 元素
$("table:visible") 所有可見的表格
s1,s2,s3 $("th,td,.intro") 所有帶有匹配選擇的元素
$("[href]") 所有帶有 href 屬性的元素
$("[href='#']") 所有 href 屬性的值等於 "#" 的元素
$("[href!='#']") 所有 href 屬性的值不等於 "#" 的元素
$("[href$='.jpg']") 所有 href 屬性的值包含以 ".jpg" 結尾的元素
$(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
$(":password") 所有 type="password" 的 <input> 元素
$(":radio") 所有 type="radio" 的 <input> 元素
$(":checkbox") 所有 type="checkbox" 的 <input> 元素
$(":submit") 所有 type="submit" 的 <input> 元素
$(":reset") 所有 type="reset" 的 <input> 元素
$(":button") 所有 type="button" 的 <input> 元素
$(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
$(":enabled") 所有啟用的 input 元素
$(":disabled") 所有禁用的 input 元素
$(":selected") 所有被選取的 input 元素
$(":checked") 所有被選中的 input 元素

jquery的遍歷方法:

1、選擇器+遍歷

$('div').each(function (i){

   i就是索引值

   this 表示獲取遍歷每一個dom物件

});

2、選擇器+遍歷

$('div').each(function (index,domEle){

   index就是索引值

  domEle 表示獲取遍歷每一個dom物件

});

3、更適用的遍歷方法

1)先獲取某個集合物件

2)遍歷集合物件的每一個元素

var d=$("div");

$.each(d,function (index,domEle){

  d是要遍歷的集合

index就是索引值

  domEle 表示獲取遍歷每一個dom

});


注意:1. 用id選擇的時候,需要注意id應該具有唯一性,儘量不要用於普遍狀態

   2. 使用jquery選擇器遍歷的時候儘量不要用id來選擇,很可能不能遍歷,可以使用name或者class