Here’s the deprecated functionality:

• These Selectors
  • XPath Descendant Selector: $(“div//p”)
  • XPath Child Selector: $(“div/p”)
  • XPath Parent Selector: $(“p/../div”)
  • XPath Contains Predicate Selector: $(“div[p]“)
  • XPath Attribute Selector: $(“a[@href]“)
• Calling clone() with an argument: $(“div”).clone(false);
• These Traversal Functions use the new .slice() instead):
  • $(“div”).eq(0);
  • $(“div”).lt(2);
  • $(“div”).gt(2);
• These Ajax Functions:
  • $(“#elem”).loadIfModified(“some.php”);
  • $.getIfModified(“some.php”);
  • $.ajaxTimeout(3000);
  • $(…).evalScripts();

Thankfully a number of those don’t effect me. I’ll have to comb through my code to get rid of the .gt, .lt, and .eq traversal functions as well as a few of the selectors…but other than that, I’m good to go. To find out more about workarounds for the above removed functionality, check the jQuery 1.2 release notes

Now…on to the good stuff.

New features!

• Selectors
  •  :has(selector)
  •  :header
  •  :animated
  • XPath Selector Plugin
• Attributes
  • .val() Overhaul
• Traversing
  • .map()
  • .prevAll() / .nextAll()
  • .slice()
  • .hasClass()
  • .andSelf()
  • .contents()
• Manipulation
  • .wrapInner() / .wrapAll()
  • .replaceWith() / .replaceAll()
  • Event Cloning
• CSS
  • .offset()
  • .height() / .width() for document and window
• Ajax
  • Partial .load()
  • Cross-Domain getScript
  • JSONP
  • .serialize() Overhaul
  • Disable Caching
• Effects
  • .stop()
  • %/em Animations
  • Color Animations
  • Relative Animations
  • Queue Control
  •  :animated
  • step: Function
• Events
  • Namespaced Events
  • .triggerHandler()
• Internals
  • Documentation Move
  • Expando Management

I have to say…it is a pretty snazzy release and I’ll begin implementing the new version shortly. w00t.

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.