• Choose a category
• All
• Classic-Fiction

Thanks to these changes, our page will work nicely for the 10% of our users without JavaScript, and even better for the remaining 90%! This is a very simple example of progressive enhancement, but it gives you a good understanding of the fundamental idea: rather than using jQuery as the underpinnings of your UI, use it to add some sugar to an already functioning experience. That way, you know no one’s left behind.

In the interests of keeping our sample code small and focused, we’ll stop short of delving much further into the topic. But go off and research it for yourself—it’s the kind of best practice that makes you a better web developer.

Modifying Content

We can do just about anything we want to our elements now: show them, hide them, add new ones, remove old ones, style them however we like … but what if we want to change the actual content of an element? Again, jQuery provides a couple of methods for just this purpose: text and html.

The text and html actions are quite similar, as both set the content for the elements we’ve selected. We simply pass a string to either function:

chapter_02/22_modifying_content/script.js (excerpt)

$('p').html('good bye, cruel paragraphs!');

$('h2').text('All your titles are belong to us');

In both these examples the matched elements’ contents will change to the string we’ve provided: every paragraph and h2 tag on the page will be overwritten with our new content. The difference between text and html can be seen if we try adding some HTML to the content string:

chapter_02/23_text_vs_html/script.js (excerpt)

$('p').html('Warning! Text has been replaced … ');

$('h2').text('Warning! Title elements can be …');

In this case, our paragraphs will contain bold-faced text, but our h2 tags will contain the entire content string exactly as defined, including the tags. The action you use to modify content will depend on your requirements: text for plain text or html for HTML.

You might wonder, “Can these new actions only set content?” At this stage it should be no surprise to you that we can also fetch content from our jQuery selections using the same actions:

chapter_02/24_get_content/script.js (excerpt)

alert($('h2:first').text());

We use the text action supplying no parameters, which returns the text content of the first h2 tag on the page (“Welcome!”). Like other actions that retrieve values, this can be particularly useful for conditional statements, and it can also be great for adding essential information to our user interactions.

Basic Animation: Hiding and Revealing with Flair

All this showing and hiding and changing is useful, though visually it’s somewhat unimpressive. It’s time to move on to some jQuery techniques that are a bit more, shall we say, animated.

The core jQuery library includes a handful of basic effects that we can use to spice up our pages. And once you’ve had enough of these, mosey on over to the jQuery plugin repository, where you’ll find hundreds more crazy effects.

Tip: Keep It Sensible

When dealing with effects and animation on the Web, it’s probably a wise idea to proceed with your good taste sensors engaged. Remember, at one time the tag was considered perfectly sensible!

Fading In and Out

One of the most common (and timeless) effects in jQuery is the built-in fade effect. To use fading in its simplest form, just replace show with fadeIn or hide with fadeOut:

chapter_02/25_fade_in_out/script.js (excerpt)

$('#hideButton').click(function() {

$('#disclaimer').fadeOut();

});

There are also a few optional parameters we can use to modify the effect, the first of which is used to control the time it takes for the fade to complete. Many jQuery effects and animations accept the time parameter—which can be passed either as a string or an integer.

We can specify the time span as a string using one of the following predefined words: slow, fast, or normal. For example: fadeIn('fast'). If you’d rather have more fine-grained control over the duration of the animation,