從今天開始學(xué)習(xí)jQuery 。計畫的生活，計畫的學(xué)習(xí)

以下是兩個API文檔 可隨時查看

http://api.jquery.com/

http://visualjquery.com/

---稍微看了些jQuery的選擇器和事件。

前幾天查看下JQuery的選擇器,本想總結(jié)下,官網(wǎng)是英文的，之後看到已有人總結(jié)了。包括所有的選擇器 發(fā)出來大家一起學(xué)習(xí)

一、基本
1、#id
根據(jù)給定的ID匹配一個元素。
如果選擇器中包含特殊字符，可以用兩個斜杠轉(zhuǎn)義。
返回值 Element
參數(shù)
id (String) : 用于搜索的，通過元素的 id 屬性中給定的值
示例：

$(document).ready( function () {
     var  oDiv  =  $( " #myDiv " );
     if  (oDiv)
        alert(oDiv.html());
});

文檔片段：

< div  id ="notMe" >< p > id="notMe" </ p ></ div >
< div  id ="myDiv" > id="myDiv" </ div >  

有特殊字符的情況：
文檔片段：

< span  id ="foo:bar" > test1 </ span >
< span  id ="foo[bar]" > test2 </ span >

jquery代碼：

Code
// 查找含有特殊字符的元素
$(document).ready( function () {
     var  oIdArr  =   new  Array( ' #foo\\:bar ' ,  ' #foo\\[bar\\] ' );
     for  ( var  i  =   0 ; i  <  oIdArr.length; i ++ ) {
         var  oSpan  =  $(oIdArr[i]);
         if  (oSpan)
            alert(oSpan.html());
    }
});

2、element
根據(jù)給定的元素名匹配所有元素
返回值 Array<Element>
參數(shù)
element (String) : 一個用于搜索的元素。指向 DOM 節(jié)點的標(biāo)簽名。
示例：

Code

$(document).ready( function () {
     var  divArr  =  $( " div " );  // 查找DIV 元素
     for  ( var  i  =   0 ; i  <  divArr.length; i ++ ) {
         var  oDiv  =  $(divArr[i]);
         if  (oDiv)
            alert(oDiv.html());
    }
});

文檔片段：

< div > DIV1 </ div >
< div > DIV2 </ div >
< span > SPAN </ span >

3、.class
根據(jù)給定的類匹配元素
返回值 Array<Element>
參數(shù)
class (String) : 一個用以搜索的類。一個元素可以有多個類，只要有一個符合就能被匹配到。
示例：

Code
// 查找所有類是 "myClass" 的元素. 
$(document).ready( function () {
     var  eleArr  =  $( " .myClass " );  // 查找class為myclass的元素
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

文檔片段：

     < div  class ="notMe" >
        div class="notMe" </ div >
     < div  class ="myClass" >
        div class="myClass" </ div >
     < span  class ="myClass" > span class="myClass" </ span >

4、*
匹配所有元素,多用于結(jié)合上下文來搜索。
返回值 Array<Element>
示例：

Code
// 找到每一個元素 
$(document).ready( function () {
     var  eleArr  =  $( " * " );  // 找到每一個元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

5、selector1,selector2,selectorN
將每一個選擇器匹配到的元素合并后一起返回。
可以指定任意多個選擇器，并將匹配到的元素合并到一個結(jié)果內(nèi)。
返回值 Array<Element>
參數(shù)
selector1 (Selector) : 一個有效的選擇器
selector2 (Selector) : 另一個有效的選擇器
selectorN (Selector) : (可選) 任意多個有效選擇器
示例：

Code
// 找到匹配任意一個類的元素
$(document).ready( function () {
var  eleArr  =  $( " div,span,p.myClass " );  // 找到匹配任意一個類的元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

二、層級
1、ancestor descendant
在給定的祖先元素下匹配所有的后代元素
返回值 Element
參數(shù)
ancestor (Selector) : 任何有效選擇器
descendant (Selector) : 用以匹配元素的選擇器，并且它是第一個選擇器的后代元素
示例：

Code
// 找到表單中所有的 input 元素 
$(document).ready( function () {
     var  eleArr  =  $( " form input " );  // 找到表單中所有的input元素  
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.val());
    }
});

文檔片段：

Code
     < form  id ="form1"   >
     < input  id ="txtTest"  type ="text"  value ="text test"   />
     < input  id ="chkTest"  type ="checkbox"   value ="checkbox 0" />
     </ form >
    
     < input  id ="txtRadio"  type ="radio"  value ="radio 1"   />

2、parent > child
在給定的父元素下匹配所有的子元素
返回值 Array<Element>
參數(shù)
parent (Selector) : 任何有效選擇器
child (Selector) : 用以匹配元素的選擇器，并且它是第一個選擇器的子元素
示例：

Code
// 匹配表單中div下的所有的子級input元素
$(document).ready( function () {
     var  eleArr  =  $( " div>input " );  // 匹配表單中div下的所有的子級input元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.val());
    }
});

3、prev + next
匹配所有緊接在 prev 元素后的 next 元素
返回值 Array<Element>
參數(shù)
prev (Selector) : 任何有效選擇器
next (Selector) :一個有效選擇器并且緊接著第一個選擇器
示例：

Code
// 匹配所有跟在label后面的input元素 
$(document).ready( function () {
     var  eleArr  =  $( " label + input " );  // 匹配所有跟在label后面的input元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.val());
    }
});

文檔片段：

Code
     < form  id ="form1"   >
     < div >
     < input  id ="txtTest"  type ="text"  value ="text test"   /></ div >
     < label ></ label >
     < input  id ="chkTest"  type ="checkbox"  checked  value ="checkbox 1" />
     </ form >
    
     < label ></ label >
     < input  id ="txtRadio"  type ="radio"   value ="radio 0"   />

4、prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素（sibling是“兄弟”的意思）
返回值 Array<Element>
參數(shù)
prev (Selector) : 任何有效選擇器
siblings (Selector) : 一個選擇器，并且它作為第一個選擇器的同輩
示例：

Code
// 找到所有與表單同輩的 input 元素 
$(document).ready( function () {
     var  eleArr  =  $( " form ~ input " );  // 找到所有與表單同輩的 input 元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.val());
    }
});

三、簡單
1、:first
匹配找到的第一個元素
返回值 Element
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " tr:first " );  // 查找表格的第一行 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

