學習【js DOM 編程藝術】,最後面有許多jQuery的選擇器,每個都動手敲了一遍。 ...
學習【js DOM 編程藝術】,最後面有許多jQuery的選擇器,每個都動手敲了一遍。
jQuery 提供了高級選擇器的方法。 js獲取元素的三個基本方法分別是通過標簽名,類名和id,即(getElementsByTagName, getElementsByClassName和getElementById)。那麼jQuery是如何獲取呢? 通過標簽獲取:$('tag') 通過類名獲取:$('.className') 通過id獲取:$('#id') 除了上面個三個最基本最簡單的,還有下麵幾個css選擇器: $('*') 選擇所有元素 $('tagA tagB') 選擇作為tagA後代的tagB元素 $('tagA, tagB, tagC') 選擇所有tagA元素,tagB元素和tagC元素 $('tag#id') 選擇ID為id的tag元素 $('tag.className') 選擇類名為className的tag元素 jQuery支持下列css2.1屬性選擇器: $('tag[attr]') 選擇所有帶有attr屬性的tag元素 $('tag[attr*=value]') 選擇所有attr屬性值中包含字元串value的tag元素 $('tag[attr=value]') 選擇所有attr屬性值等於value的tag元素 $('tag[attr!=value]') 選擇所有attr屬性值不等於value的tag元素 $('tag[attr^=value]') 選擇所有attr屬性值以value開頭的tag元素 $('tag[attr$=value]') 選擇所有attr屬性值以value結尾的tag元素 $('tag[attr~=value]') 選擇所有attr屬性值 為空格分割的多個字元串且其中一個字元串等於value 的tag元素 $('tag[attr|=value]') 選擇所有attr屬性值 為連字元分割的字元串切該字元串以value開頭的tag元素 子選擇器,同輩選擇器: $('tagA > tagB') 選擇作為tagA元素子元素的所有tagB元素 $('tagA + tagB') 選擇緊鄰tagA元素且位於其後的tagB元素 $('tagA ~ tagB') 選擇作為tagA同輩元素且位於其後的所有tagB元素 偽類,偽元素選擇器: $('tag: root') 選擇作為文檔根元素的tag元素 $('tag: nth-child(n)') 選擇作為其父元素正數第n個元素的所有tag元素 $('tag: nth-last-child(n)') 選擇作為其父元素倒數 第n個元素的所有tag元素 $('tag: nth-of-type(n)') 選擇幾個同輩tag元素中的正數第n個 $('tag: nth-last-f-type(n)') 選擇幾個同輩tag元素中的倒數第n個 $('tag: first-child') 選擇作為其父元素第一個子元素的tag元素 $('tag: last-child') 選擇作為其父元素第一個子元素的tag元素 $('tag: first-of-type') 選擇作為同輩tag元素中的第一個 $('tag: last-of-type') 選擇作為同輩tag元素中的最後一個 $('tag: only-child') 選擇作為其父元素唯一子元素的tag元素 $('tag: only-of-type') 選擇作為同輩元素中唯一一個標簽為tag的元素 $('tag: empty') 選擇所有沒有子元素的tag元素 $('tag: enabled') 選擇界面元素中所有已經啟用的tag元素 $('tag: disabled') 選擇界面元素中所有已經禁用的tag元素 $('tag: checked') 選擇界面元素中所有已經被選中的tag元素(如:覆選框,單選按鈕) $('tag: not(s)') 選擇與選擇器s不匹配的所有tag元素 其他專有選擇器: $('tag: even') 選擇匹配元素集 中偶數序號的元素(適合突出顯示表格行) $('tag: odd') 選擇匹配元素集 中奇數序號的元素 $('tag: eq(0)'), $('tag: nth(0)') 選擇匹配元素 集中的第一個元素,如頁面的第一個段落 $('tag: gt(n)') 選擇匹配元素集 中索引值大於n的所有元素 $('tag: lt(n)') 選擇匹配元素集 中索引值小於n的所有元素 $('tag: first') 選擇匹配元素集 中的第一個元素, 等價於eq(0) $('tag: last') 選擇匹配元素集 中的最後一個元素 $('tag: parent') 選擇匹配元素集 中包含子元素(文本節點也算)的所有元素 $('tag: contains('test')') 選擇匹配元素集 中包含指定文本的所有元素 $('tag: visible') 選擇匹配元素集 中所有可見的元素(包括display屬性為block和inline,visibility屬性為visible以及type屬性不是hidden的表單元素) $('tag: hidden') 選擇匹配元素集 中所有隱藏的元素(包括display屬性為none, visibility屬性為hidden以及type屬性為hidden的表單元素) 一些專門為表單設計的表達式,用於快速訪問表單元素: :input 選擇表單中的所有元素 :text 選擇所有文本欄位 :password 選擇所有密碼欄位 :radio 選擇所有單選按鈕 :checkbox 選擇所有覆選框 :submit 選擇所有提交按鈕 :image 選擇所有表單圖像 :reset 選擇所有重置按鈕 :button 選擇所有其他按鈕