<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../scripts/jquery.js"><\/script>')</script>
While this method is a bit more complicated than simply serving jQuery from your server, you gain speed and bandwidth by using Google's CDN. The first line attempts to load the jQuery library. If it fails, then the second line will grab it off your server.
I read over and over that the above method is the best way to add jQuery because your users will be able to load a cached copy off their own machine instead of having to download it. However, also read someone stating that the caching doesn’t work. What I can say for certainty, Dreamweaver loads a page slower when using the CDN method shown above. So, during development I include it using:
<script type="text/javascript" src="../scripts/jquery.js"></script>
and then, if I think of it, switch it the CDN style for Production rollout.
It is a JavaScript library that makes it easy to work with DOM elements on your web page.
Starting with version 2.0, it will not longer support IE8 and older. Instead, use 1.9 if you need to support those old browsers.
Pretty much everything you do starts with selecting the DOM element you want to work with, and then do something with it. The selection takes the form:
$(' css selector ').method();
Instead of using jQuery to do the DOM selection, you may find it easier to use straight Javascript instead.
jQuery permits DOM node selection using CSS selector syntax, e.g.
// find all paragraphs with the class "summary" in the article with ID "first"
var n = $("article#first p.summary");
The native equivalent is:
var n = document.querySelectorAll("article#first p.summary");
document.querySelectorAll is implemented in all modern browsers and IE8 (although that only supports CSS2.1 selectors). jQuery has additional support for more advanced selectors but, for the most part, it'll be running document.querySelectorAll inside the $() wrapper.
Native JavaScript also provides four alternatives which will almost certainly be faster than querySelectorAll if you can use them:
document.querySelector(selector) — fetches the first matching node only
document.getElementById(idname) — fetches a single node by its ID name
document.getElementsByTagName(tagname) — fetches nodes matching an element (e.g. h1, p, strong, etc).
document.getElementsByClassName(class) — fetches nodes with a specific class name
The getElementsByTagName and getElementsByClassName methods can also be applied to single nodes to limit the result to descendants only, e.g.
var n = document.getElementById("first");
var p = n.getElementsByTagName("p");
22 Most Popular jQuery Plug-ins of 2011
Over the years, jQuery created several ways to attach events to DOM objects such as .live(), .delegate(), .click(), and .bind(). Since version 1.7, the .on() function can handle all your needs.
There are two primary ways of attaching events, direct (the element must already exist on the page when .on() is called) and delegated (for any current or future elements).
$('table td').on('click', function() { //do this });
If there are 4,000 cells in the table, then there will be 4,000 attachments made. That may be an unacceptable performance hit in which case the next method would be better.
$('table').on('click', 'td', function() { //do this });
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.
While doing common operations, you don't need to call the element every time you want to manipulate it. If you're doing several manipulations in a row, use chaining, so jQuery won't need to get the element twice.
Instead of this:
$("#mydiv").hide();
$("#mydiv").css("padding-left", "50px");
Use this:
$("#mydiv").hide().css("padding-left", "50px");
This is one of the most important performance tips. If you'll call an element at least twice, you should cache it. Caching is just saving the jQuery selector in a variable, so when you need to call it again you'll just reference the variable and jQuery won't need to search the whole DOM tree again to find your element.
/* you can use it this way because almost every jQuery function returns
the element, so $mydiv will be equal to $("#mydiv"); also it's good to
use the $mydiv so you know it's a jQuery caching var */
var $mydiv = $("#mydiv").hide();
// lot of cool stuff going on here
$mydiv.show();
Take a look at these methods when developing a web app.
I'll expound upon these at a later date...