Why Choose jQuery?

• Helps with cross browser compatability
• Easier than javascript
• Powerful animation effects
• Lots off cool plugins
  • jquery ui
  • jquery cookies
  • jquery mobile

There are several options for using jquery

• (Easy) put a script link to a hosted version in the head of your page
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  or
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
• (Secure) Download and keep a verion on your server. This allows for better security and guarantees that the version you use is available. jquery download page

Selecting Dom Objects using $

Pass the $ function CSS style selectors to serch for things. What is returned is an jquery style array thingy filled with jQuery objects.

Finding by id

Precede id name with # Example: $('#special')

Finding by class

Precede id name with . Example:$('.navbutton')

Finding by tag

Just pass tag type Example: $('img')

Finding by complex css selection

Just pass css selector Example: $('div.imgholder p:nth-child(2)')

Setting Style properties

When you have a jQuery object you use.css to set the style of that object. You don't have to relearn css just use the styles as written.

Assume: var $par = $('p');

Setting a single css property

Use: obj.css("css property", "setting")
Example:$par.css("background-color", "blue");

Setting multiple css properties using javascript object

Use:

obj.css({ 
	cssProperty : "setting",
	cssProperty2 : "setting2",
	...	
}); 

Example:

obj.css({ 
	"background-color" : "blue",
	"font-family" : "sans-serif",
	"font-weight" : "bold"
}); 

Setting attributes

Simple as pie useing .attr() function.

Assume: var $img = $('img');

Setting a single attribute

Example: $img.attr("src", "snowflake.jpg");

Setting multiple attributes at the same time using javascript object

Example:

$img.attr({
	"src" : "snowflake.jpg",
	"alt" : "snow is falling",
	"title" : "I love snowflakes"
});

Creating objects

All about the $ function. Surround the tag name with < and >.

Create a single dom object

Example: var img = $("<img>");

Create a single dom object with attributes built in by passing an javascript object with parameters for the attributes.

Example:

var img = $('<img>', {
	"src" : "snowflake.jpg",
	"alt" : "snow is falling",
	"title" : "I love snowflakes"
});

Removing Objects with Style

Use the .remove() method.

remove a dom object.

Example: $("#bestName").remove();

Use a callback function to fade and then remove item. .fadeOut( [duration] [, callback] )

Example: $('p').fadeOut('slow', function() { $(this).remove(); })