95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets
If you’re serious about creating state of the art dynamic web solutions using jQuery this is the right place for you! This article will briefly introduce you to the Javascript framework jQuery and then provide excellent examples of the low hanging fruits waiting for you if you’re starting to use jQuery. jQuery is just one of several frameworks that all have powerful features. Why focus on Javascript frameworks anyway? Because they provide NEED TO HAVE functionality out of the box that can be accessed so easily you wont believe it.
Relations
- 10+ JQuery tutorials for working with HTML forms
- 30+ Essential Javascript Framework Supported Navigation Techniques
- 30+ Useful Scripts To Enhance Header Navigation (Drop-Down Menu)
A Javascript framework, jQuery
Common to most of the Javascript frameworks available is that they dramatically reduce the amount of code that needs to be written compared to pure Javascript. This leads to less development time, more readable code and code that is generally easier to maintain and extend. Generally one of the main purposes of using a Javascript framework is to avoid dealing with browser differences yourself and that part should not be underestimated.
This article will focus on jQuery only as it is too hard to cover more than one Javascript Framework in a single article. The other major frameworks are (may cover these in future articles): prototype (and script.aculo.us), Dojo and mootools. These are all great and worth considering but currently jQuery seams to lead on terms popularity. jquery.com have an alexa rank close to 2000 indicating massive traffic. Further some of the largest software vendors use it in their development platforms.
Lets take a look at JQuery
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.jQuery is designed to change the way that you write JavaScript.”
Main features of jQuery
The jQuery Library provides a general-purpose abstraction layer for common web oriented scripting.
- DOM element selections using the cross-browser open source selector engine Sizzle
Without encapsulating DOM access many lines of traditional javascript code must usually be written for even simple tasks. jQuery chages this completely with a robust and efficient selector mechanism. - DOM traversal and modification (including support for CSS 1-3 and basic XPath)
jQuery is using CSS selectors to for locating page elements, this is good news for web designers as knowing CSS makes a good starting point for using jQuery. - Events, responding to user actions
The jQuery Library provides an elegant approach to catch and interpret user events like clicking, mouse movement etc. and at the same time it removed complexity of browser differences. - CSS manipulation
CSS is powerful but as most browsers still interpret it differently it is hard to implement. jQuery offers a standard approach to shield developers from browser differences. - Effects and animations
jQuery offers fascinating features for animating changes made to the web page and it is done with only a few lines of code - Retrieving information from the server without refreshing the page, also known as Ajax.
jQuery removes the browser specific complexity from implementing ajax into your web pages making it possible to focus on the actual functional task at hand. - Extensibility
- Utilities – such as browser version and the each function.
- JavaScript Plugins
Getting started resources
If you’re new to jQuery this is where you get started. Download the Library and load one of the getting started guides. It’s not hard just try it. In the bottom of the article We have linked to a few books that you may consider reading to get more solid learning.
- Download jQuery
- jQuery Documentation
- Browser Compatibility
- How jQuery Works (official getting started guide)
A basic introduction to jQuery and the concepts that you need to know to use it. - Getting Started with jQuery
Goes through the basics of jQuery, all the way up to building plugins. - jQuery For Designers
Examples of writing Unobtrusive JavaScript to add simple behavior to a web page. - Live Examples of jQuery
An interactive demonstration of the basics behind jQuery. - jQuery Plugin Development – 10 Tutorials To Get Started
- jQuery and JavaScript Coding: Examples and Best Practices
- jQuery Cheat sheets are always nice to have
oscarotero jquery 1.3 (as wallpaper)
colorcharge jQuery 1.2
Quick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.
jQuery Cheat Sheet 1.2 - Simple Guide: How To Get Started With jQuery (Part One)
- Selectors, Animation, and AJAX – jQuery Tutorial And Examples (Part Two)
- Companies and organisations using jQuery: Google, Dell, Bank of America, Digg, NBC, CBS, Wordpress, Mozilla, Drupal, Technorati. More Sites Using jQuery
General Utilities
Load the framework from Google Code
Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it’ll load very quickly from Google’s CDN and most importantly it’ll already be cached if the user has visited a site which delivers it from Google Code.
Animation
Marquee
Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it’s built directly in to the browser). So let’s solve this with JavaScript.
Demo
Video tutorial showing how to create animations using jQuery queue/dequeue. queue & dequeue are a pair of core data utilities that help you to add your own bespoke to animations.
QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler
QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.
When using slideDown depending on the layout of your page, you could still see the jumping effect, regardless of whether you fix the padding around the element.This tutorial will create sliding effect when link is pressed.
Animate your message boxes with jQuery
An article on creating message boxes. You should really take care about it.
The idea is more than simple. Let’s animate message box that is being shown, and blow it away after we read it.
Animation Jump – quick tip
The way the slide animation works is it animates the height CSS property of the element. The problem occurs if the element being animated has a margin or padding.
This is because when the element shifts from display: none to a tiny height (or width) and visa versa, the padding (or margin) jumps in to view, causing the real height to be height + padding + margin.
As of jQuery 1.3 this fix is no longer required as jQuery height animation also animates the padding and margin