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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
jQuery Basics

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8337)
  2. Read Excel file data in PHP - PhpExcelReader (56662)
  3. Drag and Drop with HTML5 attributes (3959)
  4. Using slideDown and SlideUp (1521)
  5. Add, Change, and Remove Attributes with jQuery (35993)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (399)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (317)
  3. Register and show online users and visitors (292)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (276)
  5. Insert, Select and Update NULL value in MySQL (182)