jQuery 自學筆記—4

jQuery 選取器 在前面的章節中，我們展示了一些有關如何選取 HTML 元素的執行個體。 關鍵點是學習 jQuery 選取器是如何準確地選取您希望應用效果的元素。 jQuery 元素選取器和屬性選取器允許您通過標籤名、屬性名稱或內容對 HTML 元素進行選擇。 選取器允許您對 HTML 元素組或單個元素進行操作。 在 HTML DOM 術語中： 選取器允許您對 DOM 元素組或單個 DOM 節點進行操作。 jQuery 元素選取器jQuery 使用 CSS 選取器來選取 HTML 元素。 $("p") 選取 <p> 元素。 $("p.intro") 選取所有 class="intro" 的 <p> 元素。 $("p#demo") 選取所有 id="demo" 的 <p> 元素。 jQuery 屬性選取器jQuery 使用 XPath 運算式來選擇帶有給定屬性的元素。 $("[href]") 選取所有帶有 href 屬性的元素。 $("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。 $("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。 $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。 jQuery CSS 選取器jQuery CSS 選取器可用於改變 HTML 元素的 CSS 屬性。 下面的例子把所有 p 元素的背景顏色更改為紅色： 執行個體$("p").css("background-color","red") jQuery 選取器選取器 執行個體 選取* $("*") 所有元素#id $("#lastname") id="lastname" 的元素.class $(".intro") 所有 class="intro" 的元素element $("p") 所有 <p> 元素.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素  :first $("p:first") 第一個 <p> 元素:last $("p:last") 最後一個 <p> 元素:even $("tr:even") 所有偶數 <tr> 元素:odd $("tr:odd") 所有奇數 <tr> 元素  :eq(index) $("ul li:eq(3)") 列表中的第四個元素（index 從 0 開始）:gt(no) $("ul li:gt(3)") 列出 index 大於 3 的元素:lt(no) $("ul li:lt(3)") 列出 index 小於 3 的元素:not(selector) $("input:not(:empty)") 所有不為空白的 input 元素  :header $(":header") 所有標題元素 <h1> - <h6>:animated 所有動畫元素  :contains(text) $(":contains('W3School')") 包含指定字串的所有元素:empty $(":empty") 無子（元素）節點的所有元素:hidden $("p:hidden") 所有隱藏的 <p> 元素:visible $("table:visible") 所有可見的表格  s1,s2,s3 $("th,td,.intro") 所有帶有匹配選擇的元素  [attribute] $("[href]") 所有帶有 href 屬性的元素[attribute=value] $("[href='#']") 所有 href 屬性的值等於 "#" 的元素[attribute!=value] $("[href!='#']") 所有 href 屬性的值不等於 "#" 的元素[attribute$=value] $("[href$='.jpg']") 所有 href 屬性的值包含以 ".jpg" 結尾的元素  :input $(":input") 所有 <input> 元素:text $(":text") 所有 type="text" 的 <input> 元素:password $(":password") 所有 type="password" 的 <input> 元素:radio $(":radio") 所有 type="radio" 的 <input> 元素:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素:submit $(":submit") 所有 type="submit" 的 <input> 元素:reset $(":reset") 所有 type="reset" 的 <input> 元素:button $(":button") 所有 type="button" 的 <input> 元素:image $(":image") 所有 type="image" 的 <input> 元素:file $(":file") 所有 type="file" 的 <input> 元素  :enabled $(":enabled") 所有啟用的 input 元素:disabled $(":disabled") 所有禁用的 input 元素:selected $(":selected") 所有被選取的 input 元素:checked $(":checked") 所有被選中的 input 元素