Descrição
About the Tutorial
You’ve probably used the selector engines built into several JavaScript libraries . . . but do you have any idea how they’re built?
If not, this tutorial will take you through the process of crafting your own CSS selector engine. You’ll learn how to break down the decently complex problem of selecting DOM elements into manageable chunks and code it piece by piece . . . all while using only the best JavaScript practices!
This tutorial will be available to Tuts+ Premium subscribers next week.
The Tutorial Intro
Recently, I thought I’d try my hand at creating a simple CSS selector engine. You know what I’m talking about: it’s the kind of thing you use in most JavaScript libraries, where you pass in a CSS selector to find the elements you want to work with. Today, I’ll show you how to create a really simple one!
What we are going to be building today is in no way something you’d use on a live site. It will not have all the great features you’re used to using in the “real” selector engines, but it will give you a small taste of how complicated something like Sizzle or NWMatcher can be. And who knows? Maybe you’ll pick up a few JavaScript tips and tricks on the way.
Selectors Our Engine will Match
- ids:
#main, div#content - classes:
.selected, li.current - elements:
span, p - any combo of the above:
section#main .img_wrap img