文檔片段：

< table >
   < tr >< td > Header 1 </ td ></ tr >
   < tr >< td > Value 1 </ td ></ tr >
   < tr >< td > Value 2 </ td ></ tr >
</ table >

2、:last
匹配找到的最后一個元素
返回值 Element
示例：

Code

$(document).ready( function () {
     var  eleArr  =  $( " tr:last " );  // 查找表格的最后一行  
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

3、:not(selector)
去除所有與給定選擇器匹配的元素
在jQuery 1.3中，已經(jīng)支持復(fù)雜選擇器了（例如:not(div a) 和 :not(div,a)）
返回值 Array<Element>
參數(shù)
selector (Selector) : 用于篩選的選擇器
示例：

Code

$(document).ready( function () {
     var  eleArr  =  $( " input:not(:checked) " );  // 查找所有未選中的input元素   
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.val());
    }
});

4、:even
匹配所有索引值為偶數(shù)的元素，從 0 開始計數(shù)
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " tr:even " );  // 查找表格的1、3、5 行(即索引值0、2、4 )
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

5、:odd
匹配所有索引值為奇數(shù)的元素，從 0 開始計數(shù)
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " tr:odd " );  // 查找表格的2、4、6 行(即索引值1、3、5 )
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

6、:eq(index)
匹配一個給定索引值的元素
返回值 Element
參數(shù)
index (Number) : 從 0 開始計數(shù)
示例：

$(document).ready( function () {
     var  ele  =  $( " tr:eq(1) " );  // 查找第二行
     if  (ele)
        alert(ele.html());
});

7、:gt(index)
匹配所有大于給定索引值的元素
返回值 Array<Element>
參數(shù)
index (Number) : 從 0 開始計數(shù)
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " tr:get(0) " );  // 查找索引值比0大的行
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

8、:lt(index)
匹配所有小于給定索引值的元素
返回值 Array<Element>
參數(shù)
index (Number) : 從 0 開始計數(shù)
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " tr:lt(2) " );  // 查找索引值比2小的行
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  $(eleArr[i]);
         if  (ele)
            alert(ele.html());
    }
});

9、:header
匹配如 h1, h2, h3之類的標(biāo)題元素
返回值 Array<Element>
示例：

// 給頁面內(nèi)所有標(biāo)題加上背景色
$(document).ready( function () {
    $( " :header " ).css( " background " ,  " Red " );
});

10、:animated
匹配所有正在執(zhí)行動畫效果的元素
返回值 Array<Element>
示例：

Code

// 只有對不在執(zhí)行動畫效果的元素執(zhí)行一個動畫特效 
$( " #run " ).click( function () {
    $( " div:animated " ).toggleClass( " colored " );  // 匹配所有正在執(zhí)行動畫效果的元素
});
function  animateIt() {
    $( " #mover " ).slideToggle( " slow " , animateIt);
}
animateIt();

