I just had such a project, but the one feature I could not live without was CSS3 selectors. Walking the DOM manually would have taken hours to implement correctly, especially since each page needed to be treated differently. My first thought was to rip out the JQuery selector functions. That’s when I discovered Sizzle.
Sizzle is the CSS3 selector engine written by John Resig that was originally written for JQuery and is now also used in Dojo. Since it’s a standalone library, you can also use it directly for your projects.
The first step is simple, you need to include the Sizzle js file in your page. Once you do that, you can call Sizzle just as you would call
$ in normal JQuery.
// get all divs Sizzle("div")
// Get all links in the paragraphs in the sidebar Sizzle("#sidebar p a")
// Get all li elements under a ul Sizzle("ul > li")Just like JQuery, right? Well no. Unlike JQuery, which returns a JQuery object that can be accessed with JQuery’s easy and cross browser API’s. Sizzle returns a list of elements. If you wanted to set the text of the first link element to “Go To This Page,” then what you’d have to do is the following:
var elements = Sizzle("#sidebar p a"); elements.innerHTML = "Go To This Page";If the necessary manipulations are simple, using Sizzle standalone is the way to go. It’s much smaller than a full blown JS library and it gives you what’s normally the most painful part.
Did you like this? Please share:
The Lost Year: A Failed Experiment to Switch Away From Mac
Fed up with the Apple Keyboard, I bought a ThinkPad, installed Linux, and promptly decided that I hated computers.
Maker's Space, Manager's Space
The Grand Remote Work Experiment: A Retrospective
The COVID-19 pandemic has lead to an unexpected experiment in remote working. What has worked and why?