精简版jQuery：选择jQuery

自定义 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 的内联样式。

使用 Is() 方法返回布尔值

通常需要确定所选元素集是否确实包含特定元素。使用 is() 方法，我们可以根据表达式/过滤器检查当前集。如果该集合至少包含一个由给定表达式/过滤器选择的元素，则检查将返回 true。如果不包含该元素，则返回 false 值。检查以下代码：

    
jQuery
    
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!
    
    
    

每个表达式都会选择全部添加到包装器集中的 DOM 元素。然后我们可以使用 jQuery 方法对这些元素进行操作。请记住，所有选定的元素都将放置在同一个包装集中。执行此操作的低效方法是调用 jQuery 函数三次，每个表达式调用一次。

检查包装器集.length以确定选择

可以通过检查包装器集是否有长度来确定表达式是否选择了任何内容。您可以使用数组属性 length 来执行此操作。如果 length 属性不返回 0，那么您就知道至少有一个元素与您传递给 jQuery 函数的表达式相匹配。例如，在下面的代码中，我们检查页面中是否存在 id 为“notHere”的元素。你猜怎么了？它不在那里！

注释： 如果不明显，length 属性还可以报告包装器集中的元素数量 - 换句话说，传递给 jQuery 函数的表达式选择了多少元素.

创建用于选择元素的自定义过滤器

可以通过创建您自己的自定义过滤器来扩展 jQuery 选择器引擎的功能。理论上，您在这里所做的一切都是基于已经是 jQuery 一部分的自定义选择器。例如，假设我们想要选择网页上绝对定位的所有元素。由于 jQuery 还没有自定义 :positionAbsolute 过滤器，因此我们可以创建自己的过滤器。

    
absolute
    absolute
    
static
    
absolute
    
static
    absolute
    
    

这里要掌握的最重要的一点是，您不限于 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 只能返回单个元素的原因是，当只有一个集合时，集合中只能有一个元素被首先考虑。这应该是相当合乎逻辑的。检查下面的代码，看看这个概念的实际应用。

简单的jQuery日期时间选择器

一款简单的jQuery日期时间选择器插件，允许用户自由选择一个日期和时间，可自定义设置日期，简单实用，喜欢的不要错过。

下载

    

        
1
        
2
        
3
        
4
        
5
    
    

        
6
        
7
        
8
        
9
        
10
    
    
    

有了对操作集合本身的清晰理解，我们可以通过使用过滤器来选择与实际 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
    
    
    

如果您对 $('li:nth-child(odd)').text() 返回值 135135 感到惊讶，那么您还没有掌握关系过滤器。 $('li:nth-child(odd)') 口头上说的是“查找网页中所有属于子元素的

    
jQuery
    
    

    jQuery.com

    jQuery.com 1

    jQuery.com

    
    

// 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')

    
javascript
    
jQuery
    
javascript
    
jQuery
    
javascript
    
jQuery
    
    

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    
    
    

    

        
text
        
text
    
    
    

    

        
text
        

            

                
text
                
text
            
        
        
text