Aug 122012
 
Article Javascript

jQuery is a javascript library that gives the programmer the ability to perform changes to the content of a web page in an easy and cross-browser way. Besides, jQuery offers as well an easy interface for:

  • javascript event management
  • Animations
  • Ajax interactions (dynamic loading of content)

jQuery is the library of choice for some of the most relevant sites, such as  wordpress.com, twitter.com, wikipedia.org, microsoft.com or ibm.com

In this post we will comment the main characteristics of jQuery and how to make use of it.

A call to jQuery is written like this:

jQuery(selector).action()

where:

  • selector – is an expression to identify all the elements in the page that meet a given condition.
  • action – is the operation to be performed. The operation will be performed on all the elements selected by the selector.

Example: To change the background color of all the ‘<div>’ elements in the page:

jQuery installation

jQuery can be installed in our site simply by downloading it from the official jQuery website:

and loading it inside the <head> section in the pages where it is going to be used:

Using “$” as an alias to jQuery

The “$” symbol can be used as an alias to jQuery (“$” is a valid javascript variable name). In this case a call to  jQuery is written as:

However, if the web page is using also other libraries, it can happen that these libraries interfere with the definition of “$” as an alias to jQuery. If this happens, but we want to keep the “$” alias to jQuery (maybe because there is already a considerable amount of javascript code in our page making use of this alias), it is possible to define the “$” symbol locally as:

Selectors

The main types of jQuery selectors are:

Basic
  • $(‘div’), $(‘table’),… – Selects all elements in the page of a given html type
  • $(‘#theid’) – Selects the single element whose id matches the argument (in the example, id=”theid”)
  • $(‘.classname’) – Selects all the elements belonging to class “classname”
  • $(‘*’) – Selectes all elements in the document

It is also possible to specify several selectors separated with commas:

  • $(‘div, .classname’) – Selects all elements of type <div>, and all elements belonging to class “classname”
If we want to choose instead all elements of type <div> belonging to class “classname”, we use the “find()” method:
  • $(‘div’).find(‘.classname’)
Hierarchy
  • $(‘div table’) – Select all <table> elements that are descendants (one or more levels under) of elements of type <div>
  • $(‘div > table’) – Select all <table> elements that are children (immediate descendants ) of elements of type <div>
  • $(‘div + table’) – Select the first <table> element following a <div> element at the same level (sibling)
  • $(‘div ~ table’) – Select all <table> elements following a <div> element at the same level
Filters
  • $(‘li:first’),$(‘li:last’),$(‘li:not(li:first)’) – Selects the first or last element in a list, selects all elements in the list except the first
  • $(‘li:even’),$(‘li:odd’), $(‘li:eq(1)’), $(‘li:gt(2)’) – Selects elements in a list with index matching the selector. Elements in a list are numbered starting at index zero. For instance, the selector $(‘li:eq(1)’) selects the second (index=1) element in the list

There are also selectors to select elements based on their content, attributes, visibility, etc.

The url http://codylindley.com/jqueryselectors/ is a page where the different jQuery selectors can be tried.

HTML attributes and CSS classes

jQuery methods “.attr()” y “.removeAttr()” allow to edit the attributes of HTML elements.

Besides, the methods “.addClass()”, “.removeClass()” and “.toggleClass()” are available for the management of values of the “class” attribute. The “.hasClass()” method returns true if an element belongs to the given class.

Finally, the “.val()” method is available to retrieve and modify the value of elements of type <input>.

Actions

  • Retrieve the HTML content of assign new HTML content to the first element in the set of elements identified by the selector.

In the third form, the function is executed for each of the identified elements. The “index” argument is the index of the element to process in the array of identified elements, and “oldhtml” is the previous HTML content of the element.

  • Retrieve or assign the text content of the first element in the set of identified elements.

This method works in the same way as the  “.html()” method, but applies to the text inside the element, removing the HTML formatting if it exists.

  • Insert, add and replace HTML code

  • CSS style editing

Event management

The call to .on() is written as .on(event_types [, selector] [,data], function). This method associates the function passed as arguments with all the elements identified by the selector, for the event types specified. The following example associates to all elements of type <p> a function to write their content in bold face when they are clicked:

In previous versions of jQuery, The functionality provided by the .on(), .off() methods was implemented in other methods, now deprecated: .bind(), .unbind(), .live(), .die() and .delegate()
The following methods access the event handlers associated to keyboard and mouse events:

The mouseleave() event is only natively imlemented by Internet Explorer, and its functionality is emulated by jQuery for other browsers. The difference between mouseleave() and mouseout() is that mouseleave is only triggered when the cursor leaves the element to which it is attached (this is usually the behaviour that the programmer is looking for), whilst the mouseout event is also triggered when the cursor leaves any of its descendants, due to the bubbling of events to outer elements.

Other events:

In next posts we will review the possibilities that jQuery offers in animation effects and in the dynamic loading of data by means of Ajax, as well as the possibility to extend the functionality of Ajax with plugins, and the large library of already existing plugins.

Reference documentation

The complete documentation of the jQuery library is available at  docs.jquery.com

There is also an interesting set of slides about jQuery at jQuery: introduction for Developers

 Posted by at 7:03 am

 Leave a Reply

(required)

(required)