Sizzle and Peppy Selector Engines in MooTools

By  on  

A few weeks back I touched on how you could implement the Peppy and Sizzle selector engines in MooTools. Both posts showed how to remove the default Moo engine from use and instead make each respective selector engine the one and only. It doesn't have to be that way. You could use all three engines within the page as well.

Peppy, Sizzle, and Moo Together

//assuming that the JavaScript files we brought in via simple XHTML above...

/* MooTools */
var divs = $$('div');

/* Sizzle */
Window.$Sizzle = function(selector){
	return new Elements(new Sizzle(selector));
}
//sizzle usage
var divs = $Sizzle('div');

/* Peppy */
Window.$Peppy = function(selector){
	return new Elements(new peppy.query(selector));
}
//Peppy usage
var divs = $Peppy('div');

Why do this? Each engine has its advantages. Sizzle generally does better with Internet Explorer so if you detect that the user is using IE, you may want to use Sizzle to grab the elements instead.

In most cases the overhead of bringing in each engine makes this strategy overkill. It's definitely an option though.

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

Discussion

  1. Is there any REAL and REAL-WORLD benefit to actually do this or include one of the other selector engines? Does one get the performance from Sizzle when just using its selector engine? .. :f

    Great shit though David. :)

  2. I can’t wait to test sizzle. Where can I get a break down of each engine’s benefits?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!