Extend Sizzle (pseudo selectors)

Introduction

As you know, John Rezig (John Resig) created a completely new selector engine called Sizzle (selector [, context]).

It can be used separately from jQuery (only 4Kb in min / gzip format), and with it.

Along with high performance, it also has good extensibility, which I want to tell you now.

Pseudo-selectors

')
The simplest case: write a pseudo-selector that selects elements with the visibility = hidden property.

The example is written under the assumption that jQuery Sizzle is connected.

< 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 .

We use in jQuery

Sizzle selectors naturally work great in 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 .

Selectors and filters

Creating other options for selectors and filters is a bit more complicated .