Tương tác giữa PHP và jQuery - part 5 pdf

CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

41
INSPECTING HTML USING THE ELEMENT INSPECTOR IN FIREBUG
You can also see this by using the element inspection tool provided by Firebug. Near the top left of the
console, there's a button that looks like a mouse cursor over a rectangle (see Figure 2-3). Click it to
activate the element inspector.

Figure 2-3. The button to activate the element inspector
After the inspector is active, you can hover over different elements in the browser, and they'll highlight
with a blue outline. Hover over one of the paragraphs you just appended text to, and click it. This brings up
the HTML panel of Firebug with the current element collapsed and highlighted, and a tab to expand the
element (see Figure 2-4).
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

42

Figure 2-4. The collapsed element as displayed after hovering over and clicking it
Click the tab to expand the element, and you can see the contents, including the appended text, which is
contained within the paragraph element (see Figure 2-5).
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

43

Figure 2-5. The expanded element, including the dynamically added text
You can use this technique throughout the rest of the exercises in this book to see where content and
elements are being added to the DOM.

Using .append() and .prepend(), you can also add new elements to the DOM. For instance, to add a
new paragraph at the top of the browser page, prepend a new element to the body using this code:
var para = $("<p>", {

"text":"I'm a new paragraph!",
"css":{"background":"yellow"}
});
$("body").prepend(para);
■ Note This example uses a variable to store the new element before prepending it to the body. This is done to
increase the legibility of the script. You’ll be using this technique often throughout this book.
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

44
After executing the preceding code in your console, a new paragraph with a yellow background
appears at the top of your browser window (see Figure 2-6).

Figure 2-6. The new paragraph as it appears after prepending it to the body element
.appendTo() and .prependTo()
In the last example, you had to create an element, store it, and then select the element to which it was
appended. This can be a somewhat roundabout approach, but fortunately, jQuery provides .appendTo()
and .prependTo(), which chain instead to the object to be appended and accept the selector of the
element to which you wish to append.
Using the last example as a starting point, to add the same paragraph element to the body using
.prependTo(), your code would simplify thusly:
$("<p>", {
"text":"I'm a new paragraph!",
"css":{"background":"yellow"}
})
.prependTo("body");
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

45
This produces an identical result with a much more concise snippet of code.
.after() and .before()

The .after() and .before() methods are similar to .append() and .prepend(), except they add the
content outside the element either before or after it, instead of inside the element at the beginning or
end.
To add a new paragraph after the paragraph with class foo, use the following snippet:
$("p.foo").after("<p>A new paragraph.</p>");
Executing the code results in a new paragraph insertion just below the paragraph with class foo (see
Figure 2-7).

Figure 2-7. A new paragraph inserted after the paragraph with class foo
.insertAfter() and .insertBefore()
The same way that .appendTo() and .prependTo() allow for more concise addition of new elements to
the DOM, .insertAfter() and .insertBefore() offer the same alternative for .after() and .before().
To repeat the example from the previous section using .insertAfter(), alter the code to read as
follows:
$("<p>", {
"text":"A new paragraph."
})
.insertAfter("p.foo");
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

46
This duplicates the result from before (see Figure 2-14).
.wrap()
The .wrap() method allows developers to enclose existing elements with one or more new elements
quickly and easily.
The argument accepted by .wrap() can either be a collection of one or more tags to wrap around the
selected elements, or a callback function to generate the tags.
First, wrap all the spans in the example document with a strong tag using the following:
$("span").wrap("<strong />");
This results in the text of the two spans becoming bold (see Figure 2-8).

Figure 2-8. The spans appear bold after wrapping them with strong tags
The syntax used for the wrapping element is relatively forgiving, and the output shown in Figure 2-7
could have been accomplished using either "<strong />", "<strong>", or "<strong></strong>".
Additionally, multiple tags can be wrapped around elements by passing a nested set of tags to the
.wrap() method:
$("span").wrap("<strong><em></em></strong>");
After executing the preceding line, the text in the spans will appear bold and italicized (see
Figure 2-9).
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

47

Figure 2-9. Span text appears bold and italicized after wrapping it with strong and em tags
To use a callback function to generate the desired HTML tag to wrap an element with, you must
return a tag from the callback. For instance, to wrap all spans with the class foo in strong tags and all
other spans in em tags, execute the following code:
$("span").wrap(function(){
return $(this).is(".foo") ? "<strong>" : "<em>";
});
After executing this snippet, the browser shows one span in italics, and the other (the one with class
foo) in bold (see Figure 2-10).
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

48

Figure 2-10. Use a callback function to conditionally wrap certain elements
.unwrap()
The inverse of .wrap(), .unwrap() will remove tags that surround a given element. It does not accept any
arguments; it simply finds the immediate parent element and removes it.

To unwrap the span elements in the example file, execute this code:
$("span").unwrap();
This removes the parent elements (but leaves the text nodes intact), which alters the layout (see
Figure 2-11).
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

49

Figure 2-11. After unwrapping the span elements, the document layout changes
.wrapAll()
If an entire set of elements needs to be wrapped in a new tag, .wrapAll() is used. Instead of individually
wrapping each selected element with a new tag, it groups all selected elements and creates one wrapper
around the whole group.
To wrap a div element with a yellow background around all paragraphs on the page, use the
following code:
var div = $("<div>", {
"css":{"background-color":"yellow"}
});
$("p").wrapAll(div);
After executing this code, the new div is in place, and all paragraphs appear within its yellow
background (see Figure 2-12).
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS

50

Figure 2-12. The yellow background shows the div successfully wrapped all paragraphs
There’s one important note about .wrapAll(): it will move elements in the DOM to group them. To
demonstrate this, use .wrapAll() to add a strong tag around all spans in the document:
$("span").wrapAll("<strong />");
After executing the command, note that the second span in the document was moved next to the

first one so they could be wrapped in the same tag (see Figure 2-13).