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"));

    });

巴特西

jquery优化01

最新文章

热门文章