JAVAScript強大的框架：Jquery（二）

一 可見度過濾選擇器

可見度過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素

一、:hidden用法: $(」tr:hidden」)  返回值  集合元素

     說明: 匹配全部的不可見元素，input 元素的 type 屬性爲 「hidden」 的話也會被匹配到.意思是css中display:none和input type=」hidden」的都會被匹配到.一樣,要在腦海中完全分清楚冒號」:」, 點號」.」和逗號」,」的區別.

二、:visible用法: $(」tr:visible」)  返回值  集合元素

    說明: 匹配全部的可見元素.

屬性過濾選擇器

屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素

一、[attribute]用法: $(」div[id]「) ;  返回值  集合元素

      說明: 匹配包含給定屬性的元素. 例子中是選取了全部帶」id」屬性的div標籤.

二、[attribute=value]用法: $(」input[name='newsletter']「).attr(」checked」, true);    返回值  集合元素

      說明: 匹配給定的屬性是某個特定值的元素.例子中選取了全部 name 屬性是 newsletter 的 input 元素.

三、[attribute!=value]用法: $(」input[name!='newsletter']「).attr(」checked」, true);    返回值  集合元素

      說明: 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).以前看到的 :not 派上了用場.

四、[attribute^=value]用法: $(」input[name^=‘news’]「)  返回值  集合元素 

      說明: 匹配給定的屬性是以某些值開始的元素.嗯,咱們又見到了這幾個相似於正則匹配的符號.如今想忘都忘不掉了吧?!

五、[attribute$=value]用法: $(」input[name$=‘letter’]「)  返回值  集合元素 

     說明: 匹配給定的屬性是以某些值結尾的元素.

六、[attribute*=value]用法: $(」input[name*=‘man’]「)   返回值  集合元素

     說明: 匹配給定的屬性是以包含某些值的元素.

七、[attributeFilter1][attributeFilter2][attributeFilterN]用法: $(」input[id][name$=‘man’]「)  返回值  集合元素

     說明: 複合屬性選擇器,須要同時知足多個條件時使用.又是一個組合,這種狀況咱們實際使用的時候很經常使用.這個例子中選擇的是全部含有 id 屬性,而且它的 name 屬性是以 man 結尾的元素.

二 子元素過濾選擇器

一、:nth-child(index/even/odd/equation)用法: $(」ul li:nth-child(2)」)   返回值  集合元素

      說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和以前說的基礎過濾(Basic Filters)中的 eq() 有些相似,不一樣的地方就是前者是從0開始,後者是從1開始.

二、:first-child用法: $(」ul li:first-child」)    返回值  集合元素 

      說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.這裏須要特別點的記憶下區別.

三、:last-child用法: $(」ul li:last-child」)      返回值  集合元素

      說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.

 四、: only-child用法: $(」ul li:only-child」)   返回值  集合元素 

      說明: 若是某個元素是父元素中惟一的子元素,那將會被匹配.若是父元素中含有其餘元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!

三 表單對象屬性過濾選擇器

此選擇器主要對所選擇的表單元素進行過濾

一、:enabled用法: $(」input:enabled」)    返回值  集合元素

      說明: 匹配全部可用元素.意思是查找全部input中不帶有disabled=」disabled」的input.不爲disabled,固然就爲enabled啦.

二、:disabled用法: $(」input:disabled」)    返回值  集合元素

      說明: 匹配全部不可用元素.與上面的那個是相對應的.

三、:checked用法: $(」input:checked」)   返回值  集合元素

      說明: 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option).這話提及來有些繞口.

四、:selected用法: $(」select option:selected」)   返回值  集合元素

       說明: 匹配全部選中的option元素.

四 表單選擇器

一、:input用法: $(」:input」) ;   返回值  集合元素

      說明:匹配全部 input, textarea, select 和 button 元素 

二、:text用法: $(」:text」) ;  返回值  集合元素

      說明: 匹配全部的單行文本框.

三、:password用法: $(」:password」) ; 返回值  集合元素

      說明: 匹配全部密碼框.

四、:radio用法: $(」:radio」) ; 返回值  集合元素

     說明: 匹配全部單選按鈕.

五、:checkbox用法: $(」:checkbox」) ; 返回值  集合元素

      說明: 匹配全部複選框

六、:submit用法: $(」:submit」) ;   返回值  集合元素

      說明: 匹配全部提交按鈕.

七、:image用法: $(」:image」)   返回值  集合元素

      說明: 匹配全部圖像域.

八、:reset用法: $(」:reset」) ;  返回值  集合元素

      說明: 匹配全部重置按鈕.

九、:button用法: $(」:button」) ;  返回值  集合元素

      說明: 匹配全部按鈕.這個包括直接寫的元素button.

十、:file用法: $(」:file」) ;  返回值  集合元素

     說明: 匹配全部文件域.

十一、:hidden用法: $(」input:hidden」) ; 返回值  集合元素

      說明: 匹配全部不可見元素，或者type爲hidden的元素.這個選擇器就不只限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配.

      注意: 要選取input中爲hidden值的方法就是上面例子的用法,可是直接使用 「:hidden」 的話就是匹配頁面中全部的不可見元素,包括寬度或高度爲0的,