jQuery is a free JavaScript library created by John Resig.
jQuery library is focused on working and manipulating HTML elements and CSS properties on a web page. It also has Ajax utilities for dynamically making HTTP requests, and functions for working with objects, arrays, and events.
Most of the code you write with jQuery will run exactly the same on all the major browsers.
jQuery starting
To work with jQuery, you need to include the jQuery library in your HTML page, just as you would any other JavaScript source file.
You can download the latest version from
Download jQuery. Save the jQuery library on your server, in a file with the ".js" extension, then include it in your HTML document by using the following syntax (
in the HEAD section):
<script src="jquery_file.js"></script>
Or, instead of hosting the jQuery file on your own web server, an alternative method for including the jQuery library is via the Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
This tutorial uses the version released in May 2011 (
jQuery 1.6.1).
To can interact with HTML elements on a page, the script instructions must be executed after the elements have been loaded. To do that, we run the jQuery code within the "
document ready" handler.
Syntax:
<script src="jquery_file.js"></script>
$(document).ready(function() {
// all jQuery code goes here
});
- Almost everything you code in jQuery will be contained within "
document-ready" handler. Inside this "
ready()" function you can add any JavaScript code, like new variables, objects, for() loops, etc.
In the following example we do a simple alert test to ensure we've properly included the jQuery library:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple jQuery</title>
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
alert('Have a good life');
});
--></script>
</head>
<body>
HTML content
</body>
</html>
You can replace the
$() with
jQuery(); this is useful to avoid conflict in existing apps or when mixing with other JavaScript libraries.
Example:
<script type="text/javascript"><!--
jQuery(document).ready(function() {
alert('Have a good life');
});
--></script>
Selecting HTML elements in jQuery
The jQuery library allows you to select elements in your (X)HTML by wrapping them in
$("") (or
jQuery("") , you can also use single quotes), which is the jQuery wrapper.
For example, if you want to select all H3 elements, use:
$('h3') (or
jQuery('h3')).
If you want to select the element with
id="theid" , use
$('#theid').
The next example displays an Alert window with the content of a DIV with
id="div1":
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple select</title>
<script type="text/javascript"
src="jquery_library.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
var ctn = $('#div1').html(); // get the content of the element with ID "div1"
alert(ctn);
});
--></script>
</head>
<body>
<div id="div1">jQuery Tutorial</div>
<div id="div2">coursesweb.net/javascript/</div>
</body>
</html>
When you pass a jQuery selector string to $(), it returns a jQuery object that represents the set of matched elements.
The
html() function is a jQuery method that returns the HTML content of the object.
jQuery selectors are very much like the CSS selectors, here are some more examples:
$('*') - selects all elements.
$('div') - selects all HTML <div> tags.
$('#an_id') - selects one HTML tag with ID "an_id".
$('.a_class') - selects HTML tagss with class "a_class".
$('p#an_id') - selects HTML <p> tag with ID "an_id".
$('li.a_class') - matches all LI tags that possess a class name of "a_class".
$('li a') - selects all <a> tags within <li> elements.
$('div a.a_class') - selects anchors with class "a_class" that are nested in DIV items.
$('div.a_class p span') - select all <span> tags inside of <p> tags, which are themselves inside <div> with a class of "a_class".
jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate selectors:
$('p>a') - matches all anchors that are direct children of paragraphs.
$('a:first') - selects the first anchor on the page.
$('h3:last') - selects the last <h3> on the page.
$('input[type=text]') - selects inputs that have specified type.
$('p:odd') - selects all odd numbered paragraphs.
$('li:first-child') - selects each list item that's the first child in its list.
jQuery also allows the use of its own custom selectors. Here are some examples:
$(':button') - selects any button elements (inputs or buttons).
$(':radio') - selects radio buttons.
$(':checkbox') - selects checkboxes.
$(':checked') - selects checkboxes or radio buttons that are selected.
$(':header') - selects header elements (h1, h2, h3, etc.).
$(':contains("String")') - selects only objects that contains the text "String".
• jQuery can also select multiple tags in a single statement by separating the selectors with commas, in a single string.
For example, if we want to select every <h2>, <div> with
class="clas1", and <p> with
class="cls2", we'd use this selector:
$('h2, div.clas1, p.cls2')
- For a complete list with the selectors in jQuery, see the documentation
Selectors.
• To get the number of selected objects, use the
length property.
Syntax:
$('selector').length
Example:
<script type="text/javascript"><!--
$(document).ready(function() {
var div_nr = $('div').length; // get the number of DIVs on the page
alert(div_nr);
});
--></script>
<div id="div1">jQuery Tutorial</div>
<div id="div2">coursesweb.net/javascript/</div>
Events in jQuery
Events are actions and user interactions that occur on the web page. There are lots of events on a page, for example: when a user moves the mouse, or clicks a button, or when a browser window is resized, or the scroll bar moved.
Specific event handlers can be established to execute some instructions when an event happens, using the following sintax:
$('selector').event_handler(function() {
// do something here
// when the event specified by the "event_handler" occurs on the "selector"
});
Example:
<script type="text/javascript"><!--
$(document).ready(function() {
// register a click event for <div> tags
$('div').click(function() {
var div_txt = $(this).text(); // get the text which is in the clicked DIV
alert(div_txt);
});
});
--></script>
<div id="div1">jQuery Tutorial</div>
<div id="div2">coursesweb.net/javascript/</div>
- The instruction
$(this) returns the element that fired the event.
- The
text() method returns the text content of the object to which it is applied.
- The code inside function() will only run when an <div> is clicked.
To see the effect, click on each text line below
jQuery Tutorial
coursesweb.net/javascript/
• Here's some other common event-handlers you might use in jQuery:
blur - the blur event is triggered when an item loses focus.
focus - the focus event is triggered when an item gains focus.
hover - executes the instructions during the time the mouse is within the object.
mouseover - it is triggered when the mouse enters the element.
mousemove - event is sent when the mouse pointer moves inside the element.
keydown - it is sent when the user presses a key on the keyboard.
load - is triggered when an item and all sub-elements have been completely loaded.
resize - is sent to the window element when the size of the browser window changes.
scroll - is sent when the user scrolls to a different place in the item.
submit - is triggered when the user is attempting to submit a form.
select - is triggered when the user makes a text selection inside a <input type="text"> field, or a <textarea> boxe.
- For a complete list of events that can be used in jQuery, visit
jQuery Events.
You can add your jQuery code in an external ".js" file and include it in the HTML document, after the statement that include the jQuery library, using the same syntax.
<head>
<title>Page Title</title>
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript" src="your_code.js"></script>
</head>