Web Development with jQuery®

(Elliott) #1

(^36) ❘ CHAPTER 2 SELECTING AND FILTERING
to create a document that is the smallest it can be, while also being as programmatically effi cient
and optimized as it can be. jQuery is just a tool that enables you to access the DOM, and it allows
you lots of ways to interact with the DOM. However, it is up to you as the program’s architect to
make that application effi cient, organized, and well designed so that it loads and executes as quickly
as possible. In terms of web applications, it is always important to show the user some content as
fast as possible. A few seconds can mean the difference between users delighting in and using your
website and web applications, or users pressing the back button and taking their attention elsewhere.
The fi rst of many fi ltering and traversal methods that you examine in this chapter is a method called
find(). Its purpose is to look within an existing selection to fi nd other elements in that selection.
Those elements can be children of the element, or elements, that you selected or far-off descendants
deep down the DOM tree from that initial selection. The initial selection can be one or many elements,
and find() will look inside each of them to locate the additional element or elements that you are
looking for. As mentioned in the opening for this section, a great thing about jQuery is that it never
assumes (whenever practical and possible) that you want to work with only a single element. If you
select several elements, it will work with several elements at once. If you select a single element, it will
work with only that one element, but it will treat that one element as an array containing one element.
If you examine the object that a jQuery selection returns, you’ll always see an array, and that is
always the case for jQuery methods that are meant to return something related to a selection. When
you aren’t working with a selection, but are instead using a method that is meant to return a string
or some other data, for example, the HTML source or text source of an element, or the value of an
attribute—in those situations, jQuery takes the fi rst element of the selection, if the selection contains
multiple elements, and it gives you what you are asking for in the context of that fi rst element. So,
you must be proactive and take into account what a selection might return and assume that most of
the time, your selection could possibly return multiple elements.
As already stated, it is best to start with a selection that is as narrow as possible so that the browser can
quickly locate that element in the DOM. Example 2-2 presents you with a simplifi ed and to-the-point
overview of one way you might use find() to locate elements within the context of an existing selection.
As with most of the examples present in this book, you can try out the example by manually typing it
into a text editor, or you can obtain the example’s source code with the book’s free downloadable materi-
als available from http://www.wrox.com/go/webdevwithjquery. This example begins with Example 2-2.html:
<!DOCTYPE HTML>




content="application/xhtml+xml; charset=utf-8" />

Contact Form





action='Example 2-2 Submitted.html'>


[http://www.it-ebooks.info](http://www.it-ebooks.info)
Free download pdf