Learning Curve…

jQuery dollar sign ($)…

Posted on: October 14, 2011

In jQuery we use the dollar sign ($) as a shortcut to find elements in our page. The elements that are found and returned are referred to as a matched set. The basic syntax for the $ method is this:

$(‘Selector Here’)

Between the quotes (we can use single or double quotes, as long as we use the same type on each end) we enter one or more selectors. The $ method returns zero or more elements that you can then influence using one of the many jQuery methods. For example, to apply some CSS to all h2 elements, we use the css method:

$(‘h2’).css(‘padding-bottom’, ‘10px’);

This applies a padding of ten pixels at the bottom of all headings at level two in the page.

The cool thing about many of the jQuery methods is that, besides applying some design or behaviour, they return the matched set again. This enables you to call another method on the same matched set. This concept is called chaining, where we use the result of one method as the input of another, enabling us to create a chain of effects. For example, the following code first changes the font size of all level-two headings in the page, and then fades them out until they are invisible in five seconds:

$(‘h2’).css(‘font-size’, ’40px’).fadeOut(5000); // timeout is in milliseconds


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Learning days (Calendar)

October 2011
« Sep   Nov »

Knowledge Bank (Archives)

I am on Twitter

Blog Stats

  • 571,090 hits

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 43 other followers

%d bloggers like this: