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). . 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. paragraphs appear within its yellow background (see Figure 2-1 2). CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS 50 Figure 2-1 2. The yellow background shows the div successfully wrapped. 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