jQuery Lite: Choose jQuery

Custom jQuery filters can select elements when used alone It is not necessary to provide the actual element used in conjunction with the filter, such as $('div:hidden') . You can simply pass the filter separately wherever a selector expression is required.

Some examples:

// Selects all hidden elements $(':hidden'); // Selects all div elements, then selects only even elements $('div').filter(':even'); Groping:hidden and :visible filters The custom jQuery selector filters :hidden and :visible do not take CSS visibility properties into account as one would expect. The way jQuery determines whether an element is hidden or visible is if the element takes up any space in the document. Specifically, an element is visible if the offsetWidth or offsetHeight reported by the browser is greater than 0. This way, an element that might have a display CSS value block contained within a display none would accurately report that it is invisible.

Check the code carefully and make sure you understand why the returned value is true , even though the selected has an inline style of 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); Use the Is() method to return a Boolean value It is often necessary to determine whether the selected set of elements actually contains a specific element. Using the is() method we can check the current set based on an expression/filter. The check will return true if the set contains at least one element selected by the given expression/filter. If the element is not contained, a false value is returned. Check the following code:

jQuery jQuery (function($){ // Returns true alert($('div').is('#i1')); // Returns false. Wrapper set contains no with id="i2" alert($('div').is('#i2')); // Returns false. Wrapper set contains no hidden alert($('div').is(':hidden')); })(jQuery); Obviously, the second alert() will return a false value because our wrapper set does not contain an id attribute value i2 ##. The is() method is very convenient for determining whether a wrapper set contains a specific element.

Note: Starting with jQuery 1.3, the is() method supports all expressions. Previously, complex expressions such as those containing hierarchy selectors (such as , ~ , and > ) always returned true .

Filters are used by other internal jQuery functions. Therefore, all rules that apply here also apply here.

Some developers use is('.class') to determine whether an element has a specific class. Don't forget that jQuery already has a way to do this called hasClass('class') , which can be used for elements that contain multiple class values. But to be honest, hasClass() is just a convenience wrapper around the is() method.

You can pass multiple selector expressions to jQuery You can provide multiple comma-separated expressions for the first parameter of a jQuery function: $('expression, expression, expression') . In other words, you are not limited to using just a single expression to select elements. For example, in the example below, I pass three comma-separated expressions to a jQuery function. 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);

Each expression selects all DOM elements added to the wrapper set. We can then use jQuery methods to operate on these elements. Remember that all selected elements will be placed in the same wrapping set. An inefficient way to do this is to call the jQuery function three times, once for each expression.

Check wrapperset.length to determine selection You can determine whether an expression selects anything by checking whether the wrapper set has a length. You can do this using the array property length . If the length property does not return 0, then you know that at least one element matches the expression you passed to the jQuery function. For example, in the code below, we check if there is an element with id "notHere" in the page. Guess what? It's not there! (function($){ // Alerts "0" alert($('#notHere').length); })(jQuery);

Note: If it's not obvious, the length property can also report the number of elements in the wrapper set - in other words, how many elements are selected by the expression passed to the jQuery function.

Create a custom filter for selecting elements It is possible to extend the functionality of the jQuery selector engine by creating your own custom filters. In theory, everything you do here is based on custom selectors that are already part of jQuery. For example, let's say we want to select all elements on a web page that are absolutely positioned. Since jQuery doesn't have a custom :positionAbsolute filter yet, we can create our own. 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);

The most important thing to grasp here is that you are not limited to the default selectors provided by jQuery. You can create your own. However, before you take the time to create your own version of the selector, you can simply try the filter() method with a specified filter function. For example, I could avoid writing the :positionAbsolute selector by simply using the function passed to the filter() method to filter the elements in the previous example. // 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 上的文章以了解所有详细信息。

text

(function ($) { // Each statement alerts "2" because there are // two direct child elements inside of alert($('div').children().length); // or alert($('>*', 'div').length); alert($('div').find('>*').length);

// Each statement alerts 6 because the 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 children. Alerts "3". alert($('ul:first').find('> li').length); // or alert($('> li', 'ul:first').length); } )(jQuery); 基本上，当上下文已经确定时， '>元素' 可以用作表达式。

jQuery Lite: Choose jQuery

Related articles