This vector of values adds 2pixel margin to every image that has its class set to thumb [<img src=’…’ class=’thumb’>]. This approach simplifies programming eliminating the need of for/do-while programming logic in many situations. This compactness of jQuery has 3 advanatages – 1)shorter code for developers creating widgets and functions; 2)more understandable and approachable for designers as well as developers, and 3)more customizable for designers – who just need to learn a few core properties for a widget/function to change its behaviour/styling profoundly.
2)jQuery integrates with and implements both CSS and HTML better than most browsers. For a long time it has been used as a hack that allows developers to bring the various retarded versions of IE up to scratch for robust cross browser usage. This commitment to standards continues in jQuery with HTML5 and CSS3.
3)jQuery has a separate set of UI routines which implement a very good set of standard browser widgets [accordion, tabs, dialogs, etc] . One can do a broad range of Web UI tasks using the core jQuery plugins.
4)jQuery also supports theming and a standardized plugin architecture. The themes and plugins currently number in the hundreds, are free, and are very effectively suppliment the core jQuery widgets and themes.
Also it does not hurt that jQuery is free and open supporting both the MIT and Gnu licenses. Finally the elegant simplicity of the code is no small attraction. For example, the following is a demo of jQuery code in action in a WordPress blog [jQuery is embedded in most WordPress themes]:
jQuery UI – adds a range of UI-oriented properties like draggable, dropable, resizable, selectable and sortable. Further, the jQuery UI provides a number of widgets including accordion, datapicker, tabs, etc. But the real gold rush is the hundreds of jQuery plugins and widgets for every aspect of your interface design - see here for the plugin search page. This is a jQuery Tab widget coded to work in WordPress as an example of what jQuery UI and widgets can do with CMS like Drupal, Joomla, and WordPress.
The Web development community has responded by adopting jQuery into a number of software tools. For example, Apple, Google, Microsoft, HP/Palm, Nokia among others use jQuery in their Operating System and Web tools. Google provides a library with up-to-date compressed version on its servers at:
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js – the core jQuery code
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js – the jQuery UI routines
so find the latest version of jQuery by just checking with the Google Library. Many users report this library provides a fast and stable point of reference as the Google Library contains a full roster of older versions of jQuery routines. Mediawiki and Drupal load up the core jQuery routines natively in their CMS. WordPress.com includes the Core jQuery natively[but not in the downloaded version of WordPress, users must provide their own linkage to the jQuery libraries on their websites] and Joomla provides a simple and effective extension for its CMS.
jQuery 1.6 is out the door yesterday. jQuery 1.5 released on January 11. 2011. This gives you an idea of the fast improvements and release cycle, less than 5 months between major point releases. John Resig, jQuery creator and lead developer on the Core Team, certainly has it right when he says on the jQuery blog congratulations are in order for the jQuery development team. This also gives an idea of how vibrant the development team and community around jQuery is.
There are a number of improvements in jQuery 1.60. Rarely do you lead off with speed improvements but some of the numbers for vital jQuery methods are impressive:
Google’s Chrome continues to lead the pack in improved throughput but Firefox and Safari are also delivering as well. This is just one of several key speed-ups – see here for details. But there are a number of other refinements:
attr() allows setting Bollean properties directly
attr(), val() – have new extensibility hooks for fine control
css() – allows changing values relatively, like $(“#item”).css(“left”, “+=10px”);
map() – allows mapping out properties of an jQuery object straight forwardly
deferreds – processing of these important timing properties is simplified notably.
selector – improvements in find(), is(), closest() functions so traversing is more robust.
animations – improved syncing, performance, and clearing multiple animations
holdReady() – function allows precise control of startup of jQuery routine
In addition there were scores of bug fixes across the whole range of jQuery Core functions and methods. Truly proof of the Agile development schedule kept by the jQuery Core team.
Google Trends confirms jQuery’s popularity in the Web Development community:
In addition the jQuery community is actively working on key improvements in a number of areas. The key planning insights are here. They indicate development in the following areas:
Finally,one can see at the jQuery blog a strong awareness of the state of the art in UI controls and widget design that serves the jQuery development team well. This UI list is also a great first cut at an essential jQuery plugins control list. However, there is a matter of concern. If you check the jQuery Blog and Forum, you will find many references to HTML5. But there does not appear to be spearhead group that is advocating for usage of key HTML5 capabilities like Canvas+SVG or Web SQL database or local data storage or multi-touch operations plus other key HTML5 features. Given the paramount role Steve Jobs has reserved for HTML5 on his smartphones and tablets, it would appear that HTML5 should play a more pivotal role in jQuery planning.
Caution: Construction Ahead
jQuery has been a undoubted fast success story. But the quick success has also taken its toll. There is a need for redesign/refactoring in the face of new challenges like HTML5 and multi-touch + gestures with the whole slew of new events and coding methods associated with them. Thus the jQuery UI is undergoing redesign that will obsolete code in jQuery UI 1.8 and earlier. See here for all the guidelines and emerging details.
On line documentation for jQuery is remarkably good. There are Getting Started guides along with the demos and sample data. jQuery sites have improved their documentation notably:
jQuery Core – actually the place to start if looking for docs on all jQuery routines
jQuery UI – covers getting started, the API, widgets and support sites
jQuery Plugins – this web page is devoted to finding the exact plugin you need from hundreds of rated plaugins. To find out how to write a plugin
jQuery Mobile – is relatively sparse but has the virtue of being written in itself. So using Google Chrome as browser and Chrome debugger resources panel – one can get a shipload of insights on how the interface works.
jQuery Forum – covers all for areas plus a dozen specialized topics and is very active [thousands queries and replies for all 4 major areas above].
jQuery Blog – come here to see official announcements and jQuery planning + strategy.
Cheatsheet Online for jQuery – colorful, complete and up to date for Core jQuery 1.5x
jQuery4U – is a tutorial site crammed with tips and plugin reviews primarily on Core and UI. Checkout their top 10 plugins for 2010 and great tutorials.
Learning jQuery – has nearly 100 intermediate to advanced tutorials on jQuery
NetTuts – has state of the art tutorials for sale at $2-10/each
Smashing Magazine – is chock full of helpful tutorials for jQuery, here is the top 40 tips
SpeckBoy Design Mag – has a great series of jQuery tips centering on category of widgets
Templating – thorough tutorial on whats happening in this fast changing jQuery area
WebToolHub – lots of jQuery and other Web tool tips and links
Getting Started in jQuery: The Real Deal
jQuery Books and Tutorials for Designers
Designers are in the nice position of needing to know how to use and customize the hundreds of jQuery plugins and functions but not how to code in detail JavScript. The knowledge of when and how to use $(“#details”).toggle(); will definitely help but will not be essential for designers as much as thorough knowledge of CSS and HTML.
CSS in Easy Steps, by Mike McGrath – the fastest way to learn CSS [or come up to speed again]. This 192 page book summarizes CSS with very clear examples and tips plus a 6 page cheat sheet in back. Remember this book, coupled with W3schools Try-ItYourself with live CSS test edits, is one of the fastest ways to learn or get re-acquainted with CSS.
Stunning CSS3: A project-based guide to the latest in CSS, by Zoe Mickley Gillenwater – you need to read this book to come up to speed in CSS3 and all the new features like media queries [enabling output to different devices like a mobile phone, tablet, netbook and fullscreen PC] , multiple column control methods, graphics using CSS to bypass image buttons, and new selectors to simplify complex data layouts. Note – you must understand basic CSS syntax to navigate into these well explained CSS3 features. So check out CSS in Easy Steps to make sure you are up to speed. Again, for designers, this is Know-what-can- be-done knowledge as much as Know-exactly-how-to.
There are many good books on HTML, such as Head First HTML with CSS & XHTML and many others. But probably the most effective resources are online from Sitepoint HTML or W3Schools – the latter has the advanatge that you can and test the code out live.
jQuery has a lot of good books but one of the best references is David Flanagan’s jQuery Pocket Reference – truly read less learn more is in the jQuery spirit.
One of the best ways to learn the power of jQuery is to do it. Almost all of the External References to jQuery above have multiple demos and samples of the code for their demo plugins and widgets. Seeing by doing is part and parcel of the approach taken by David Flanagan in this 146 page pocket reference to Core jQuery 1.5x. By page 3, you are seeing snippets of jQuery selectors and methods in action. You are encouraged to try the code out and one of the best places is W3schools jQuery Tutorial with live edit and test.
The chapters on Element Getters and Setters, Altering Document Structure, Events and Event Handlers plus Animations and their effects are stocked full of great, small code samples. But the author provides cautions on what will not work in jQuery syntax, plus the distinctive value of various methods when they seem at first glance to be hard to distinguish.
The last 25 pages are devoted to a jQuery Quick Reference which is grouped in sections covering overview, selctor syntax, base methods/properties, selection methods, then element methods. These are followed by insertion and deletion methods, effects and animation methods, Ajax functions and Utility functions. Since one learns these in the same order there is a logic to the Quick reference
Jquery Books and Tutorials for Developers
Now be honest, developers. Are you up to speed on your, HTML, CSS, and DOM? You will need to be to take full advantage of jQuery. If not, the consider the following:
HTML, XHTML and CSS All-In-One For Dummies – ye Editor never thought he would be recommending a Dummies book as an IT reference but this one has all the virtues: clear and understandable, 1000 pages for the topic with lots of summary pages/tables, and its upto date as you can be in the frenetically changing Web standards world – December 2010 publication date. Also use online resources at W3school on HTML or SitePoint’s HTML Reference -they are both up-to-date, convenient to use, and comprehensive.
CSS: The Definitive Guide, by Eric Meyer – this is both a great reference resource and the definitive intro and background to CSS by a pioneer and evangelist for CSS.
jQuery Pocket Reference, by David Flanagan – combined with W3schools jQuery edit-test tool is one of the best ways to quickly come up to speed in jQuery. But then for the details go to jQuery in Action just below.
jQuery in Action, Second Edition The publication date of this book is July 2010, yet it is already 2 point updates behind jQuery Core 1.6 [though still up to date on jQuery UI]. get this book anyhow. The way Birbeault and Katz take you through jQuery is classic and stands the test of constant updates. First and foremost, the jQuery development team keeps backward changes to a minimum so script for jQuery 1.2x to 1.5x run unchanged in jQuery 1.6 for most cases. Second the meat of the jQuery matter is the jQuery object as a vector and the power of jQuery selectors to help the developer to select exactly the elements on a web page for query and/or modification. Th authors have a wonderful set of jQuery lab page scripts that illustrate the power of jQuery in action. The Selectors lab page below is typical: