jquery.md

JQuery Back

JQuery.js is a fast, small, and feature-rich JavaScript library.

Code

DOM Traversal and Manipulation

$( "button.continue" ).html( "Next Step..." );

Event Handling

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
	hiddenBox.show();
});

Ajax

$.ajax({
	url: "/api/getWeather",
	data: {
		zipcode: 97201
	},
	success: function( data ) {
		$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
	}
});

Deferred Object

Allow linked operations

$.ajax("test.html")
.done(function() {
	console.log('success');
	})
.fail(function() {
	console.log('error');
})
.always(function() {
	console.log('ajax completed');
});

Allow to bind mutiple callback methods to one ajax request

$.ajax("test.html")
.done(function() {
	console.log('success');
	})
.fail(function() {
	console.log('error');
})
.done(function() {
	console.log('success 2');
});

Allow to bind one same callback method to different ajax requests

$.when($.ajax("test.html"), $.ajax("test2.html"))
.done(function() {
	console.log('success');
	})
.fail(function() {
	console.log('error');
})
.always(function() {
	console.log('ajax completed');
});

Interfaces for original operations

/**
 *	An original operation which costs some time
 */
var dtd = $.Deferred();		// a deferred object
var wait = function() {
	var tasks = function() {
		alert('completed');
		dtd.resolve();	// change the state of the deferred object to resolved. Deffered objects have 3 states: 未完成, 已完成(resolved), 已失敗(rejected)
		// dtd.reject();
	};
	setTimeout(tasks, 5000);
	return dtd.promise();	// avoid to the outter change to dtd like excuting a sentance, like `dtd.resolve();` after $.when()
};

/**
 *	Set the callback method to this function
 */
$.when(wait)
.done(function() {
	console.log('success');
	})
.fail(function() {
	console.log('error');
})
.always(function() {
	console.log('ajax completed');
});

/**
 * 	The second way to avoid to the outter change to deferred objects
 */
$.Defferred(wait)
.done(function() {
	console.log('success');
	})
.fail(function() {
	console.log('error');
})
.always(function() {
	console.log('ajax completed');
});

/**
 * 	The third way to avoid to the outter change to deferred objects
 */

dtd.promise(wait);
wait.done(function() {
	console.log('success');
	})
.fail(function() {
	console.log('error');
})
.always(function() {
	console.log('ajax completed');
});

Combine callback method done with fail

$.when($.ajax("test.php"))
.then(successFunc, failFunc);

Download

• Just Click here to download.