jQuery Reference / PDF

jQuery Reference / PDF

Targeting elements using jQuery
$("#idName") - targets an id
$(".className") - targets a class
$("htmlTag") - targets an HTML tag

These methods can be mixed and matched. For example, to target all the paragraphs inside a DIV (box) with an ID of "container" you could use:
$("#container p")

jQuery FX

jQuery comes packaged with an array of FX:

• show()
• hide()

The show() and hide() FX work by essentially toggling the value of CSS property display between "block" and "none".

• fadeIn()
• fadeOut()

The fadeIn() and fadeOut() FX work by scaling the CSS opacity property. These two FX can also accept a duration setting inside the brackets. Accepted values are "slow", "fast" or a numerical value measured in milliseconds.

Manipulating CSS
jQuery's power comes from its ability to manipulate CSS properties. All CSS properties can
be accessed and their values set using the following syntax:
$("#idName").css({
backgroundColor: "#FF0000",
fontSize: "15px",
opacity: 0.6
})

Note: if you have multiple CSS properties then a comma is used to separate them. The last item is NOT followed by a comma.

Note: CSS properties such as background-color are camel-cased in jQuery, e.g. backgroundColor.

Note: The opacity property accepts values from 0 to 1, where 0 is fully transparent and 1 is fully opaque.

Animation
jQuery can animate elements (IDs, classes and tags) using the animate() function. For

example:
$("#idName").animate({
left: 200,
top: 300
});

The above example will animate the left and top CSS properties to 200px and 300px respectively.

The animate() function can also accept a duration inserted BEFORE the closing bracket.

For example to set a duration of 6 seconds we would use the following:
$("#idName").animate({
left: 200,
top: 300
}, 6000);

Note: The CSS property values in the above example will move an element to that fixed point. If you just want to move an element 100px from its current position you need to use the following syntax to add 100 onto the current position. Note: This value is written as a string:

$("#idName").animate({
left: "+=100"
});

If the element is currently 200px from the left, then the above example will move it to 300px from the left.

Chaining FX and Animations
jQuery's dot syntax makes it easy to chain FX together. For example:
$("#idName").fadeIn(3000).animate({
left: 400
}, 3000);
In this example, the ID will fade in over 3 se....

jQuery Reference / PDF