- Since John Resig released jQuery in 2006 (free and open-source), it's become the most widely used frontend scripting library worldwide, party thanks to its ease-of-use and "chaining" efficiency, which dramatically shortens your scripts. Example of JavaScript vs. jQuery:
// Standard, error-handled JavaScript code:
if( document.getElementById("homeLink") ) {
with( document.getElementById("homeLink") ) {
style.color = "red";
title = "Back home";
}
}
// With jQuery chaining, multiple statements on single line:
$("#homeLink").css("color","red").attr("title","Back home");
// jQuery advantage even greater for animation / looping through elements - Offshoot projects gained popularity as well: jQuery UI, to quickly build web interfaces (just like Yahoo UI, a common choice before that). jQuery Mobile is another library that transform specially written HTML5 documents into gracefully degrading mobile websites and applications.
- The Sizzle engine uses regular CSS selectors for elements, and supports pseudo-selectors:
// Add a special CSS class to the first paragraph:
$("p:first").addClass("firstPara"); - With no work on your part, jQuery's cross-browser support extends even to the dreaded IE6!
- You can mix-in regular JavaScript code; this snippet assigns a title to every link on the page:
var counter = 1;
$("a").each(function(){
this.title = "li # " + counter++ ;
}); - There are plenty of plugins, and you can easily develop your own (like implementing outerHTML).
- Here's the full listing of tutorials: read through it for a great overview, or refresh your
memory. For in-depth info, just click on the corresponding link! - Exit loops and each() functions with return and break statements when your condition is met.
- Check if an element contains another with the chilren().length property (single-line statement!)
- Check if an element exists in the document, when it loads or after adding elements to the page.
- Check if an element is visible, and where: above/below the fold, in currently visible scroll area...
- Implement cross-browser outerHTML into jQuery, with a single line of code and no plugin!
Email AOL Mail Gmail Hotmail Yahoo Mail MS Office Excel 2010 OneNote 2010 Outlook 2010 Word 2010 OS & Devices Kindle Fire Windows 7 Web Dev C# and .NET JavaScript jQuery