Sizzle – A Look at jQuery’s New CSS Selector Engine

What is Sizzle Anyway?

John Resig and the jQuery team recently released Sizzle, a new CSS selector engine as a spin off from the jQuery project, announcing its release when jQuery 1.3 was made available for download.

The component is a standalone project, thus allowing other library’s owners and developers to collaborate and join the Sizzle development to eventually take advantage of its advanced options and ease of use and implementation. Sizzle supports CSS3 and unicode selectors as well as a number of regular expressions to match the desired element.

The Basics

There’s actually no reason you should learn how Internal or Extension APIs work unless, of course, you want to develop your own plugin, or add support for your library. Though, the Public API is what is really important, at least for now. It’s what you can use to retrieve elements that match a certain regular expression or simply a CSS sleector.

jQuery, including Sizzle from version 1.3 upwards, is one of the most common examples of the great help Sizzle can be for a developer.

The syntax goes something like this

• jQuery (String selector, DOMElement|DOMDocument context)

While using Sizzle as a standalone, it would become

• Sizzle (String selector, DOMElement|DOMDocument context, Array results)

Alternatively, Sizzle can be called passed to an existing array and the results will be appended to that array

• Sizzle.matches (String selector, Array set)

It’s easy to see how helpful a couple of lines of code dropped into almost every package can lend a hand toward dealing with selectors and DOM elements.

Selectors for Dummies

That’s right, this is actually about both jQuery and Sizzle, but most importantly about Sizzle because in the future (since I don’t know any library that already does), there could be other libraries using Sizzle, as it’s open soruce, light-weight (3KB) and easily dropppable into different host libraries.

Apart from the well-known CSS selectors you can make use of, here are some others that struck my attention.

For example

• Sizzle (‘li:nth-child(3)’) // selects li elements which are third child within their list
• Sizzle (‘li:nth-child(odd)’) // selects all odd element within a list (‘even’ works the same way)
• Sizzle (‘li:nth-child(3n)’) // slelects every third li element
• Sizzle (‘li:nth-child(3n+1′) // selects the element after the third li element

A lot more can be done

• Sizzle (‘:option:not(:selected)’) // selects all unselected option elements
• Sizzle (‘select[name=list] :not(:selected)’) // selects all unselected options within the select element named ‘list’
• Sizzle (‘select[name=list] :not(:selected):contains(hello)’) // selects all unselected options that contains the text ‘hello’ within the select element named ‘list’

What Now?

The extension API’s also worth a closer look.

A collection of regular expressions to be used for finding or filtering elements. The name of each of the regular expressions should correspond to the names specified in the Sizzle.selectors.find and Sizzle.selectors.filter objects.

— Sizzle documentation points out

So, in order to add a new find function, you’ll need to add a regexp to ‘match’, a function to ‘find’ and a hook to ‘order’.

Sizzle.selectors.match = { NAME: RegExp }
Sizzle.selectors.find = { NAME: function (Array results, DOMElement|DOMDocument context, bool isXML) }
Sizzle.selectors.order = [ 'NAME', 'NAME2', ... ]

• ‘results’ is the array of results returned from matching your regular expression
• ‘context’ is the DOM element in which you want to search (defaults to ‘document’)
• ‘isXML’ is a boolean value letting you know whether you’re operating with an XML document or not

Basically, what you have to do is find a regular expression that works for your case and add it to ‘match’; create the function in ‘find’; specify the order in which ‘find’ functions should be tried (the typical having ID first, being the fastest and the one with the smallest amount of results — 0 or 1).

Filtering statements are somewhat different. You first need to add a regular expression to the ‘match’ object, a function to ‘filter’ and optionally another function to ‘preFilter’.

Sizzle.selectors.match = { NAME: RegExp }
Sizzle.selectors.preFilter = { NAME: function (match) }
Sizzle.selectors.filter = { NAME: function (element, match) }

An optional ‘preFilter’ function allows you to examine the matched array from the corresponding regular expression and returns a new matched array. This allows you to avoid some of the repetitive processing that might occur in a filter function. The result of the filter function should be true or false (element matches the selector or not); the regular expression passed to the filter function automatically takes into account the results of the preFilter process

Final Thoughts

Yup, this was just the tip of a much bigger iceberg and I invite you all, if interested, to check out some of the (scarce) Sizzle documentation, the (mostly inactive) discussion group, and the jQuery selectors cheatsheat, eventually trying out for yourself what Sizzle is and can do.

About the Author

Keen on geeky stuff, I tried everything from rocketry to weird game development adventures more than once. I love orange-colored things. I'd be a web developer with a passion for design but I find myself writing for some websites every now and then.

More posts by Giulio Bai

Website