文檔片段：

Code
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
     < style  type ="text/css" >
        div
         {
            background :  yellow ;
            border :  1px solid #AAA ;
            width :  80px ;
            height :  80px ;
            margin :  5px ;
            float :  left ;
         }
        div.colored
         {
            background :  green ;
         }
     </ style >

     < script  src ="js/jquery-1.3.1.js"  type ="text/javascript" ></ script >

</ head >
< body >

     < button  id ="run" >
        Run </ button >
     < div >
     </ div >
     < div  id ="mover" >
     </ div >
     < div >
     </ div >

</ body >

四、內(nèi)容
1、:contains(text)
匹配包含給定文本的元素
返回值 Array<Element>
參數(shù)
text (String) : 一個用以查找的字符串
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " div:contains('test') " );  // 查找所有包含 "test" 的div元素
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

2、:empty
匹配所有不包含子元素或者文本的空元素
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " div:empty " );  // 查找所有不包含子元素或者文本的空元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

3、:has(selector)
匹配含有選擇器所匹配的元素的元素
返回值 Array<Element>
參數(shù)
selector (Selector) : 一個用于篩選的選擇器
示例：

Code
// 顯示所有包含p元素的div元素的文本內(nèi)容
$(document).ready( function () {
     var  eleArr  =  $( " div:has(p) " );
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

4、:parent
匹配含有子元素或者文本的元素
返回值 Array<Element>
示例：

Code
// 查找所有含有子元素或者文本的 td 元素 
$(document).ready( function () {
$( " td:parent " ).fadeTo( 1500 ,  0.3 );
    
     var  eleArr  =  $( " td:parent " );
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

文檔片段：

Code
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
     < style  type ="text/css" >
    td  {  width : 40px ;  background : green ;   }
     </ style >

     < script  src ="js/jquery-1.3.1.js"  type ="text/javascript" ></ script >

</ head >
< body >
   < table >
   < tr >< td > Value 1 </ td >< td ></ td ></ tr >
   < tr >< td > Value 2 </ td >< td ></ td ></ tr >
   </ table >
</ body >
</ html >

五、可見性
1、:hidden
匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會被匹配到
返回值 Array<Element>
示例：

Code
// 查找所有不可見的td元素 
$(document).ready( function () {
     var  eleArr  =  $( " td:hidden " );
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

2、:visible
匹配所有的可見元素
返回值 Array<Element>
示例：

Code
// 查找所有可見的td元素 
$(document).ready( function () {
     var  eleArr  =  $( " td:visible " );
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

By the way,可見性本質(zhì)上是對應(yīng)css里的visibility和display的屬性設(shè)置，讀者可自行試驗。
六、屬性
1、[attribute]
匹配包含給定屬性的元素。注意，在jQuery 1.3中，前導(dǎo)的@符號已經(jīng)被廢除！如果想要兼容最新版本，只需要簡單去掉@符號即可。
返回值 Array<Element>
參數(shù)
attribute (String) : 屬性名
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " div[id] " );  // 查找所有含有 id 屬性的 div 元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

2、[attribute=value]
匹配給定的屬性是某個特定值的元素
返回值 Array<Element>
參數(shù)
attribute (String) : 屬性名
value (String) : 屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免沖突。
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input[name='newsletter'] " ) ;  // 查找所有 name 屬性是 newsletter 的 input 元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.value);
    }
});

文檔片段：

< input  type ="checkbox"  name ="newsletter"  value ="Hot Fuzz"   />
< input  type ="checkbox"  name ="newsletter"  value ="Cold Fusion"   />
< input  type ="checkbox"  name ="accept"  value ="Evil Plans"   />
 

3、[attribute!=value]
匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。
此選擇器等價于:not([attr=value])
要匹配含有特定屬性但不等于特定值的元素，請使用[attr]:not([attr=value])
返回值 Array<Element>
參數(shù)
attribute (String) : 屬性名
value (String) : 屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免沖突。
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input[name!='newsletter'] " );  // 查找所有 name 屬性不是 newsletter 的 input 元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.value);
    }
});

4、[attribute^=value]
匹配給定的屬性是以某些值開始的元素
返回值 Array<Element>
參數(shù)
attribute (String) : 屬性名
value ( String) : 屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免沖突。
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input[name^='newsletter'] " );  // 查找所有 name 以 'news' 開始的 input 元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.value);
    }
});

5、[attribute$=value]
匹配給定的屬性是以某些值結(jié)尾的元素
返回值 Array<Element>
參數(shù)
attribute (String) : 屬性名
value ( String) : 屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免沖突。
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input[name$='letter'] " );  // 查找所有 name 以 'letter' 結(jié)尾的 input 元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.value);
    }
});

