jquery优化01

查找：

• children:     find(selector), children(selector)；
• parent:       parent(), parents(selector), closest(selector)  //最近的上层
• find()
  • $("#main li");$("#main > li");    --->      $("#main").find("li");$("#main").children('li');
• first()/last()
  • $("#main li:first")                     --->      $("main").find("li").first();  /last()
• filter()
  • $("#main.onsale");                   --->       $("#main").filter(".onsale");

 绑定：

• on(

  • $("button").click(function(event) {});    --->     $("button").on("click",function() {});

after()   //与remove一起用节点替换
• --->

    $("#div").on("click","button",function() {
      	var message = "<span>click now!</span>";
      	$(this).after(message).remove();
      });
  

• data()   //HTML5属性，适用于文本的设置替换

   <div  data-title="use data">
    	<button id="set">set</button>
    	<button id="get">get</button>
    </div>
  ----------------------------------
  $("#set").on("click",function() {
      	$(this).parent().data("title","data has changed");
      });
   $("#get").on("click",function() {
      	$(this).after($(this).parent().data("title")).remove();
      });

• 使用namespace和off()

  //of()
  -------------------------
   $("#btn1").on("click",picture);
   $("#btn1").on("click",status);
   $("#btn1").off("click");
  
  //namespace
  --------------------------
  $("#btn2").on("click.pic",picture);
  $("#btn2").on("click.stat",status);
  $("#btn2").off("click.pic");
  
  $("#btn3").on("click.pic",picture);
  $("#btn3").on("click.stat",status);
  $("#btn3").on("mouseover.stat",status);
  $("#btn3").off(".stat");

• 使用trigger  //触发

  $("#btn4").on("click",function() {
        $("#btn2").trigger("click");
   });
  
  $("div").on("exam.new",function() {   //自定义
     console.log($(this).data());
    });
   $("#btn5").on("click.pict",function() {
        picture();
        $("div").trigger("exam.new");
   });

事件：

• keyboard events:  keypress,keydown,keyup;
• form events:        focus,blur,change,select,submit;
• mouse events:     click,dbclick,focusin,focusout,mousedowm,mouseup,mousemove,mouseout,mouseover,mouseleave,mouseenter;

节点与方法连接

function Confirmation(ele) {
    	this.ele = ele;
    	this.ticket = this.ele.find(".ticket");
    	var confirmation = this;
    	this.loadConfirmation = function() {
    		$.ajax("confirmation.html", {
    			timeoOut: 3000,
    			context: confirmation,//"this" in the function;
    			success: function(res) {
    				this.ticket.html(res).slideDown();
    			}
    	});
    	this.showBoardingPass = function(event) {
    		event.preventDefault();
    		$(this).hide();
    		confirmation.find(".boarding-pass").show();
    	};
    	this.ele.on("click","button",this.loadConfirmation);
    	this.ele.on("click","view-boarding-pass",this.showBoardingPass);
     }
   }
    $(function() {
    	var paris = new Confirmation($("#paris"));
    	var london = new Confirmation($("#london"));
    });