More jQuery

jQuery $ Shortcut

In jQuery code written by others, you may have seen the $ a lot. It's time we explained that, and maybe save ourselves a few keystrokes along the way…

When you imported the jQuery library, it creates the jQuery function that we have used a lot (first in Working with jQuery). When you use jQuery, it also creates a shortcut for jQuery named $.

In JavaScript, $ is just a variable name, just like count or length: it just look funny. The jQuery library uses $ to mean exactly the same thing as jQuery. That means that the pairs here do exactly the same thing, just spelled differently:

jQuery('p').click(say_hello)
$('p').click(say_hello)

jQuery('#changeme').html('Somebody clicked me.')
$('#changeme').html('Somebody clicked me.')

Whether you use jQuery or $ is up to you. We will use $ in examples from now on: it's shorter to type, and a more common in jQuery code.

More Ways to Modify the Page

We have seen .html() as a way to modify the contents of a page. We can use it to change the HTML that is inside an element:

$('#changeme').html('Somebody <em>clicked</em> me.')

There are other ways we can modify the page with JavaScript and jQuery. They are used in similar ways, but deserve a little explanation.

`.attr()`

The .attr() function can be used to change attributes on an element. For example, suppose we wanted to change the class of an element from whatever it was before to class="active".

$('#changeme').attr('class', 'active')

After this code runs, the browser will display as if the tag contained class="active" in the actual HTML: if you have some CSS that makes that class look different, the appearance of the page will change.

This could also be used to change the source of an image:

$('img#changeme').attr('src', 'other_img.png')

`.append()`

The .append() function will add content at the end of an element. For example, if we have a <section id="expanding"> on our page, we can add a new paragraph at the end of the section like this:

$('section#expanding').append('<p>I am a new paragraph.</p>')

`.css()`

You can specifically modify the style if an element with the .css() function.

We have to specify the collection of CSS changes that we want to be applied to the element, which we will do with a JavaScript object. For example,

newstyle = {
  'font-family': 'sans-serif',
  'color': '#f60'
}
$('#styling').css(newstyle)

Here, the newstyle variable is assigned a JavaScript object. The object in newstyle contains color: a variable holding a string '#f60'.

We didn't really have to use the variable newstyle: we could have written the object directly inline where we need it. This style is more common for jQuery code, but you are welcome to use either.

$('#styling').css({
  'font-family': 'sans-serif',
  'color': '#f60'
})

`.animate()`

The .animate() function works like .css(), but will animate from the current style to the new ones given.

For example, this code will change the element's font size and left margin from the current value (as the page was before this code ran) to the values given:

newstyle = {
  'font-size': '1.5em',
  'margin-left': '2em'
}
$('#styling').animate(newstyle, 2000)

The animation will take 2 seconds (2000 milliseconds).

The .animate() function can only animate CSS properties that are “numeric”. For example, it can animate border-width from 1px to 1em, but cannot animate font-weight from normal to bold, or colour values.