jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within a web page using the following mark-up:
<script type="text/javascript" src="jQuery.js"></script>
jQuery can also be accessed, loaded, and run just as JavaScript has always been:
jQuery can also be loaded using the Google AJAX Libraries API with the following mark-up:<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.3.2"); </script>
You can also download last version of jQuery directly from the official site in the following way:
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
Microsoft hosted jQuery on its AJAX CDN (Content delivery networks) making it easy to add the support for jQuery library. CDN serves JavaScript libraries from one of thousands of geo-located edge-cache servers around the world hosted by Microsoft.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
jQuery interaction
jQuery has two styles of interaction:
- via the
$function, which is a factory method for the jQuery object. These functions, often called commands, are chainable; they each return the jQuery object - via
$.-prefixed functions. These are utility functions which do not work on the jQuery object per se.
A typical workflow for manipulation of multiple DOM nodes begins with the $ function being called with a CSS selector string, which results in the jQuery object referencing zero or more elements in the HTML page. This node set can be manipulated by applying instance methods to the jQuery object, or the nodes themselves can be manipulated. For example:
Example
...finds the union of all
div
tags with class attribute
test and all p
tags with CSS class
attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the
addClass and slideDown affect the referenced nodes.The methods prefixed with $. are convenience methods or affect global properties and behaviour. For example, the following is an example of the map function called each in jQuery:
$.each([1,2,3], function() { document.write(this + 1); });
... writes the numbers 234 to the document.
It is possible to perform browser-independent Ajax queries using $.ajax and associated methods to load and manipulate remote data.
... will request some.php from the server with parameters name=John and location=Boston and when the request is finished successfully, the success function will be called to alert the user.
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
Was this information helpful?
