jQuery如何扩展选择器

在使用jQuery时，选择器是我们经常使用的，它允许我们从文档中获取匹配指定选择器的元素。但是，当我们需要匹配自定义的选择器时，jQuery默认的选择器可能会有所不够，这时我们需要扩展jQuery的选择器。

扩展jQuery选择器的方式

要扩展jQuery选择器，我们需要使用$.expr[':']。这是jQuery提供的一种特殊的方式，允许我们自定义选择器。

$.expr[':'].customSelector = function(element) {
  // 返回true表示匹配成功，返回false表示匹配失败
};

$.expr[':']是一个对象，通过它我们可以定义自己的选择器。在这个对象中，我们可以添加一些方法来扩展选择器，方法的名称就是我们定义的选择器名称，例如上面代码中的customSelector。

在我们自定义的选择器函数中，element参数是当前遍历到的元素，我们需要根据我们的需要对其进行判断，如果匹配成功，返回true，否则返回false。

举例

想象一个场景，我们正在处理一个页面上的商品列表，每个商品都是一个<div>元素，有一个data-price属性存储了商品的价格。

我们希望能够轻松地通过价格筛选商品，这时我们就可以自定义一个价格选择器：

$.expr[':'].price = function(element, index, meta) {
  var price = $(element).data('price');
  var value = meta[3];

  return price == value;
};

我们定义了一个price选择器，meta参数包含查询中的信息，它会被转化为数组。例如，在这个例子中，meta[3]表示选择器的参数，也就是我们查询的价格值。

上面的选择器函数检查元素的data-price属性是否等于选择器参数中传入的值，如果相等，返回true，否则返回false。

现在我们可以使用自定义的选择器来筛选商品了：

// 匹配价格为25的商品
$('div:price(25)').hide();

// 匹配价格小于20的商品
$('div:lt(20)').addClass('cheap');

总结

通过$.expr[':']，我们可以很方便地扩展jQuery的选择器，让我们可以使用更加灵活的方式来选择元素。当我们需要匹配自定义的选择器时，可以通过上面的方法来实现。