1. 程式人生 > >jquery學習之選擇器與過濾器

jquery學習之選擇器與過濾器

基本選擇器

   普遍選擇器   *   所有的
   id選擇器     #id
   類選擇器    .class
   標籤選擇器  標籤名
   群組選擇器    #one,.two 取並集
   複合選擇器   div#one    取交集

子代或後代選擇器

   子代選擇器    >    直接孩子
   後代選擇器      空格  所有的後代
   body *  body中的所有的後代元素

兄弟選擇器

 下一個兄弟節點   +
  之後所有的兄弟節點   ~

過濾器

 **在選擇器之後使用**
 **基本過濾器**
         :first  第一個元素,例:$('div:first');   body元素中的第一個div
         :last  最後一個元素,列:$('div:last');  body元素中的最後一個div
         :eq(index)  索引為index的
         :lt(index)   索引小於index的
         :gt(index)  索引大於index的
        :even       索引為偶數的
        :odd        索引為奇數的
        :not(選擇器/過濾器)    選不為選擇器/過濾器的
        :header 選擇h1~h6標題  這裡注意是這樣用$('div :header'); 
         div後有空格,意思為選擇div的後代元素中為h1~h6標題的
          ,若沒有空格,那麼選中的是div
  **內容過濾器**
        :contains(e)   $(‘選擇器:contains(e)’)  選擇器中文字包含e的
        :empty   選擇沒有文字也沒有子元素的
        :paretn  選擇有內容或子元素的
        :has(選擇器)    選擇有選擇器的 $('div:has("p")')
  **可見性過濾器**
        :hidden     選擇不佔據螢幕空間的元素
            body體中不佔據空間的:display:none; input type="hidden"
       :visible    選擇佔據螢幕空間的元素  
              body體中在頁面顯示出來的都是
                 visibility:hidden;    opacity:0;
 **屬性過濾器**
       [attr]    選擇有某個屬性名的
       [attr=val]   選擇有屬性名且屬性值為val的
       [attr^=val]  選擇有屬性名且屬性值以val開頭的
       [attr$=val]  選擇有屬性名且屬性值以val結束的
       [attr*=val]   選擇有屬性名且屬性值包含val的
       [attr!=val]   選擇沒有attr屬性的或者有attr屬性名但不等於val值的
**子代過濾器**
       div :first-child   獲取每個div父元素的第一個兒子
       div :last-child    獲取每個div父元素最後一個兒子
       div :nth-child(index)   獲取每個父元素中的第幾個孩子節點  index從1開始
       div :only-child  獲取每個父元素中的獨生子元素
       div :first-of-type 獲取每個父元素中的每種型別的第一個元素
       div :last-oftype 獲取每個父元素中的每種型別的最後一個元素