Расширяем Sizzle (псевдоселекторы)

Введение

Как известно, Джон Резиг (John Resig) создал абсолютно новый движок селекторов под названием Sizzle(selector[, context]).

Его можно использовать как отдельно от jQuery (всего 4Kb в формате min/gzip), так и вместе с ним.

Наряду с большой производительностью он обладает и хорошей расширяемостью, о которой я и хочу сейчас рассказать.

Псевдо-селекторы

Самый простой случай: напишем псевдо-селектор, который выбирает элементы, у которых свойство visibility = hidden.

Пример написан в предположении, что подключен Sizzle из jQuery.

<script type="text/javascript" src="/jslib/jquery.js"></script>
<div style="visibility:hidden;">test</div>
<script type="text/javascript">
(function(Sizzle)
{
  Sizzle.selectors.filters['vis-hidden'] = function(elem)
  {
    return elem.style.visibility == 'hidden';
  };
  // пробуем использовать.
  var elts = Sizzle(':vis-hidden');
  for (var i = 0; i < elts.length; i++)
  {
    var elt = elts[i];
    elt.innerHTML = 'Caught';
    elt.style.visibility = '';
  }
})(jQuery.find);
</script>
* This source code was highlighted with Source Code Highlighter.

Используем в jQuery

Селекторы Sizzle, естественно, прекрасно работают в jQuery:

<script src="/jslib/jquery.js"></script>
<div style="visibility:hidden;">test</div>
<script>
(function($)
{
  var Sizzle = $.find;

  Sizzle.selectors.filters['vis-hidden'] = function(elem)
  {
    return elem.style.visibility == 'hidden';
  };

  $(':vis-hidden').html('Caught').css('visibility', '');
})(jQuery);
</script>

* This source code was highlighted with Source Code Highlighter.

Селекторы и фильтры

Создание других вариантов селекторов и фильтров немного сложнее.