Using jQuery at Grooveshark
On a daily basis for the last year, I use jquery at work (Grooveshark) to handle different DOM and animation methods. I started out using jquery because I was new to the browser world and Javascript in particular. Jquery made it really easy to come right in and start creating usable modules.
As I got more comfortable with javascript, I started moving away from jquery and building my own methods or extending jquery. One problem with browsers in general is accessing the DOM and any javascript heavy site will always go over this bump. At Grooveshark, because everything is so heavily based on accessing/modifying song/artist/album information, we already have a unique identifier from the MySQL database. By using a contextual name based system, we can get really fast DOM lookups for very cheap:
HTML:
<table class="songs"> <tr id="song_123"><td>A Song</td></tr> <tr id="song_456"><td>My Song</td></tr> ... MORE SONGS ... <tr id="song_789><td>Your Song</td></tr> </table>
Javascript:
function song_click() { $("table.songs tr").click(function() { var domid = $(this).attr("id"); var songid = domid.split("_")[1]; // possibilities endless... } }
This is not exactly what we do (currently using inline event handler - I know, not very web2.0-ish of me), but this is the basic idea. The html elements themselves contain a reference to the data they represent so whenever a user interacts with that element, it’s very easy to identify what it is.