自訂 jQuery 篩選器單獨使用時可以選擇元素 沒有必要提供與篩選器結合使用的實際元素，例如 $('div:hidden')。在需要選擇器表達式的任何地方都可以簡單地單獨傳遞過濾器。 #一些例子： // Selects all hidden elements $(':hidden'); // Selects all div elements, then selects only even elements $('div').filter(':even'); 摸索：隱藏與：可見濾鏡 自訂 jQuery 選擇器過濾器 :hidden 和 :visible 沒有像人們預期的那樣考慮 CSS 可見性屬性。 jQuery 決定元素是否隱藏或可見的方式是該元素是否佔用文件中的任何空間。確切地說，如果瀏覽器報告的 offsetWidth 或 offsetHeight 大於 0，則該元素是可見的。這樣，一個元素可能具有 display 的 CSS 值 block 包含在具有 display none 會準確報告它不可見。 仔細檢查程式碼並確保您瞭解為什麼傳回的值是 true，即使選擇的 # 具有 display:block 的內聯樣式。 (function($){ // Returns true because the parent div is hidden, so the // encapsulated div reports zero offsetWidth and offsetHeight alert($('#childDiv').is(':hidden')); })(jQuery); 使用 Is() 方法傳回布林值 通常需要確定所選元素集是否確實包含特定元素。使用 is() 方法，我們可以根據表達式/篩選器檢查目前集。如果該集合至少包含一個由給定表達式/過濾器選擇的元素，則檢查將傳回 true。如果不包含該元素，則傳回 false 值。檢查以下程式碼： jQuery jQuery (function($){ // Returns true alert($('div').is('#i1')); // Returns false. Wrapper set contains no <div> with id="i2" alert($('div').is('#i2')); // Returns false. Wrapper set contains no hidden <div> alert($('div').is(':hidden')); })(jQuery); 很明顯，第二個alert() 將傳回false 值，因為我們的包裝器集不包含具有id 屬性值i2 的。 is() 方法對於確定包裝器集是否包含特定元素非常方便。 註解：從 jQuery 1.3 開始，is() 方法支援所有表達式。先前，諸如包含層次結構選擇器的複雜表達式（例如 、~ 和 >）總是會傳回 true。 過濾器由其他內部 jQuery 函數使用。因此，適用於此處的所有規則也適用於此處。 有些開發人員使用 is('.class') 來確定元素是否具有特定的類別。不要忘記 jQuery 已經有一種方法可以執行此操作，稱為 hasClass('class')，該方法可用於包含多個類別值的元素。但說實話， hasClass() 只是 is() 方法的一個方便的包裝。 您可以向 jQuery 傳遞多個選擇器表達式 您可以為 jQuery 函數的第一個參數提供多個用逗號分隔的表達式：$('表達式, 表達式, 表達式')。換句話說，您不限於僅使用單一表達式來選擇元素。例如，在下面的範例中，我向 jQuery 函數傳遞了三個用逗號分隔的表達式。 jQuery is the best! (function ($) { // Alerts jQuery is the best! alert($('div, p, ul li').text()); // Inefficient way. Alerts jQuery is the best! alert($('div').text() + $('p').text() + $('ul li').text()); })(jQuery); 每個表達式都會選擇全部新增到包裝器集中的 DOM 元素。然後我們可以使用 jQuery 方法對這些元素進行操作。請記住，所有選取的元素都將放置在同一個包裝集中。執行此操作的低效方法是呼叫 jQuery 函數三次，每個表達式呼叫一次。 檢查包裝器集.length以確定選擇 可以透過檢查包裝器集是否有長度來確定表達式是否選擇了任何內容。您可以使用陣列屬性 length 來執行此操作。如果 length 屬性不傳回 0，那麼您就知道至少有一個元素與您傳遞給 jQuery 函數的表達式相符。例如，在下面的程式碼中，我們檢查頁面中是否存在 id 為「notHere」的元素。你猜怎麼了？它不在那裡！ (function($){ // Alerts "0" alert($('#notHere').length); })(jQuery); 註解： 如果不明顯，length 屬性還可以報告包裝器集中的元素數量 - 換句話說，傳遞給 jQuery 函數的表達式選擇了多少元素. 建立用於選擇元素的自訂篩選器 可以透過建立您自己的自訂過濾器來擴展 jQuery 選擇器引擎的功能。理論上，您在這裡所做的一切都是基於已經是 jQuery 一部分的自訂選擇器。例如，假設我們想要選擇網頁上絕對定位的所有元素。由於 jQuery 還沒有自訂 :positionAbsolute 過濾器，因此我們可以建立自己的篩選器。 absolute absolute static absolute static absolute (function ($) { // Define custom filter by extending $.expr[':'] $.expr[':'].positionAbsolute = function (element) { return $(element).css('position') === 'absolute'; }; // How many elements in the page are absolutely positioned? alert($(':positionAbsolute').length); // Alerts "4" // How many div elements are absolutely positioned? alert($('div:positionAbsolute').length); // Alerts "2" })(jQuery); 這裡要掌握的最重要的一點是，您不限於 jQuery 提供的預設選擇器。您可以創建自己的。然而，在您花時間建立自己的選擇器版本之前，您可以簡單地嘗試具有指定過濾函數的 filter() 方法。例如，我可以透過簡單地使用傳遞給 filter() 方法的函數來過濾前面範例中的 元素，從而避免編寫 :positionAbsolute 選擇器。 // Remove elements from the wrapper // set that are not absolutely positioned $('div').filter(function () { return $(this).css('position') === 'absolute'; }); // or // Remove all elements from the wrapper // set that are not absolutely positioned $('*').filter(function () { return $(this).css('position') === 'absolute'; }); 注释：有关创建自己的选择器的更多信息，我建议阅读以下内容：http://www.bennadel.com/blog/1457-How-To-Build-A-Custom- jQuery-Selector.htm 按数字顺序过滤与 DOM 关系过滤之间的差异 jQuery 提供了过滤器，用于通过集合中元素的数字上下文来过滤包装器集。 这些过滤器是： :first :last :even :odd :eq(index) :gt(index) :lt(index) 注释：过滤包装器集本身的过滤器通过过滤集合中起始点 0 或索引 0 的元素来实现这一点。例如 :eq(0) 和:first 访问集合中的第一个元素 - $('div:eq(0)') - 索引为 0。这与单索引的 :nth-child 过滤器形成对比。这意味着，例如 :nth-child(1) 将返回第一个子元素，但尝试使用 :nth-child(0) 将不起作用。使用 :nth-child(0) 将始终不选择任何内容。 使用 :first 将选择集合中的第一个元素，而 :last 将选择集合中的最后一个元素。请记住，它们根据集合内的关系（从 0 开始的数字层次结构）过滤集合，而不是 DOM 上下文中元素的关系。有了这些知识，就应该很明显为什么过滤器 :first、:last 和 :eq(index) 将始终返回单个元素。 如果还不是很明显，请允许我进一步解释。 :first 只能返回单个元素的原因是，当只有一个集合时，集合中只能有一个元素被首先考虑。这应该是相当合乎逻辑的。检查下面的代码，看看这个概念的实际应用。 1 2 3 4 5 6 7 8 9 10 (function ($) { // Remember that text() combines the contents of all // elements in the wrapper set into a single string. alert('there are ' + $('li').length + ' elements in the set'); // Get me the first element in the set alert($('li:first').text()); // Alerts "1" // Get me the last element in the set alert($('li:last').text()); // Alerts "10" // Get me the 6th element in the set, 0 based index alert($('li:eq(5)').text()); // Alerts "6" })(jQuery); 有了对操作集合本身的清晰理解，我们可以通过使用过滤器来选择与实际 DOM 中其他元素具有唯一关系的元素，从而增强对选择元素的理解。 jQuery 提供了几个选择器来执行此操作。其中一些选择器是自定义的，而另一些则是众所周知的用于选择 DOM 元素的 CSS 表达式。 祖先后代 父级>子 上一个 + 下一个 prev ~ 兄弟姐妹 :nth-child(选择器) :first-child :last-child :only-child :empty :has(选择器) :parent 使用这些选择器过滤器将根据元素在 DOM 中与 DOM 中其他元素的关系来选择元素。为了演示这个概念，让我们看一些代码。 1 2 3 4 5 1 2 3 4 5 (function ($) { // Remember that text() combines the contents of all // elements in the wrapper set into a single string. alert($('li:nth-child(2)').text()); // Alerts "22" alert($('li:nth-child(odd)').text()); // Alerts "135135" alert($('li:nth-child(even)').text()); // Alerts "2424" alert($('li:nth-child(2n)').text()); // Alerts "2424" })(jQuery); 如果您对 $('li:nth-child(odd)').text() 返回值 135135 感到惊讶，那么您还没有掌握关系过滤器。 $('li:nth-child(odd)') 口头上说的是“查找网页中所有属于子元素的 元素，然后按奇数子元素过滤它们”。好吧，碰巧页面中有两个结构，它们有一组由 s 组成的兄弟结构。我的观点是这样的：包装器集由基于过滤器的元素组成，该过滤器考虑了元素与 DOM 中其他元素的关系。这些关系可以在多个位置找到。 要记住的概念是，并非所有过滤器都是平等创建的。确保您了解哪些是基于 DOM 关系进行过滤的，例如:only-child-以及哪些按元素的位置进行过滤-例如:eq()-在包装集中。 当值包含元字符时按 ID 选择元素 jQuery 选择器使用一组元字符（例如 # ~ [] = > ），当用作名称的文字部分时（例如 id="#foo[bar]" ）应该被逃脱。可以通过在字符前放置两个反斜杠来转义字符。检查下面的代码，了解如何在选择表达式中使用两个反斜杠来选择 id 属性值为 #foo[bar] 的元素。 jQuery (function ($) { // Alerts "jQuery" alert($('#\\#foo\\[bar\\]').text()); })(jQuery); 以下是用作名称的文字部分时需要转义的字符的完整列表。 # ; & , . + * ~ ' : “ ! ^ $ [ ] ( ) = > | / 堆叠选择器过滤器 可以堆叠选择器过滤器 - 例如a[title="jQuery"][href^="http://"].一个明显的例子是选择一个具有特定属性和特定属性值的元素。例如，下面的 jQuery 代码将仅选择 HTML 页面中的 元素： 包含 href 属性，起始值为“http://” 有一个值为“jQuery”的 title 属性 仅选择一个 正在被选择。 jQuery.com jQuery.com 1 jQuery.com (function ($) { // Alerts "1" alert($('a[title="jQuery"][href^="http://"]').length); })(jQuery); 请注意代码中我们如何堆叠两个过滤器来完成此选择。 除了属性过滤器之外，还可以堆叠其他选择器过滤器。例如： // Select the last contained in the // wrapper set that contains the text "jQuery" $('div:last:contains("jQuery")') // Get all check boxes that are both visible and selected $(':checkbox:visible:checked') 要掌握的概念是选择器过滤器可以堆叠并组合使用。 注释：您还可以嵌套和堆叠过滤器 - 例如$('p').filter(':not(:first):not(:last)') 嵌套选择器过滤器 选择器过滤器可以嵌套。这使您能够以非常简洁和强大的方式使用过滤器。下面，我将举例说明如何嵌套过滤器来执行复杂的过滤。 javascript jQuery javascript jQuery javascript jQuery (function ($) { // Select all div's, remove all div's that have a child element with class="jQuery" alert($('div:not(:has(.jQuery))').text()); // Alerts combined text of all div's // Select all div's, remove all div's that are odd in the set (count starts at 0) alert($('div:not(:odd)').text()); // Alerts combined text of all div's })(jQuery); 要掌握的概念是选择器过滤器可以嵌套。 注释：您还可以嵌套和堆叠过滤器 - 例如$('p').filter(':not(:first):not(:last)') 摸索 :nth-child() 过滤器 :nth-child() 过滤器有很多用途。例如，假设您只想选择 元素中包含的每三个 元素。可以使用 :nth-child() 过滤器。检查以下代码以更好地了解如何使用 :nth-child() 过滤器。 1 2 3 4 5 6 7 8 9 10 (function ($) { // Remember that text() combines the contents of all // elements in the wrapper set into a single string. // By index alert($('li:nth-child(1)').text()); // Alerts "1" // By even alert($('li:nth-child(even)').text()); // Alerts "246810" // By odd alert($('li:nth-child(odd)').text()); // Alerts "13579" // By equation alert($('li:nth-child(3n)').text()); // Alerts "369" // Remember this filter uses a 1 index alert($('li:nth-child(0)').text()); // Alerts nothing. There is no 0 index. })(jQuery); 通过使用正则表达式搜索属性值来选择元素 当用于选择元素的 jQuery 属性过滤器不够健壮时，请尝试使用正则表达式。 James Padolsey 为过滤器选择器编写了一个很好的扩展，它允许我们创建用于过滤的自定义正则表达式。我在这里提供了一个代码示例，但请确保您还查看了 http://james.padolsey.com 上的文章以了解所有详细信息。 (function ($) { //James Padolsey filter extension jQuery.expr[':'].regex = function (elem, index, match) { var matchParams = match[3].split(','), validLabels = /^(data|css):/, attr = { method: matchParams[0].match(validLabels) ? matchParams[0].split(':')[0] : 'attr', property: matchParams.shift().replace(validLabels, '') }, regexFlags = 'ig', regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g, ''), regexFlags); return regex.test(jQuery(elem)[attr.method](attr.property)); } // Select div's where the id attribute contains numbers alert($('div:regex(id,[0-9])').length); // Alerts "2" // Select div's where the id attribute contains the string "Two" alert($('div:regex(id, Two)').length); // Alerts "1" })(jQuery); 选择直系子代与选择所有后代之间的差异 直接子元素只能通过使用组合器 > 或通过 children() 遍历方法来选择。可以使用 * CSS 表达式选择所有后代。确保您清楚地了解两者之间的区别。下面的示例演示了这些差异。 text text (function ($) { // Each statement alerts "2" because there are // two direct child <p> elements inside of <div> alert($('div').children().length); // or alert($('>*', 'div').length); alert($('div').find('>*').length); // Each statement alerts 6 because the <div> contains // 6 descendants, not including the text node. alert($('div').find('*').length); // or alert($('*', 'div').length); })(jQuery); 当上下文已设置时选择直接子元素 当已经提供了上下文时，可以在没有上下文的情况下使用组合器 > 来选择直接子元素。检查下面的代码。 text text text text (function ($) { // Select only the direct <li> children. Alerts "3". alert($('ul:first').find('> li').length); // or alert($('> li', 'ul:first').length); } )(jQuery); 基本上，当上下文已经确定时，'>元素'可以用作表达式。
