WHY USE JQUERY?

jQuery doesn't do anything you cannot achieve with pure JavaScript. It is just a JavaScript file but estimates show it has been used on over a quarter of the sites on the web, because it makes coding simpler.

1: SIMPLE SELECTORS

As you saw in Chapter 5, which introduced the DOM, it is not always easy to select the elements that you want to. For example:

• Older browsers do not support the latest methods for selecting elements.
• IE does not treat whitespace between elements as text nodes, while other browsers do.

Such issues make it hard to select the right elements on a page across all major browsers.

Rather than learn a new way to select elements, jQuery uses a language that is already familiar to front-end web developers: CSS selectors. They:

• Are much faster at selecting elements
• Can be a lot more accurate about which elements to select
• Often require a lot less code than older DOM methods
• Are already used by most front-end developers

jQuery even adds some extra CSS-style selectors which offer additional functionality.

Since jQuery was created, modern browsers have implemented the querySelector() and querySelectorAll() methods to let developers select elements using CSS syntax. However, these methods are not supported in older browsers.

2: COMMON TASKS IN LESS CODE

There are some tasks that front-end developers need to do regularly, such as loop through the elements that have been selected.

jQuery has methods that offer web developers simpler ways to perform common tasks, such as:

• Loop through elements
• Add / remove elements from the DOM tree
• Handle events
• Fade elements into / out of view
• Handle Ajax requests

jQuery simplifies each of these tasks, and allows you to write less code to achieve them.

jQuery also offers chaining of methods (a technique which you will meet on p311). Once you have selected some elements, this allows you to apply multiple methods to the same selection.

jQuery's motto is “Write less, do more,” because it allows you to achieve the same goals but in fewer lines of code than you would need to write with plain JavaScript.

3: CROSS-BROWSER COMPATIBILITY

jQuery automatically handles the inconsistent ways in which browsers select elements and handle events, so you do not need to write cross-browser fallback code (such as that shown in the previous two chapters).

To do this, jQuery uses feature detection to find the best way to achieve a task. It involves the use of many conditional statements: if the browser supports the ideal way to achieve a task, it uses that approach; otherwise, it tests to see if it supports the next best option to achieve the same task.

This was the technique used in the last chapter to determine whether or not the browser supported event listeners. If event listeners were not supported, an alternative approach was offered (aimed at users of Internet Explorer 8 and older versions of IE).

Here, a conditional statement checks if the browser supports querySelector(). If it does, that method is used. If it doesn't, it checks to see if the next best option is supported and uses that instead.

JQUERY 1.9.X+ OR 2.0.X+

As jQuery developed, it built up a lot of code to support IE6, 7, and 8; which made the script bigger and more complicated. As version 2.0 of jQuery was approaching, the development team decided to create a version that would drop support for older browsers in order to create a smaller, faster script.

The jQuery team was, however, aware that many people on the web still used these older browsers, and that developers therefore needed to support them. For this reason, they now maintain two parallel versions of jQuery:

jQuery 1.9+: Encompasses the same features as 2.0.x but still offers support for IE6, 7, and 8

jQuery 2.0+: Drops support for older browsers to make the script smaller and faster to use

The functionality of both versions is not expected to diverge significantly in the short term.

The jQuery file name should contain the version number in it (e.g., jquery-1.11.0.js or jquery-1.11.0.min.js). If you don't do this, a user's browser might try to use a cached version of the file that is either older or newer - which could prevent other scripts from working correctly.

FINDING ELEMENTS

Using jQuery, you usually select elements using CSS-style selectors. It also offers some extra selectors, noted below with a ‘jQ’.

Examples of using these selectors are demonstrated throughout the chapter. The syntax will be familiar to those who have used selectors in CSS.

BASIC SELECTORS

*	All elements
element	All elements with that element name
#id	Elements whose id attribute has the value specified
.class	Elements whose class attribute has the value specified
selector1, selector2	Elements that match more than one selector (see also the .add() method, which is more efficient when combining selections)

HIERARCHY

ancestor descendant	An element that is a descendant of another element (e.g., li a)
parent > child	An element that is a direct child of another element (you can use * in the place of the child to select all child elements of the specified parent)
previous + next	Adjacent sibling selector only selects elements that are immediately followed by the previous element
previous ~ siblings	Sibling selector will select any elements that are a sibling of the previous element

BASIC FILTERS

