The Ajax Experience: jQuery Toolkit
I went to The Ajax Experience with high expectations of catching some great tips regarding development in an Ajax environment. At the same time, I was sure of my previous decision with the use of Prototype and Script.aculo.us was as good as it gets (without diving into the widgetized world...e.g. Dojo). I attended John Resig's presentation on jQuery and I became a convert.
John's presentation was less of a presentation and more of a Q&A Demonstration, which suited me fine. As soon as I knew where to download the code, I popped open my laptop and started fiddling around with the toolkit - passively paying attention to the questions and answers, as they tended to be extremely basic questions...you see, jQuery is pretty darn intuitive.
jQuery's mantra is "Find stuff and do stuff to it"
Yeah, I wasn't converted because jQuery was the first toolkit to support chaining and that it executes it nicely. Nor was I converted because of its extensive plugin library. Nope. My conversion was the effecient findability of elements within the DOM! This is what really makes jQuery ballsy. The toolkit was built with findability in mind using already established standards! jQuery fully supports CSS1, CSS2, CSS3, and basic XPath when hunting for elements. For example:
Lets start with something simple:
Say I wanted to find all elements within the page that had the class: bork and hide them, I'd do:
-
$('.bork').hide();
Alright, say I wanted to find all anchor tags with the target set to _blank and add the class whee to it:
-
$('a[@target=_blank]').addClass('whee');
Now, lets say I want to find all anchor tags with the target set to _blank and add the class whee to them AND append (opens in a new window) as a sibling to the link itself.
-
$('a[@target=_blank]').each(
-
function(){
-
$(this).addClass('whee');
-
$(this).after('(Opens in a new window)');
-
}
-
);
Now, if I knew I was going to use the above a whole lot all over hell's half acre, I could create a jQuery plugin that can be chained! Here's how I'd create that feature and allow for the passing of class name:
-
jQuery.fn.opensInNewWindow = function(classname){
-
return this.each(
-
function(){
-
$(this).addClass(classname);
-
$(this).after('(Opens in a new window)');
-
}
-
);
-
};
Now, when I want to put Opens in a new window on a series of elements, I can do so with my newly created plugin:
-
$('a[@target=_blank]').opensInNewWindow('whee');
-
-
//I can do this for ANY element I want even if it isn't a link
-
$('span.bork').opensInNewWindow('zomg');
-
$('div#w00t ul.nav').opensInNewWindow('roflcopter');
Now, to make use of the chainability, you can write the plugin more simply than what I did up above. You can do this: (thanks to malsup, a commenter on this article)
-
jQuery.fn.opensInNewWindow = function(classname){
-
return this.each(
-
function(){
-
$(this).addClass(classname).after('(Opens in a new window)');
-
}
-
);
-
};
Cake walk. As your proficiency in finding objects within a page increases, your code will become shorter.
jQuery currently has a very active community and mailing list (averaging at about 90 posts per day) so if you have questions regarding the toolkit, you can become a member and ask away... In addition, there's a jQuery blog where John posts comparison code showing the difference between jQuery and other available toolkits. (here's a Zebra striping example)
If you are still on the hunt for a JavaScript toolkit for Ajax, DOM manipulation, etc or you find your toolkit of choice too clunky, give jQuery a shot. You'll be pleased with the results.
Discuss This Article
|
|
8 Responses to “The Ajax Experience: jQuery Toolkit”
-
pingback:
Posted: Nov 1st, 2006 at 8:07 amBorkWeb » Visual JQuery 1 -
malsup
Posted: Nov 1st, 2006 at 9:36 amReply to this comment.You’re forgetting that great chainability! This:
$(this).addClass(classname);
$(this).after(’(Opens in a new window)’);is more simply written as:
$(this).addClass(classname).after(’(Opens in a new window)’);
2 -
Matt
Posted: Nov 1st, 2006 at 9:41 amReply to this comment.OOooo good point :D I guess I’m still new at all this jQuery stuff. I’ll get there ;)
3 -
John Resig
Posted: Nov 2nd, 2006 at 1:40 amReply to this comment.Hi Matt - Glad you liked the presentation!
Just a quick optimization on the code that you’ve outlined, you can reduce what you’ve done to:
jQuery.fn.opensInNewWindow = function(classname){
return this.addClass(classname).after(’(Opens in a new window)’);
};Short-and-sweet! Let me know if you have any questions.
4 -
pingback:
Posted: Nov 3rd, 2006 at 12:39 pmBorkWeb » JavaScript Shell Reply to this comment.[...] This little beauty, once you’ve added the bookmark to your browser allows you to open a JavaScript Shell for any page you happen to be on! The shell lets you enter JavaScript from command-line to manipulate the page, trigger functions, analyze properties, etc. All libraries that the site has loaded are available within the Shell…so, if you use jQuery or some other toolkit, all defined functions and plugins are usable. [...]
5 -
pingback:
Posted: Dec 31st, 2006 at 9:38 amNo Sheep » 2006 in Review: Personal Top 10 Reply to this comment.[...] 6 - Was introduced to JQuery After attending the Ajax Experience, Matt introduced me to JQuery. This is the ideal JavaScript toolkit for how I like code to be structured. This new technology in my toolkit is already greatly effecting what I am capable of creating and maintaining. As I become more proficient, I expect my love of JQuery to grow even further. [...]
6 -
pingback:
Posted: Jan 1st, 2007 at 4:50 pmBorkWeb » JSMin: Javascript Compression Reply to this comment.[...] As I’ve been creating more complex Javascript applications, the file size has been increasing (although the size is greatly reduced, thanks to jQuery). And, as a careful programmer should, I place comments all over my Javascript code so I don’t draw too many blanks while updating/debugging…well, those comments tend to bloat the file size, as does the whitespace. The stripping of those elements alone has dropped the file-size of a number of my scripts by 40-50%! Thats huge. What previously was an 8K file goes down to 4K. Awesome. [...]
7 -
pingback:
Posted: Sep 11th, 2007 at 4:29 amBorkWeb » jQuery 1.2 Released! Reply to this comment.[...] is a major release for the JavaScript library that I have grown to love. Before I list the new features, it is important to note what functionality has been removed [...]
8
[...] After my excitement about jQuery since The Ajax Experience, one of my fellow developers at PSU has been checking the toolkit out. In her searches for documentation found Visual jQuery, a nice graphical/textual categorized API for the jQuery toolkit! Its a pretty snazzy learning tool if you aren’t already familiar with all the functions jQuery has to offer (found in the jQuery API). [...]