6、[attribute*=value]
匹配給定的屬性是以包含某些值的元素
返回值 Array<Element>
參數(shù)
attribute (String) : 屬性名
value ( String) : 屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免沖突。
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input[name*='let'] " );  // 查找所有 name 包含 'letter' 的 input 元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.value);
    }
});

7、[selector1][selector2][selectorN]
復(fù)合屬性選擇器，需要同時滿足多個條件時使用。
返回值 Array<Element>
參數(shù)
selector1 (Selector) : 屬性選擇器
selector2 (Selector) : 另一個屬性選擇器，用以進一步縮小范圍
selectorN (Selector) : 任意多個屬性選擇器
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input[id][name$='vil'] " );  // 找到所有含有 id 屬性，并且它的 name 屬性是以 vil 結(jié)尾的 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.value);
    }
});

七、子元素
1、:nth-child(index/even/odd/equation)
匹配其父元素下的第N個子或奇偶元素
對比：':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！
使用方式:
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
返回值 Array<Element>
參數(shù)
index (Number) : 要匹配元素的序號，從1開始
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " ul li:nth-child(2) " );  // 在每個 ul 查找第 2 個li 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

文檔片段：

< ul >
   < li > John </ li >
   < li > Karl </ li >
   < li > Brandon </ li >
</ ul >
< ul >
   < li > Glen </ li >
   < li > Tane </ li >
   < li > Ralph </ li >
</ ul >

2、:first-child
匹配第一個子元素
':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " ul li:first-child " );  // 在每個 ul 查找第 1 個li 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

3、:last-child
匹配最后一個子元素
':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " ul li:last-child " );  // 在每個 ul 中查找最后一個 li  
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

4、:only-child
如果某個元素是父元素中唯一的子元素，那將會被匹配
如果父元素中含有其他元素，那將不會被匹配。
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
var  eleArr  =  $( " ul li:only-child " );  // 在 ul 中查找是唯一子元素的 li 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i];
        alert(ele.innerHTML);
    }
});

八、表單
1、:input
匹配所有 input, textarea, select 和 button 元素
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " :input " );  // 匹配所有 input, textarea, select 和 button 元素
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.type);  // 輸出type (select有option的竟然輸出value值 疑問 )
    }
});

文檔片段：

Code
   < input  type ="text"   />
   < input  type ="checkbox"   />
   < input  type ="radio"   />
   < input  type ="image"   />
   < input  type ="file"   />
   < input  type ="submit"   />
   < input  type ="reset"   />
   < input  type ="password"   />
   < input  type ="button"   />
   < select ></ select >    < select >< option > 123 </ option ></ select >
   < textarea  cols ="5"  rows ="10" ></ textarea >
   < button ></ button >

ps：select下面有option的，竟然直接alert出了option的value，奇怪的結(jié)果！（按照定義這個應(yīng)該是jquery的一個bug）
2、:inputType
匹配所有的type為inputType的input元素(hidden比較特殊，單獨舉例)
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     // 下面的text可以換成password,radio,checkbox,image,file,submit,reset,password
     var  eleArr  =  $( " :text " );  // 匹配所有type為text的元素
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.type);  // 輸出type 
    }
});

3、:hidden
匹配所有不可見元素，或者type為hidden的元素
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " :hidden " );  // 匹配所有不可見的元素(含input類型為hidden的元素)
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.value);  // 輸出value 
    }
    alert(eleArr.length);

     var  eleArr  =  $( " input:hidden " );  // 匹配所有type為hidden的input元素
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.value);  // 輸出value 
    }
    alert(eleArr.length);
});

九、表單對象屬性
1、:enabled
匹配所有可用元素返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input:enabled " );  // 查找所有可用的input元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.value);  // 輸出value 
    }
});

2、:disabled
匹配所有不可用元素
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input:disabled " );  // 查找所有不可用的input元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.value);  // 輸出value 
    }
});

3、:checked
匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " input:checked " );  // 查找所有選中的被勾選中的元素 
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.type);  // 輸出type 
    }
});

4、:selected
匹配所有選中的option元素
返回值 Array<Element>
示例：

Code
$(document).ready( function () {
     var  eleArr  =  $( " select option:selected " );  // 匹配所有選中的option元素
     for  ( var  i  =   0 ; i  <  eleArr.length; i ++ ) {
         var  ele  =  eleArr[i]
        alert(ele.text);  // 輸出text
        alert(ele.value);  // 輸出value 
    }
});

• jquery