1 事件委托
在做后台的模板的时候,有一些元素板块是动态添加的,无法执行写的click函数,所以了解了通过事件委托来执行函数。
网址链接 http://www.webmxx.com/Blog/html/addprod.html
在区块划过时候,点击编辑的按钮,本来是应该弹出对应的右侧区块,但是如果这么写:
$("..mask-edit").on("click" ,function () {
var rightBoxtop = $(this).offset().top - 94;
$(".js-editform").css("top" , rightBoxtop)
$(".form").hide();
var thisTitle = "."+ $(this).parents(".relative").attr("title");
$(thisTitle).show();
});
由于出现的灰色部分是动态添加的,所以不能执行。因此使用的是事件委托:
// 对于动态变化的进行事件委托
$(".relative").on("click",".mask-edit",function () {
var rightBoxtop = $(this).offset().top - 94;
$(".js-editform").css("top" , rightBoxtop)
$(".form").hide();
var thisTitle = "."+ $(this).parents(".relative").attr("title");
$(thisTitle).show();
});
事件委托的原理是事件冒泡。
事件不会在直接绑定的元素上触发,但当参数选择器匹配到后代(内部元素)的时候,事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如,由最内层元素到最外层元素)开始冒泡,并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器,那么这些元素上的事件也会被触发。
.on( events , [ selector ] , function(){} )
关于本例子的其他要点
1 使用 . keyup 实现input同步输入
2 文件上传部分涉及到File API
2 效果延迟 dely()
$('#header') .css({ 'top':-50 }) .delay(1000).animate({'background': '#ccc'}, 800);
3 判断某个元素是否含有某个class,是否存在某些属性,怎样移除某些属性
$('who').hasClass('nav-top');
if( typeof($("#aid").attr("rel"))=="undefined" )
jquery移除某个jquery对象的某个属性: $(".main").removeAttr("style");
4 清除动画积累 stop()
1、stop([stopAll], [gotoEnd])方法有两个参数(当然可以不传或直传一个),其中stopAll的意思是清除之后的所有动画。gotoEnd的意思是,执行完当前动画。
2、stopAll == true时,停止队列中的所有动画, stopAll ==false时,只停止队列中的当前动画,后续动画继续执行。
3、gotoEnd == true时,立即跳到当前动画的末尾, gotoEnd ==false时,停在当前状态。且gotoEnd只有在设置了stopAll的时候才起作用
4、在项目中,如果不进行动画队列清理,就会产生动画积累的问题。因此在写入动画时,最好先清除队列中的重复动画。
在项目中,例如做下拉二级导航效果,用到jquery的slideDown()与slideUp()方法,当鼠标快速晃动后,如果不进行动画队列清理,就会产生动画积累,出现问题。
例如:
$(".nav li.has_list").hover(function(){
$(this).children("a").addClass("curr");
$(this).children("div").stop(true,true).slideDown(400);
},function(){
$(this).children("a").removeClass("curr");
$(this).children("div").stop(true,true).slideUp(400);
}
);
stop() 方法在 banner轮播图效果制作中也提到过。
点击我查看banner录播图