jQuery是一個快速、簡潔的JavaScript庫，它簡化了HTML文檔遍歷、事件處理、動畫和Ajax交互等操作。在jQuery中，選擇器是一個非常重要的概念，它允許開發者通過CSS樣式的語法來選擇和操作DOM元素。jQuery選擇器可以分為以下幾種類型：
基本選擇器是jQuery中最常用的選擇器類型，它們基于元素的標簽名、ID、類名等屬性來選擇元素。
$("p")選擇所有的<p>元素。$("#myId")選擇ID為myId的元素。$(".myClass")選擇所有類名為myClass的元素。$("*")選擇頁面中的所有元素。層次選擇器允許開發者根據元素在DOM樹中的層次關系來選擇元素。
$("div p")選擇所有<div>元素內的<p>元素。$("div > p")選擇所有<div>元素的直接子<p>元素。$("div + p")選擇緊接在<div>元素后的<p>元素。$("div ~ p")選擇所有在<div>元素之后的<p>元素。過濾選擇器允許開發者根據元素的屬性、內容、位置等條件來過濾選擇元素。
$("input[type='text']")選擇所有type屬性為text的<input>元素。$("div:contains('Hello')")選擇所有包含文本Hello的<div>元素。$("div:hidden")選擇所有隱藏的<div>元素。$("input:checked")選擇所有被選中的<input>元素。表單選擇器是專門用于選擇和操作表單元素的選擇器。
$(":input")選擇所有的<input>、<textarea>、<select>和<button>元素。$(":text")選擇所有type屬性為text的<input>元素。$(":password")選擇所有type屬性為password的<input>元素。$(":radio")選擇所有type屬性為radio的<input>元素。$(":checkbox")選擇所有type屬性為checkbox的<input>元素。$(":submit")選擇所有type屬性為submit的<input>和<button>元素。$(":reset")選擇所有type屬性為reset的<input>和<button>元素。$(":file")選擇所有type屬性為file的<input>元素。jQuery還允許開發者自定義選擇器，以滿足特定的需求。自定義選擇器可以通過擴展$.expr[':']對象來實現。
例如，定義一個選擇所有包含特定文本的<div>元素的自定義選擇器：
$.expr[':'].containsText = function(element, index, matches) {
return $(element).text().indexOf(matches[3]) >= 0;
};
// 使用自定義選擇器
$("div:containsText('Hello')").css("color", "red");
偽類選擇器允許開發者根據元素的狀態或位置來選擇元素。
$("p:first")選擇第一個<p>元素。$("p:last")選擇最后一個<p>元素。$("tr:even")選擇所有偶數行的<tr>元素。$("tr:odd")選擇所有奇數行的<tr>元素。$("li:eq(2)")選擇第三個<li>元素。$("li:gt(2)")選擇索引大于2的所有<li>元素。$("li:lt(2)")選擇索引小于2的所有<li>元素。內容選擇器允許開發者根據元素的內容來選擇元素。
$("div:contains('Hello')")選擇所有包含文本Hello的<div>元素。$("div:empty")選擇所有沒有子元素的<div>元素。$("div:has(p)")選擇所有包含<p>元素的<div>元素。$("div:parent")選擇所有包含子元素的<div>元素。可見性選擇器允許開發者根據元素的可見性來選擇元素。
$("div:visible")選擇所有可見的<div>元素。$("div:hidden")選擇所有隱藏的<div>元素。屬性選擇器允許開發者根據元素的屬性來選擇元素。
$("div[title]")選擇所有具有title屬性的<div>元素。$("div[title='Hello']")選擇所有title屬性值為Hello的<div>元素。$("div[title!='Hello']")選擇所有title屬性值不等于Hello的<div>元素。$("div[title^='He']")選擇所有title屬性值以He開頭的<div>元素。$("div[title$='lo']")選擇所有title屬性值以lo結尾的<div>元素。$("div[title*='ell']")選擇所有title屬性值包含ell的<div>元素。子元素選擇器允許開發者根據元素在父元素中的位置來選擇元素。
$("div:first-child")選擇所有作為父元素第一個子元素的<div>元素。$("div:last-child")選擇所有作為父元素最后一個子元素的<div>元素。$("div:nth-child(2)")選擇所有作為父元素第二個子元素的<div>元素。$("div:only-child")選擇所有作為父元素唯一子元素的<div>元素。表單屬性選擇器允許開發者根據表單元素的屬性來選擇元素。
$("input:enabled")選擇所有啟用的<input>元素。$("input:disabled")選擇所有禁用的<input>元素。$("input:checked")選擇所有被選中的<input>元素。<option>元素。例如，$("option:selected")選擇所有被選中的<option>元素。除了上述常見的選擇器類型，jQuery還提供了一些其他選擇器，用于處理特定的選擇需求。
$("div:animated")選擇所有正在執行動畫的<div>元素。$("input:focus")選擇當前獲得焦點的<input>元素。<h1>到<h6>）。例如，$(":header")選擇所有的標題元素。$("div:not(.myClass)")選擇所有不包含類名myClass的<div>元素。jQuery選擇器提供了豐富的方式來選擇和操作DOM元素。通過熟練掌握各種選擇器的用法，開發者可以更加高效地編寫JavaScript代碼，實現復雜的頁面交互效果。無論是基本選擇器、層次選擇器、過濾選擇器還是自定義選擇器，jQuery都提供了強大的工具來滿足不同的開發需求。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
