Page 1 of 3
Mastering the core of jQuery is first a matter of understanding how to find particular elements and then changing them in some way. The main way to find specific elements is to make use of selectors, which is sometimes difficult. Filters are often confused with selectors, but they are quite different and serve the important purpose of discovering the things that a simple selector cannot.
Now Available as a Print Book:
You can buy it from:
USA and World Amazon.com
I The Core UI
- Understanding jQuery (Book Only)
- The DOM And Selectors
- CSS Selectors
- The jQuery Object (Book Only)
- Advanced Filters - Traversing The DOM
- Modifying DOM Objects
- Creating And Modifying The DOM
- jQuery Data
- Function Queues
- jQuery UI
- jQuery UI Custom Control - Widget Factory
- jQuery - Easy Plugins
- Getting Started With QUnit Testing
The companion volume will be available as a book very soon:
Just jQuery: Events, Async & Ajax
- Reinventing Events
- Working With Events (coming soon)
- Asynchronous Code (coming soon)
- Consuming Promises
- Using Promises (coming soon)
- Ajax the Basics - get
- Ajax the Basics - post
- Ajax - Advanced Ajax To The Server
- Ajax - Advanced Ajax To The Client
- Ajax - Advanced Ajax Transports And JSONP
- Ajax - Advanced Ajax The jsXHR Object
- Ajax - Advanced Ajax Character Coding And Encoding
The jQuery Result Object Revisited
When you start using jQuery one of the first things you learn is how to make use of selectors to extract elements from the DOM.
selects all of the <p> elements in a page.
Often you make use of the extracted elements immediately. For example:
adds a paragraph with content "Hello" after every paragraph extracted by the selector "p".
Some jQuery operations work on all of the selected elements and some, the majority work on just the first. This all or nothing approach is often exactly what is needed for simple work, but sooner or later you are going to meet a situation where you need to process part of the list of selected elements.
In this case you need to get to know the jQuery result a little better. In fact even if you don't need to process parts of lists of selected elements it is still worth knowing more about the nature of the jQuery result.
The basic ideas of the jQuery result object is covered in an earlier chapter Getting Started With jQuery - The DOM.
But it is worth restating the basics here.
When you write
which is a shorthand for
the result, in both cases, is a jQuery result object which you can think of as an array like object, complete with all the jQuery methods you already know.
The important point is that even if:
only matches a single element, the result is still an array like object - of one element in this case.
The elements of the jQuery result are DOM elements not jQuery objects in their own right.
is a jQuery object, but:
is a DOM element, the first in the selection array, and you cannot use any jQuery methods on it.
If you want make use of jQuery methods on one or more of the array elements then the solution is to wrap the DOM element in a jQuery object. That is:
returns a jQuery object which wraps the first selected paragraph. After this you can do things like
which would append the new paragraph to the first selected paragraph.
One subtle point, but don't let it confuse you, is that when you wrap a single DOM element you still get a jQuery result array object.
Once you have an array of selected elements there is often a need to process all of them in some way. Recall that many jQuery methods simply work on the first array element.
In Getting Started With jQuery - The DOM the array of DOM objects that a selection produced was processed using array indexing and rewrapping.
For example, you could use a for loop to step through each element of a selected set of elements:
In this case a different number is added to each of the paragraphs.
There is a slightly more elegant was of manipulating the jQuery result array. You can apply filters to narrow down the elements that operations apply to.
You can think of this as a two stage-process of getting the list of elements you actually want to work with.
The first is to apply a selector to create a result array that consists of all of the DOM elements that match.
The second is to apply a filter to the result array that selects the element that are to be processed.
There are generally two ways to write a filter - as part of the selector or as a separate operation.
For example, you can pick out a particular element in the array using either
The first is a standard method and the second is a special string that can be included in the selector.
In both cases i is the index of the array element you want and negative indexes are taken to be relative to the end of the array. That is eq(0) is the first element and eq(-1) is the last element.
- selectors extract a set of DOM elements from the DOM as a jQuery array.
- filters extract a set of elements in a jQuery array as a new jQuery array.
So for example
selects all the paragraph elements and returns an array of results, The eq method trims this array down to just the first element and creates a new array containing only it. Then finally the append method adds a new paragraph to just this element.
does exactly the same thing but in this case the first call to jQuery, i.e. $("p:eq(0)"), returns the array already trimmed down to a single element.
Notice that both forms are easier to use than using an array index because:
is a DOM object rather than a jQuery result array, but:
are jQuery result objects and you don't need to re-wrap them.