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(); })

Why Choose jQuery for ajax?

• Helps with cross browser compatability
• Easier and cleaner than javascript XMLHttpRequest
• Capability for some cross site ajax

jQuery Ajax API

Basic ajax

Basic ajax structure

$.ajax("url", {
  option : value,
  option : value,
  option : value,
  ...
});

Example

Example

$.ajax("http://www.example.com/foo.php", {
  data: { username: 'foobar', password: 'abcdef' },   // "password=abcdef"
  success: loginSuccess,
  error: loginFailure,
  complete: dismissDialog // will be called in either case
});

Turn it to a post request.

Default request is get. Make it a post by adding type: "post" to options.

Reminder of Basic ajax structure

$.ajax("url", {
  option : value,
  ...
});

Example Post request

Example

$.ajax("http://www.example.com/foo.php", {
  type: "post",
  success: loginSuccess,
  ...
});

jQuery also has $.get and $.post options if you are too lazy to include this option.

Ajax across domains

For security reason we are not allowed to perform ajax requests to other domains. This causes a problem: Other domains have all the cool data!

There are 2 ways to work around this

Option 1: PHP go betwen

Make a php page on your own domain that acts as a go between for the api you want to use.

Option 2: "cooperative cheat"

JQuery Ajax and JSONP requets (when available)
Just add dataType: 'jsonp' as an ajax option.

Ajax for JSONP friendly web services.

JSONP - Basically involves an agreement between developers that we want to be able to share data so lets use a script workaround.

Full explaination on INFO 343 lecture slides link

Useful APIs for JSONP include

• Twitter API link
• Yelp API link
• Google API link

Example for Twitter API

// get the value from the text box with an id of search
var query = $('#search').val();  
	
$.ajax('https://search.twitter.com/search.json', {
	data: { 'q': query},
	dataType: 'jsonp', 
	success: injectTweets,
	error: ajaxError
});

/* When given json information as data inject 
that information into the page. Assumes there exists
a ul in the page with an id of results. */
function injectTweets(data) {
	var res = data.results; // get all the results of the request.
	var dl = $('#results');
	dl.empty();
	
	// display each result on the page. 
	$.each(res, function() {
		// get the username and tweet from the json data
		var dt = $("<dt>").text(this["from_user"] + " says:");
		var dd = $("<dd>").text(this["text"]);
		dl.append(dt, dd);
	});
}

Basic Twitter Example