:not(selector)	All elements except the one in the selector (e.g., div:not(‘#summary’))
:first	jQ     The first element from the selection
:last	jQ     The last element from the selection
:even	jQ     Elements with an even index number in the selection
:odd	jQ     Elements with an odd index number in the selection
:eq(index)	jQ     Elements with an index number equal to the one in the parameter
:gt(index)	jQ     Elements with an index number greater than the parameter
:lt(index)	jQ     Elements with an index number less than the parameter
:header	jQ     All <h1> - <h6> elements
:animated	jQ     Elements that are currently being animated
:focus	The element that currently has focus

CONTENT FILTERS

:contains(‘text’)	Elements that contain the specified text as a parameter
:empty	All elements that have no children
:parent	jQ      All elements that have a child node (can be text or element)
:has(selector)	jQ      Elements that contain at least one element that matches the selector (e.g., div:has(p) matches all div elements that contain a <p> element)

VISIBILITY FILTERS

:hidden	jQ      All elements that are hidden
:visible	jQ      All elements that consume space in the layout of the page Not selected if: display: none; height / width: 0; ancestor is hidden Selected if: visibility: hidden; opacity: 0 because they would take up space in layout

CHILD FILTERS

:nth-child(expr)	The value here is not zero-based e.g. ul li:nth-child(2)
:first-child	First child from the current selection
:last-child	Last child from the current selection
:only-child	When there is only one child of the element (div p:only-child)

ATTRIBUTE FILTERS

[attribute]	Elements that carry the specified attribute (with any value)
[attribute=‘value’]	Elements that carry the specified attribute with the specified value
[attribute!=‘value’]	jQ      Elements that carry the specified attribute but not the specified value
[attribute^=‘value’]	The value of the attribute begins with this value
[attribute=‘value’]	The value of the attribute ends with this value
[attribute*=‘value’]	The value should appear somewhere in the attribute value
[attribute|=‘value’]	Equal to given string, or starting with string and followed by a hyphen
[attribute~=‘value’]	The value should be one of the values in a space separated list
[attribute][attribute2]	Elements that match all of the selectors

FORM

:input	jQ      All input elements
:text	jQ      All text inputs
:password	jQ      All password inputs
:radio	jQ      All radio buttons
:checkbox	jQ      All checkboxes
:submit	jQ      All submit buttons
:image	jQ      All <img> elements
:reset	jQ      All reset buttons
:button	jQ      All <button> elements
:file	jQ      All file inputs
:selected	jQ      All selected items from drop-down lists
:enabled	All enabled form elements (the default for all form elements)
:disabled	All disabled form elements (using the CSS disabled property)
:checked	All checked radio buttons or checkboxes

DOING THINGS WITH YOUR SELECTION

Once you have seen the basics of how jQuery works, most of this chapter is dedicated to demonstrating these methods.

These two pages both offer an overview to the jQuery methods and will also help you find the methods you are looking for once you have read the chapter.

You often see jQuery method names written starting with a period (.) before the name. This convention is used in this book to help you easily identify those methods as being jQuery methods rather than built-in JavaScript methods, or methods of custom objects.

When you make a selection, the jQuery object that is created has a property called length, which will return the number of elements in the object.

If the jQuery selection did not find any matching elements, you will not get an error by calling any of these methods - they just won't do or return anything.

There are also methods that are specifically designed to work with Ajax (which lets you refresh part of the page rather than an entire page) shown in Chapter 8.

CONTENT FILTERS

Get or change content of elements, attributes, text nodes

GET/CHANGE CONTENT

.html()	p316
.text()	p316
.replaceWith()	p316
.remove()	p316

ELEMENTS

.before()	p318
.after()	p318
.prepend()	p318
.append()	p318
.remove()	p346
.clone()	p346
.unwrap()	p346
.detach()	p346
.empty()	p346
.add()	p338

ATTRIBUTES

.attr()	p320
.removeAttr()	p320
.addClass()	p320
.removeClass()	p320
.css()	p322

FORM VALUES

.val()	p343
.isNumeric()	p343

FINDING ELEMENTS

Find and select elements to work with & traverse the DOM

GENERAL

.find()	p336
.closest()	p336
.parent()	p336
.parents()	p336
.children()	p336
.siblings()	p336
.next()	p336
.nextAll()	p336
.prev()	p336
.prevAll()	p336

FILTER/TEST

.filter()	p338
.not()	p338
.has()	p338
.is()	p338
:contains()	p338

ORDER IN SELECTION

.eq()	p340
.lt()	p340
.gt()	p340

Once you have selected the elements you want to work with (and they are in a jQuery object), the jQuery methods listed on these two pages perform tasks on those elements.

DIMENSION/POSITION

Get or update the dimensions or position of a box

DIMENSION

.height()	p348
.width()	p348
.innerHeight()	p348
.innerWidth()	p348
.outerHeight()	p348
.outerWidth()	p348
$(document).height()	p350
$(document).width()	p350
$(window).height()	p350
$(window).width()	p350

POSITION

.offset()	p351
.position()	p351
.scrollLeft()	p350
.scrollTop()	p350

EFFECTS & ANIMATION

Add effects and animation to parts of the page

BASIC

.show()	p332
.hide()	p332
.toggle()	p332

FADING

.fadeIn()	p332
.fadeOut()	p332
.fadeTo()	p332
.fadeToggle()	p332

SLIDING

.slideDown()	p332
.slideUp()	p332
.slideToggle()	p332

CUSTOM

.delay()	p332
.stop()	p332
.animate()	p332

EVENTS

Create event listeners for each element in the selection

DOCUMENT/FILE

.ready()	p312
.load()	p313

USER INTERACTION

.on()

p326

There used to be methods for individual types of event, so you may see methods such as .click(), .hover(), .submit(). However, these have been dropped in favour of the .on() method to handle events.

A MATCHED SET / JQUERY SELECTION

When you select one or more elements, a jQuery object is returned. It is also known as a matched set or a jquery selection.

SINGLE ELEMENT

If a selector returns one element, the jQuery object contains a reference to just one element node.

This selector picks the <ul> element from the page. So the jQuery object contains a reference to just one node (the only <ul> element in the page):

Each element is given an index number. Here there is just one element in the object.

INDEX	ELEMENT NODE
0	ul

MULTIPLE ELEMENTS

If a selector returns several elements, the jQuery object contains references to each element.

This selector picks all the <li> elements. Here, the jQuery object has references for each of the nodes that was selected (each <li> element):

The resulting jQuery object contains four list items. Remember that index numbers start at zero.

INDEX	ELEMENT NODE
0	li#one.hot
1	li#two.hot
2	li#three.hot
3	li#four

JQUERY METHODS THAT GET AND SET DATA

Some jQuery methods both retrieve information from, and update the contents of, elements. But they do not always apply to all elements.

GET INFORMATION

If a jQuery selection holds more than one element, and a method is used to get information from the selected elements, it will retrieve information from only the first element in the matched set.

In the list example we have been using, the following selector chooses the four <li> elements from a list.

When you use the .html() method (which will be introduced on p316) to get information from an element, it will return the content of the first element in the matched set.

This will retrieve the content of the first list item, and store it in the variable called content.

To get a different element, you can use methods to traverse (p336) or filter (p338) the selection, or write a more specific selector (p302).

To get the content of all of the elements, see the .each() method (p324).

SET INFORMATION

If a jQuery selection holds more than one element, and a method is used to update information on the page, it will update all of the elements in the matched set, not just the first one.

When you use the .html() method (which you meet on p316) to update the element, it will replace the contents of each element in the matched set. Here, it updates the content of each item in the list.

This will update the content of all of the list items in the matched set with the word Updated.

To update just one element, you can use methods to traverse (p336) or filter (p338) the selection, or write a more specific selector (p302).

JQUERY OBJECTS STORE REFERENCES TO ELEMENTS

When you create a selection with jQuery, it stores a reference to the corresponding nodes in the DOM tree. It does not create copies of them.

As you have seen, when HTML pages load, the browser creates a model of the page in memory. Imagine your browser's memory is a set of tiles:

	Nodes in the DOM take up a tile
	Variables take up a tile
	Complex JavaScript objects may take several tiles because they hold more data

In reality, the items in the browser's memory are not spread out as they are in this diagram, but the diagram helps explain the concept.

When you create a jQuery selection, the jQuery object holds references to the elements in the DOM - it does not create a copy of them.

When programmers say that a variable or object is storing a reference to something, what it is doing is storing the location a piece of information in the browser's memory. Here, the jQuery object would know that the list items are stored in A4, B4, and C4. Again, this is purely for illustration purposes; the browser's memory is not quite as simple as a checkerboard with these locations.

The jQuery object is an array-like object because it stores a list of the elements in the same order that they appear in the HTML document (unlike other objects where the order of the properties is not usually preserved).

CACHING JQUERY SELECTIONS IN VARIABLES

A jQuery object stores references to elements.
Caching a jQuery object stores a reference to it in a variable.

To create a jQuery object takes time, processing resources, and memory. The interpreter must:

1. Find the matching nodes in the DOM tree
2. Create the jQuery object
3. Store references to the nodes in the jQuery object

So, if the code needs to use the same selection more than once, it is better to use that same jQuery object again rather than repeat the above process. To do this, you store a reference to the jQuery object in a variable.

Below, a jQuery object is created. It stores the locations of the <li> elements in the DOM tree.

$(‘li’);

A reference to this object is in turn stored in a variable called $listItems. Note that when a variable contains a jQuery object, it is often given a name beginning with the $ symbol (to help differentiate it from other variables in your script).

$listItems = $(‘li’);

Caching jQuery selections is similar to the idea of storing a reference to a DOM node once you have made a DOM query (as you saw in Chapter 5).

$(‘li[id!=”one”]’)
  .hide()
  .delay(500)
  .fadeIn(1400);

GETTING ELEMENT CONTENT

The .html() and .text() methods both retrieve and update the content of elements. This page will focus on how to retrieve element content. To learn how to update element content, see p316.

.html()

When this method is used to retrieve information from a jQuery selection, it retrieves only the HTML inside the first element in the matched set, along with any of its descendants.

For example, $(‘ul’).html(); will return this:

<li id=”one”><em>fresh</em> figs</li>
<li id=”two”>pine nuts</li>
<li id=”three”>honey</li>
<li id=”four”>balsamic vinegar</li>

Whereas $(‘li’).html(); will return this:

<em>fresh</em> figs

Note how this returns only the content of the first <li> element.

If you want to retrieve the value of every element, you can use the .each() method (see p324).

.text()

When this method is used to retrieve the text from a jQuery selection, it returns the content from every element in the jQuery selection, along with the text from any descendants.

For example, $(‘ul’).text(); will return this:

fresh figs
pine nuts
honey
balsamic vinegar

Whereas $(‘li’).text(); will return this:

fresh figspine nutshoneybalsamic vinegar

Note how this returns the text content of all <li> elements (including spaces between words), but there are no spaces between the individual list items.

To get the content from <input> or <textarea> elements, use the .val() method shown on p343.

UPDATING ELEMENTS

Here are four methods that update the content of all elements in a jQuery selection.

When the .html() and .text() methods are used as setters (to update content) they will replace the content of each element in the matched set (along with any content and child elements).

The .replaceWith() and .remove() methods replace and remove the elements they match (as well as their content and any child elements).

The .html(), .text(), and .replaceWith() methods can take a string as a parameter. The string can:

• Be stored in a variable
• Contain markup

When you add markup to the DOM, be sure to escape all untrusted content properly on the server. Both the .html() and .replaceWith() methods carry the same security risks as using the DOM's innerHTML property. See p228 - p231 on XSS.

.html()

This method gives every element in the matched set the same new content. The new content may include HTML.

.text()

This method gives every element in the matched set the same new text content. Any markup would be shown as text.

.replaceWith()

This method replaces every element in a matched set with new content. It also returns the replaced elements.

.remove()

This method removes all of the elements in the matched set.

USING A FUNCTION TO UPDATE CONTENT

If you want to use and amend the content of the current selection, these methods can take a function as a parameter. The function can be used to create new content. Here the text from each element is placed inside <em> tags.

1. return indicates that content should be returned by the function.

2. <em> tags are placed around the text content of the list item.

3. this refers to the current list item. $(this) places that element in a new jQuery object so that you can use jQuery methods on it.

INSERTING ELEMENTS

Inserting new elements involves two steps:
1: Create the new elements in a jQuery object
2: Use a method to insert the content into the page

You can create new jQuery objects to hold text and markup that you then add to the DOM tree using one of the methods listed in step 2 on the right.

If you create a selection that returns multiple elements, these methods will add the same content to each of the elements in the matched set.

When adding content to the DOM, make sure you have escaped all untrusted content properly on the server. (See p228 - p231 on XSS.)

1: CREATING NEW ELEMENTS IN A JQUERY OBJECT

The following statement creates a variable called $newFragment and stores a jQuery object in it. The jQuery object is set to contain an empty <li> element: var $newFragment = $(‘<li>’);

The following statement creates a variable called $newItem and stores a jQuery object in it. This jQuery object in turn contains an <li> element with a class attribute and some text:
var $newItem = $(‘<li class=”new”>item</li>’);

2: ADDING THE NEW ELEMENTS TO THE PAGE

Once you have a variable holding the new content, you can use the following methods to add the content to the DOM tree:

.before()

This method inserts content before the selected element(s).

.after()

This method inserts content after the selected element(s).

.prepend()

This method inserts content inside the selected element(s), after the opening tag.

.append()

This method inserts content inside the selected element(s), before the closing tag.

There are also .prependTo() and .appendTo() methods. They work the other way around from .prepend() and .append(). So:

a.prepend(b) adds b to a
a.prependTo(b) adds a to b
a.append(b) adds b to a
a.appendTo(b) adds a to b

GETTING AND SETTING ATTRIBUTE VALUES

You can create attributes, or access and update their contents, using the following four methods.

You can work with any attribute on any element using the attr() and removeAttr() methods.

If you use the attr() method to update an attribute that does not exist, it will create the attribute and give it the specified value.

The value of the class attribute can hold more than one class name (each separated by a space). The addClass() and removeClass() methods are very powerful because they let you add or remove an individual class name within the value of the class attribute (and they do not affect any other class names).

.attr()

This method can get or set a specified attribute and its value. To get the value of an attribute, you specify the name of the attribute in the parentheses.

$(‘li#one’).attr(‘id’);

To update the value of an attribute, you specify both the attribute name and its new value.

$(‘li#one’).attr(‘id’,‘hot’);

.removeAttr()

This method removes a specified attribute (and its value). You just specify the name of the attribute that you want to remove from the element in the parentheses.

$(‘li#one’).removeAttr(‘id’);

.addClass()

This method adds a new value to the existing value of the class attribute. It does not overwrite existing values.

.removeClass()

This method removes a value from the class attribute, leaving any other class names within that attribute intact.

These two methods are another good example of how jQuery adds helpful functionality commonly needed by web developers.

GETTING & SETTING CSS PROPERTIES

The .css() method lets you retrieve and set the values of CSS properties.

To get the value of a CSS property, you indicate which property you want to retrieve in parentheses. If the matched set contains more than one element, it will return the value from the first element.

To set the values of a CSS property, you specify the property name as the first argument in the parentheses, then a comma, followed by its value as the second argument. This will update every element in the matched set. You can also specify multiple properties in the same method using object literal notation.

Note: In the method used to set an individual property, the property name and its value are separated by a comma (because all parameters in a method are separated by a comma).

In the object literal notation, properties and their values are separated by a colon.

HOW TO GET A CSS PROPERTY

This will store the background color of the first list item in a variable called backgroundColor. The color will be returned as an RGB value.

var backgroundColor = $(‘li’).css(‘background-color’);

HOW TO SET A CSS PROPERTY

This will set the background color of all list items. Note how the CSS property and its value are separated using a comma instead of a colon.

$(‘li’).css(‘background-color’, ‘#272727’);

When dealing with dimensions that are specified in pixels, you can increase and decrease the values using the += and -= operators.

$(‘li’).css(‘padding-left’, ‘+=20’);

SETTING MULTIPLE PROPERTIES

You can set multiple properties using object literal notation:

• Properties and values are placed in curly braces
• A colon is used to separate property names from their values
• A comma separates each pair (but there is not one after the last pair)

This sets the background color and typeface for all list items.

$(‘li’).css({
   ‘background-color’: ‘#272727’,
   ‘font-family’: ‘Courier’
});

WORKING WITH EACH ELEMENT IN A SELECTION

jQuery allows you to recreate the functionality of a loop on a selection of elements, using the .each() method.

You have already seen several jQuery methods that update all of the elements in a matched set without the need for a loop.

There are, however, times when you will want to loop through each of the elements in the selection. Often this will be to:

• Get information from each element in the matched set.
• Perform a series of actions on each of the elements.

The .each() method is provided for this purpose. The parameter of the .each() method is a function. This could be an anonymous function (as shown here) or a named function.

.each()

Allows you to perform one or more statements on each of the items in the selection of elements that is returned by a selector - rather like a loop in JavaScript.

It takes one parameter: a function containing the statements you want to run on each element.

this or $(this)

As the .each() method goes through the elements in a selection, you can access the current element using the this keyword.

You also often see $(this), which uses the this keyword to create a new jQuery selection containing the current element. It allows you to use jQuery methods on the current element.

1. The jQuery selection contains all of the <li> elements.

2. .each() applies the same code to each element in the selection.

3. An anonymous function is run for each of the items in the list.

Since this refers to the current node, if you want to access a property of that node, e.g., that element's id or class attributes, it is better to use plain JavaScript to access those attributes:
ids = this.id;

It is more efficient than writing ids = $(this).attr(‘id’); because this would involve the interpreter creating a new jQuery object, and then using a method to access info that is available as a property.

EVENT METHODS

The .on() method is used to handle all events. Behind the scenes, jQuery handles all of the cross-browser issues you saw in the last chapter.

Using the .on() method is no different than using any other jQuery method; you:

• Use a selector to create a jQuery selection.
• Use .on() to indicate which event you want to respond to. It adds an event listener to each element in the selection.

.on() was introduced in v 1.7 of jQuery. Prior to that, jQuery used separate methods for each event, e.g., .click() and .focus(). You may come across them in older code, but you should only use the .on() method now.

1. The jQuery selection contains all of the <li> elements.

2. The .on() method is used to handle events. It needs two parameters:

3. The first parameter is the event you want to respond to. Here it is the click event.

4. The second parameter is the code you want to run when that event occurs on any element in the matched set. This could be a named function or an anonymous function. Above, it is an anonymous function that adds a value of complete to the class attribute.

You will see more advanced options for this method on p330.

JQUERY EVENTS

Some of the most popular events that .on() deals with are listed below. jQuery also added some extras to make life easier, such as ready, which fires when the page is ready to be worked with. These are noted with a pink asterisk:*

THE EVENT OBJECT

Every event handling function receives an event object. It has methods and properties related to the event that occurred.

Just like the JavaScript event object, the jQuery event object has properties and methods that tell you more about the event that took place.

If you look at the function that is called when the event occurs, the event object is named in the parentheses. Like any other parameter, this name is then used within the function to refer to the event object.

The example on the right uses the letter e as shorthand for the event object. However, as noted in the previous chapter, you should be aware that this shorthand is also often used for the error object.

1. Give the event object a parameter name.

2. Use that name in the function to reference the event object.

3. Access the properties and methods of the object using the familiar dot notation (the member operator).

ADDITIONAL PARAMETERS FOR EVENT HANDLERS

The .on() method has two optional properties that let you: Filter the initial jQuery selection to respond to a subset of the elements; Pass extra information into the event handler using object literal notation.

Here you can see two additional properties that can be used with the .on() method.

When square brackets are used inside a method, they signify that the parameter is optional.

Leaving out a parameter written in square brackets will not stop the method working.

1. This is the event(s) that you want to respond to. If you want to respond to more than one event, you can provide a space-separated list of event names, e.g., ‘focus click’ will work on both focus and click.

2. If you just want to respond to the event happening on a subset of the elements in the initial jQuery selection, you can provide a second selector that will filter its descendants.

3. You can pass extra information to the function that is called when the event is triggered. This information is passed along with the event object (e).

4. This is the function that should be run when the specified events occur on one of the elements in the matched set.

5. The function is automatically passed the event object as a parameter, as you saw on the previous two pages. (Remember, if you use it you must give it a name in the parentheses.)

Older jQuery scripts may use the .delegate() method for delegation. However, since jQuery 1.7 .on() is the preferred approach to delegation.

EFFECTS

When you start using jQuery, the effects methods can enhance your web page with transitions and movement.

Here you can see some of the jQuery effects that show or hide elements and their content. You can animate them fading in and out, or slide them up and down.

When an element that was previously hidden is shown, faded in, or slides into view, the other elements on the page may move to make space for it.

When an element is hidden, has been faded out, or has slid out of view, the other elements on the page can move into the space these elements took up.

Methods with toggle in their name will look at the current state of the element (whether it is visible or hidden) and will switch to the opposite state.

Increasingly it is possible to create animations using CSS3. They are often faster than their jQuery counterparts, but they only work in recent browsers.

BASIC EFFECTS

FADING EFFECTS

SLIDING EFFECTS

CUSTOM EFFECTS

ANIMATING CSS PROPERTIES

The .animate() method allows you to create some of your own effects and animations by changing CSS properties.

You can animate any CSS property whose value can be represented as a number, e.g., height, width, and font-size. But not those whose value would be a string, such as font-family or text-transform.

The CSS properties are written using camelCase notation, so the first word is all lowercase and each subsequent word starts with an uppercase character, e.g.: border-top-left-radius would become borderTopLeftRadius.

The CSS properties are specified using object literal notation (as you can see on the right-hand page). The method can also take three optional parameters, shown below.

1. speed indicates the duration of the animation in milliseconds. (It can also take the keywords slow and fast.)

2. easing can have two values: linear (the speed of animation is uniform); or swing (speeds up in the middle of the transition, and is slower at start and end).

3. complete is used to call a function that should run when the animation has finished. This is known as a callback function.

EXAMPLES OF JQUERY EQUIVALENTS OF CSS PROPERTY NAMES

TRAVERSING THE DOM

When you have made a jQuery selection, you can use these methods to access other element nodes relative to the initial selection.

Each method finds elements that have a different relationship to those that are in the current selection (e.g., parents or children of the current selection).

The .find() and .closest() methods both require a CSS-style selector as an argument.

For the other methods, the CSS-style selector is optional. But if a selector is provided, both the method and selector must match in order for the element to be added to the new selection.

For example, if you start with a selection that contains one list item, you could create a new selection containing the other items from the list using the .siblings() method.

If you added a selector into the method such as this: .siblings(‘.important’) then it would find only siblings with a class attribute whose value included important.

SELECTOR REQUIRED

SELECTOR OPTIONAL

If the original selection contains multiple elements, these methods will work on all of the elements in the selection (which can result in quite an odd selection of elements). You may need to narrow down your initial selection before traversing the DOM.

Behind the scenes, jQuery will handle the cross-browser inconsistencies involved in traversing the DOM (such as whitespace nodes being added by some browsers).

ADD & FILTER ELEMENTS IN A SELECTION

Once you have a jQuery selection, you can add more elements to it, or you can filter the selection to work with a subset of the elements.

The .add() method allows you to add a new selection to an existing one.

The second table on the right shows you how to find a subset of your original selection.

The methods take another selector as a parameter and return a filtered matched set.

The items in this table that begin with a colon can be used wherever you would use a CSS-style selector.

The :not() and :has() selectors take another CSS-style selector as a parameter. There is also a selector called :contains() that lets you find elements that contain specific text.

The .is() method lets you use another selector to check whether the current selection matches a condition. If it does, it will return true. This is helpful in conditional statements.

ADDING ELEMENTS TO A SELECTION

FILTERING WITH A SECOND SELECTOR

The following two selectors are equivalent:
$(‘li’).not(‘.hot’).addClass(‘cool’);
$(‘li:not(.hot)’).addClass(‘cool’);
In browsers that support querySelector() / querySelectorAll(), :not() is faster than .not() and :has() is faster than .has()

TESTING CONTENT

FINDING ITEMS BY ORDER

Each item returned by a jQuery selector is given an index number, which can be used to filter the selection.

The jQuery object is sometimes referred to as being an array-like object because it assigns a number to each of the elements that is returned by a selector. That number is an index number, which means it starts at 0.

You can filter the selected elements based on this number using methods or these additional CSS-style selectors that jQuery has added.

Methods are applied to the jQuery selection, whereas selectors are used as part of the CSS-style selector.

On the right, you can see a selector which picks all of the <li> elements from the list example used throughout this chapter. The table shows each list item and its corresponding index number. The example on the next page will use these numbers to select list items and update their class attributes.

FINDING ELEMENTS BY INDEX NUMBER

$(‘li’)

SELECTING FORM ELEMENTS

jQuery has selectors that are designed specifically to work with forms, however, they are not always the quickest way to select elements.

If you use one of these selectors on its own, jQuery will examine each element in the document to find a match (using code in the jQuery file, which is not as quick as CSS selectors).

Therefore, you should narrow down the part of the document the script needs to look through by placing an element name or other jQuery selector before using the selectors shown on this page.

You can also access elements in a form using the same selectors used to pick any element in jQuery. This will often be the faster option.

It is also worth noting that, because jQuery handles inconsistencies in the way browsers treat whitespace, it is easier to traverse between form elements using jQuery than it is when you are using plain JavaScript.

SELECTORS FOR FORM ELEMENTS

FORM METHODS & EVENTS

RETRIEVE THE VALUE OF ELEMENTS

OTHER METHODS

EVENTS

When submitting a form, there is also a helpful method called .serialize() which you will learn about on p394-p395.

The .val() method gets the value of the first <input>, <select>, or <textarea> element in a jQuery selection. It can also be used to set the value for all matching elements.

The .filter() and .is() methods are commonly used with form elements. You met them on p338.

$.isNumeric() is a global method. It is not used on a jQuery selection; rather, the value you want to test is passed as an argument.

All of the event methods on the left correspond to JavaScript events that you might use to trigger functions. As with other jQuery code, they handle the inconsistencies between browsers behind the scenes.

jQuery also makes it easier to work with a group of elements (such as radio buttons, checkboxes, and the options in a select box), because, once you have selected the elements, you can simply apply individual methods to each of them without having to write a loop.

There is an example using forms on the next page, and there are more examples in Chapter 13.

CUTTING & COPYING ELEMENTS

Once you have a jQuery selection, you can use these methods to remove those elements or make a copy of them.

The .remove() method deletes the matched elements and all of their descendants from the DOM tree.

The .detach() method also removes the matched elements and all of their descendants from the DOM tree; however, it retains any event handlers (and any other associated jQuery data) so they can be inserted back into the page.

The .empty() and .unwrap() methods remove elements in relation to the current selection.

The .clone() method creates a copy of the matched set of elements (and any descendants). If you use this method on HTML that contains id attributes, the value of the id attributes would need updating otherwise they would no longer be unique. If you want to pass any event handlers, you should add true between the parentheses.

CUT

COPY

PASTE

You saw how to add elements into the DOM tree on p318.

BOX DIMENSIONS

These methods allow you to discover or update the width and height of all boxes on the page.

CSS treats each element on a web page as if it were in its own box. A box can have padding, a border, and a margin. If you set the width or height of the box in CSS, it does not include any padding, border, or margin - they are added to the dimensions.

The methods shown here allow you to retrieve the width and height of the first element in the matched set. The first two also allow you to update the dimensions of all boxes in the matched set.

The remaining methods give different measurements depending on whether you want to include padding, border, and a margin. Note how the .outerHeight() and .outerWidth() methods take a parameter of true if you want the margin included.

When retrieving dimensions, these methods return a number in pixels.

RETRIEVE OR SET BOX DIMENSIONS

RETRIEVE BOX DIMENSIONS ONLY

WINDOW & PAGE DIMENSIONS

The .height() and .width() methods can be used to determine the dimensions of both the browser window and the HTML document. There are also methods to get and set the position of the scroll bars.

On p348, you saw that you can get and set the height or width of a box using the .height() and .width() methods.

These can also be used on a jQuery selection containing the window or document objects.

The browser can display scroll bars if the height or width of:

• A box's content is larger than its allocated space.
• The current page represented by the document object is larger than the dimensions of the browser window's viewable area (viewport).

The .scrollLeft() and .scrollTop() methods allow you to get and set the position of the scroll bars.

When retrieving dimensions, these methods return a number in pixels.

This method will often return the incorrect value unless a DOCTYPE declaration is specified for the HTML page.

POSITION OF ELEMENTS ON THE PAGE

The .offset() and .position() methods can be used to determine the position of elements on the page.

To get the offset or position, store the object that is returned by these methods in a variable. Then use the left or right properties of the object to retrieve their position.

var offset = $(‘div’).offset();
var text = ‘Left: ’ + offset.left + ‘ Right: ’ + offset.right;

The two methods on the left help you to determine the position of an element:

• Within the page.
• In relation to an ancestor that is offset from normal flow.

Each of them returns an object that has two properties:

top - the position from the top of the document or containing element.

left - the position from the left of the document or containing element.

As with other jQuery methods, when used to retrieve information, they return the co-ordinates of the first element in the matched set.

If they are used to set the position of elements, they will update the position of all elements in the matched set (putting them in the same spot).

$(window).scrollTop();

WHERE TO PLACE YOUR SCRIPTS

The position of <script> elements can affect how quickly a web page seems to load.

SPEED

In the early days of the web, developers were told to place the <script> tags in the <head> of the page as you do with style sheets. However, this can make pages seem slower to load.

Your web page may use files from several different locations (e.g., images or CSS files might be loaded from one CDN, jQuery could be loaded from the jQuery or Google CDNs, and fonts might be loaded from another third party).

Usually a browser will collect up to two files at a time from each different server. However, when a browser starts to download a JavaScript file, it stops all other downloads and pauses laying out the page until the script has finished loading and been processed.

Therefore, if you place the script at the end of the page before the closing </body> tag, it will not affect the rendering of the rest of the page.

HTML LOADED INTO THE DOM TREE

Whenever a script is accessing the HTML within a web page, it also needs to have loaded that HTML into the DOM tree before the script can work. (This is often referred to as the DOM having loaded.)

You can use the load event to trigger a function so that you know the HTML has loaded. However, it fires only when the page and all of its resources load. You can also use the HTML5 DOMContentLoaded event, but it does not work in older browsers.

If the script tries to access an element before it has loaded, it causes an error. In the diagram above, the script could access the first two <li> elements, but not the third or fourth.

Where possible, do consider using alternatives to scripts. For example, use CSS for animations or HTML5's autofocus attribute rather than using the load event to bring focus to an element.

If your page is slow to load and you only want to include a small amount of code before the rest of the page has loaded, you can place a <script> tag within the body of the page.

At the time of writing, this technique was commonly used by Google for speed advantages, but it is acknowledged that it makes code much harder to maintain.

JQUERY DOCUMENTATION

For an exhaustive list of the functionality provided in jQuery, visit http://api.jquery.com

It is not possible to teach you everything about jQuery in one (albeit long) chapter. But you have seen many of the most popular features, and you should now know enough about jQuery to understand how it works and how to make use of it in your scripts.

Throughout the remaining chapters of this book, you will see many more examples that use jQuery.

What you have learned should also give you enough experience to work with the comprehensive jQuery documentation available online at: http://api.jquery.com

This site lists each method and property available to you, along with new functionality added in the latest versions, and notes that indicate which features are scheduled to be dropped.

HOW THE DOCUMENTATION WORKS

On the left-hand side of the page, you will see the different types of functionality that you can explore.

When you click on any of the methods in the main column, you will see a list of the parameters that it can take. When parameters are optional, they are shown in square brackets.

You will also find deprecated methods. This means that you are no longer advised to use this markup because it is likely to be removed from future versions of jQuery (if it has not already been removed).

EXTENDING JQUERY WITH PLUGINS

Plugins are scripts that extend the functionality of the jQuery library. Hundreds have been written and are available for you to use.

Plugins offer functionality that is not included in the jQuery library. They usually deal with a particular task such as creating slideshows or video players, performing animations, transforming data, enhancing forms, and displaying new data from a remote server.

To get an idea of the number and range of plugins available, see http://plugins.jquery.com. All of these are free for you to download and use on your own sites. You may also find other sites listing jQuery plugins for sale (such as codecanyon.net).

Plugins are written so that new methods extend the jQuery object and can, therefore, be used on a jQuery selection. As long as you know how to do the following with jQuery:

• Make a selection of elements
• Call a method and use parameters

You can use a lot of the functionality of these plugins without having to write the code yourself. In Chapter 11, you will see an example of how to create a basic jQuery plugin.

HOW TO CHOOSE A PLUGIN

When you are choosing a plugin to work with, it can be worth checking that it is still being maintained or whether other people have experienced problems using it. Finding out the following can help:

• When was the plugin last updated?
• How many people are watching the plugin?
• What do the bug reports say?

If you ask a question or find a bug in a script, bear in mind that their authors may have a day job and only maintain these plugins in their spare time to help others and to give back to the community.

JAVASCRIPT LIBRARIES

jQuery is an example of what programmers call a JavaScript library. It is a JavaScript file that you include in your page, which then lets you use the functions, objects, methods, and properties it contains.

The concept of a library is that it allows you to borrow code from one file and use its functions, objects, methods, and properties in another script.

Once you have included the script in your page, its functionality is available to use. The documentation for the library will tell you how to use it.

DOM & EVENTS

Zepto.js
YUI
Dojo.js
MooTools.js

TEMPLATING

Mustache.js
Handlebars.js
jQuery Mobile

jQuery is the most widely used library on the web, but when you have learned it, you might like to explore some of the other libraries listed below.

Popular libraries have the advantage that they will be well-tested, and some have a whole team of developers who work on them in their spare time.

USER INTERFACE

jQuery UI
jQuery Mobile
Twitter Bootstrap
YUI

WEB APPLICATIONS

Angular.js
Backbone.js
Ember.js

One of the main drawbacks with a library is that they will usually contain functionality that you will not need to use. This means users have to download code that will not be needed (which can slow your site down). You may find that you can strip out the subset of the library you need or indeed write your own script to do that job.

GRAPHICS & CHARTS

Chart.js
D3.js
Processing.js
Raphael.js

COMPATIBILITY

Modernizr.js
YepNope.js
Require.js

PREVENTING CONFLICTS WITH OTHER LIBRARIES

Earlier in the chapter, you saw that $() was shorthand for jQuery(). The $ symbol is used by other libraries such as prototype.js, MooTools, and YUI. To avoid conflicts with those scripts, use these techniques.

INCLUDING JQUERY AFTER OTHER LIBRARIES

Here, jQuery's meaning of $ takes precedence:

<script src=”other.js”></script>
<script src=”jquery.js”></script>

You can use the .noConflict() method at the start of your script, to tell jQuery to release the $ shortcut so that other scripts can use it. Then you can use the full name rather than the shortcut:

jQuery.noConflict();
jQuery(function() {
    jQuery(‘div’).hide();
});

You can wrap your script in an IIFE and still use $:

jQuery.noConflict();
(function($) {
    $(‘div’).hide();
})(jQuery);

Or you can specify your own alias instead, e.g., $j:

var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j(‘div’).hide();
});

INCLUDING JQUERY BEFORE OTHER LIBRARIES

Here, the other scripts' use of $ takes precedence:

<script src=”jquery.js”></script>
<script src=”other.js”></script>

$ will have the meaning defined in the other library. There is no need to use the .noConflict() method because it will have no effect. But you can continue to use the full name jQuery:

jQuery(document).ready(function() {
    jQuery(‘div’).hide();
});

You can pass $ as an argument to the anonymous function called by the .ready() method like so:

jQuery(document).ready(function($) {
    $(‘div’).hide();
});

This is equivalent to the code shown above:

jQuery(function($){
    $(‘div’).hide();
});

EXAMPLE
JQUERY

This example brings together a number of the techniques you have seen in this chapter to create a list that users can add items to and remove items from.

• Users can add new list items.
• They can also click to indicate that an item is complete (at which point it is moved to the bottom of the list and marked as complete).
• Once an item is marked as complete, a second click on the item will remove it from the list.

An updated count of the number of items there are in the list will be shown in the heading.

As you will see, the code using jQuery is more compact than it would be if you were writing this example in plain JavaScript, and it will work across browsers even though there is no explicit fallback code.

Because new items can be added to the list, the events are handled using event delegation. When the user clicks anywhere on the <ul> element, the .on() event method handles the event. Inside the event handler, there is a conditional statement to check whether the list item is:

• Not complete - in which case, the click is used to change the item to complete, move it to the bottom of the list, and update the counter.
• Complete - in which case, the second click on the item fades it out and removes it from the list altogether.

The use of conditional statements and custom functions (used for the counter) illustrate how jQuery techniques are used in combination with traditional JavaScript that you have been learning throughout the book.

The appearance and removal of the elements is also animated, and these animations demonstrate how methods can be chained together to create complex interactions based on the same selection of elements.