• Choose a category
• All
• Classic-Fiction

By Root 1520 0

each function you want to add. Make sure that each button has an ID, but you don’t need to specify an onclick function, because the init() function takes care of that.

2. Build a prototype content div.

Build a div called content, and add a paragraph to the div.

Be careful with your initial HTML structure. The manipulation and selection tricks you experiment with in this chapter rely on a thorough understanding of the beginning page structure. Be sure that you understand exactly how the page is set up so that you understand how to manipulate it. If your standard XHTML page (before any JavaScript/jQuery code is added) doesn’t validate, it’s unlikely your code will work as expected.

Initializing the code

The initialization section is pretty straightforward. Set up an init() function, and use it to assign event handlers to all the buttons:

$(init);

function init(){

$(“#reset”).click(reset);

$(“#addText”).click(addText);

$(“#wrap”).click(wrap);

$(“#clone”).click(clone);

$(“#oddGreen”).click(oddGreen);

} // end init

Adding text

It’s pretty easy to add text to a component. The append() method attaches text to the end of a jQuery node. Table 3-1 shows a number of other methods for adding text to a node.

Table 3-1 Methods That Add Text to a Node

Method

Description

append(text)

Adds the text (or HTML) to the end of the selected element(s)

prepend(text)

Adds the content at the beginning of the selected element(s)

insertAfter(text)

Adds the text after the selected element (outside the element)

insertBefore(text)

Adds the text before the selected element (outside the element)

More methods are available, but these are the ones I find most useful. Be sure to check out the official documentation at http://docs.jquery.com to see the other options.

function addText(){

$(“p:first”).append(“ ...and this was added later.”);

} // end addContent

The append() method adds text to the end of the element, but inside the element (rather than after the end of the element). In this example, the text will become part of the paragraph contained inside the content div. The more interesting part of this code is the selector. It could read like this:

$(“p”).append(“ ...and this was added later.”);

That would add the text to the end of the paragraph. The default text has only one paragraph, so that makes lots of sense. If there are more paragraphs (and there will be), the p selector can select them all, adding the text to all the paragraphs simultaneously. By specifying p:first, I’m using a special filter to determine exactly which paragraph should be affected.

Many of the examples on this page use jQuery filters, so I describe them elsewhere in the following sections. For now, note that p:first means the first paragraph. Of course, you also see p:last and many more. Read on. . . .

Attack of the clones

You can clone (copy) anything you can identify as a jQuery node. This makes a copy of the node without changing the original. The cloned node isn’t immediately visible on the screen. You need to place it somewhere, usually with an append(), prepend(), insertBefore(), or insertAfter() method.

Take a look at the clone() function to see how it works:

function clone(){

$(“p:first”).clone()

.insertAfter(“p:last”)

.css(“backgroundColor”, “lightblue”);

} // end clone

1. Select the first paragraph.

The first paragraph is the one I want to copy. (In the beginning, only one exists, but that will change soon.)

2. Use the clone() method to make a copy.

Now you’ve made a copy, but it still isn’t visible. Use chaining to do some interesting things to this copy.

3. Add the new element to the page after the last paragraph.

The p:last identifier is the last paragraph, so insertAfter(“p:last”) means put the new paragraph after the last paragraph available in the document.

4. Change the CSS.

Just for grins, chain the css() method onto the new element and change the background color to light blue. This just reinforces the fact that you can continue adding commands to