Before I get into this, I should point out that if you have jQuery on your page, when you type
$ in your console it's indeed jQuery, otherwise, it's defined by your developer tools.
A bit ago, someone on SO asked where does $$() come from? Alex Russell called this "the bling-bling function", and it's part of the Command Line API and will return an array of elements to match a CSS selector. Why the double
$$? Well, the single
$ was already taken: the pioneer of developer tools, Firebug, assigned the
getElementById and so it has remained.
But.. let's be real though, ID's? Who is using ID's anymore? Using
Cross-browser devtool collaboration
Addy Osmani felt similarly so we jumped into freenode IRC and had a chat with the developers behind both Firefox Web Developer Tools and Firebug with the goal of getting this function representing
querySelector instead of tis legacy baggage of
gEByID(). A short explanation later and they were on board, tickets were filed and we were on the way. Of course, what will the rest of the dev community think?
From Poll to Production
- Firebug: Change $() to use querySelector() instead of getElementById()
- Firefox DevTools: Change JSTerm's $ helper function from getElementById to querySelector
- Webkit: Web Inspector: Update $ to alias to querySelector rather than getElementById
- Opera Dragonfly: Change console host command: $ → querySelector
This whole story is cool for two reasons. First off, we have succeeded in updating an old definitely to represent something much more in line with modern standards. Secondly, this was all accomplished through open web collaboration allowing for a huge benefit to the development community.
So please do enjoy the new definition of
$ in Chrome DevTools, Firefox, Firebug, and Opera Dragonfly.
(Big thanks to Ryan Olson for his help with this post. )
And like I mentioned,
$ is part of the console's command line API which has brand new docs!. Go read it!
I dove into some of them a while ago in this video too: