jQuery中on()方法用法实例详解

$(document).ready(function(){
$(“p”).on(“click”,function(){
$(this).css(“background-color”,”pink”);
});
$(“button”).click(function(){
$(“p”).off(“click”);
});
});

2、多个事件绑定同一个函数
$(document).ready(function(){
  $(“p”).on(“mouseover mouseout”,function(){
    $(“p”).toggleClass(“intro”);
  });
});

3、多个事件绑定不同函数
$(document).ready(function(){
  $(“p”).on({
    mouseover:function(){$(“body”).css(“background-color”,”lightgray”);}, 
    mouseout:function(){$(“body”).css(“background-color”,”lightblue”);},
    click:function(){$(“body”).css(“background-color”,”yellow”);} 
  });
});

4、绑定自定义事件
$(document).ready(function(){
  $(“p”).on(“myOwnEvent”, function(event, showName){
    $(this).text(showName + “! What a beautiful name!”).show();
  });
  $(“button”).click(function(){
    $(“p”).trigger(“myOwnEvent”,[“Anja”]);
  });
});

5、传递数据到函数
function handlerName(event)
{
  alert(event.data.msg);
}

$(document).ready(function(){
  $(“p”).on(“click”, {msg: “You just clicked me!”}, handlerName)
});

6、适用于未创建的元素
$(document).ready(function(){
  $(“div”).on(“click”,”p”,function(){
    $(this).slideToggle();
  });
  $(“button”).click(function(){
    $(“<p>This is a new paragraph.</p>”).insertAfter(“button”);
  });
});

希望本文所述对大家的jQuery程序设计有所帮助。