缓存变量：DOM遍历是昂贵的，所以尽量将会重用的元素缓存。

$element = $('#element');

h = $element.height();   //缓存

$element.css('height',h-20);

如果你打算对DOM元素做大量操作（连续设置多个属性或css样式），建议首先分离元素然后在添加。

使用var与匈牙利命名法，且避免全局变量 ；　　

优化选择符；避免多个ID选择符

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="#" 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="#" 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="#" 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');
  
        	});
  
        });