#06：jQuery 选择器扩展

jQuery 可以选择 CSS3 可以选择的所有内容。但它并没有止步于此！jQuery（通过 Sizzle 选择器引擎）提供了一些额外的选择器，在某些情况下非常有用。例如，CSS 有属性选择器，允许您根据元素可能具有的任何任意属性来选择元素。例如

<div data-whatever="elephant-eyeballs"></div>

我们可以使用 jQuery 中的 CSS 选择器来选择它

$("[data-whatever='elephant-eyeballs']");

属性选择器有不同的变体，例如，您可以使用 ^= 来表示“以该值开头”，而不是 =。但出于某种原因，CSS 没有 != 或“不等于该值”。jQuery 则有！这是一个jQuery 选择器扩展的示例。

有很多这样的选择器扩展。我们在本次屏幕录像中特别讨论了一些

• :eq() – :nth-child() 的基于 0 的版本
• :even – :nth-child(even) 的快捷方式
• :gt(n) – 选择索引大于 n 的元素。也是更复杂 :nth-child() 公式的快捷方式。

可能最有用的选择器扩展是 :has() – 它将选择限制为包含您传递给此伪选择器的内容的元素（或者它是一个伪伪选择器 :) 很可能将来 CSS 会为我们提供类似的东西（我认为它会像 pre ! code），但这还很遥远。不幸的是，我在本次屏幕录像中并没有对此进行很有力的论证，但当您需要它时，您就会知道！例如，“选择所有包含 h3.sports-bar 的 .module” – 这种事情。

如果需要，您还可以创建自己的选择器扩展。这里有一篇关于此的文章。该示例是创建 :inview，它仅在元素在当前滚动位置可见时才选择该元素。它将是这样的

jQuery.extend(jQuery.expr[':'], {  
  inview: function (el) {    
    var $e = $(el),    
        $w = $(window),    
        top = $e.offset().top,   
        height = $e.outerHeight(true),    
        windowTop = $w.scrollTop(),    
        windowScroll = windowTop - height,    
        windowHeight = windowTop + height + $w.height();    

    return (top > windowScroll && top < windowHeight);  
  }
});