HTML5 and CSS3, Second Edition

hide(), show(), and toggle()

The hide() and show() methods make it easy to hide and show user-interface

elements. We can hide one or many elements on a page, like this:

jqueryprimer/simple_selection.html

$("h1").hide();

We use the hide() method throughout this book to hide page sections that need

to appear only when JavaScript is disabled, such as transcripts or other

fallback content. To show elements, we simply call the show() method instead.

We can use toggle() to easily toggle the visibility of an element.

If the jQuery function found several items that matched the selector, all of

those items would be shown, hidden, or toggled. So the previous example

doesn’t just hide the first <h1> element; it hides all of them!

jqueryprimer/simple_selection.html

$("#sidebara").hide();

html(), val(), and attr()

We use the html() method to get and set the inner content of the specified

element.

jqueryprimer/methods.html

$("#message").html("HelloWorld!");

Here, we’re setting the content between the opening and closing h1 tags to

“Hello World!”

The val() method sets and retrieves the value from a form field. It works

exactly like the html() method.

The attr() method lets us retrieve and set attributes on elements.

append(), prepend(), and wrap()

The append() method adds a new child element after the existing elements.

Given we have a simple form and an empty unordered list, like this:

jqueryprimer/methods.html

<formid="task_form">

<labelfor="task">Task</label>

<inputtype="text"id="task">

<inputtype="submit"value="Add">

</form>

<ul id="tasks">

</ul>

report erratum • discuss

Methods to Modify Content • 265

Download from Wow! eBook <www.wowebook.com>