Расширяем 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.Селекторы и фильтры
Создание других вариантов селекторов и фильтров немного сложнее.
комментарии (20)