ajax:

• 使用相关函数：

  $("#file").on("click","button",function() {   $.ajax("confirmation.html",{	 data: {"confNum":1234},	 success: function(res) {},	 error: function(req,errorType,errorMessage) {},	 timeout:3000,	 beforeSend: function() {	     $(".confirmation").addClass(‘is-loading‘);	 },	 complete: function() {	     $(".confirmation").removeClass("is-loading");	 }    })});

• 提交表单：

  $("form").on("submit",function(event) {     event.preventDefault(); //submit will reflash the page     var form = $(this);     $.ajax("/book", {     	type: "POST",     	data: form.serialize(), //use this;     	success: function(result) {     	   form.remove();     	   $("#vacation").hide().html(result).fadeIn();       	}     });   });

• 优化操作：

  $.ajax(‘/test.html‘)    .done(function(res) {console.log(res,‘done1‘);})    .fail(function(res) {console.log(res,‘fail‘);})

• 要多个ajax共同使用的时候

  $.when($.ajax("test1.html"),$.ajax("test2.html"))    .done(function(res) {console.log(res,‘done‘);})    .fail(function(res) {console.log(res,‘fail‘);});//都成功才会执行done；返回第一个ajax的res;

写插件：

• html:

  <div class="container">	<div class="col-sm-12 top">		<button id="all" class="btn btn-primary col-sm-offset-10 show-price">show all</button>	</div>	<div class="jumbotron col-sm-3 vacation" data-price="110">		<h4>Hawaiian Vaction</h4>		<button class="click btn btn-info">SHOE PRICE</button>		<p class="no-hide"><a href="http://www.mamicode.com/#" class="remove-vacation">no thanks!</a></p>	</div>	<div class="jumbotron col-sm-3 col-sm-offset-1 vacation" data-price="150">		<h4>European Getaway</h4>		<button class="click btn btn-info">SHOE PRICE</button>		<p class="no-hide"><a href="http://www.mamicode.com/#" class="remove-vacation">no thanks!</a></p>	</div>	<div class="jumbotron col-sm-3 col-sm-offset-1 vacation" data-price="90">		<h4>Visit Japan</h4>		<button class="click btn btn-info">SHOE PRICE</button>		<p class="no-hide"><a href="http://www.mamicode.com/#" class="remove-vacation">no thanks!</a></p>	</div></div>	

• js:

   $.fn.pricefy = function(options) {      	this.each(function() {          //使用$.extend添加属性；setting为要操作的数据集合      		var settings = $.extend({      			days: 3,      			vacation: $(this),      			price: $(this).data("price")      		},options);      		var show = function() {      			var details = $("<p>Book" + settings.days +"days for $" + (settings.days * settings.price)+  "</p>");      			settings.vacation.find(".click").hide();      			settings.vacation.append(details);      		};      		var remove = function() {      			settings.vacation.hide().off(".pricefy");      		};      		settings.vacation.on("click.pricefy","button",show);      		settings.vacation.on("show.pricefy",show);      		settings.vacation.on("click.pricefy",".remove-vacation",remove);      	})      };      $(function() {      	$(".vacation").pricefy();      	$(".show-price").on("click",function(event) {      		event.preventDefault();      		$(".vacation").trigger(‘show.pricefy‘);      	});      });

  　　

jquery优化02