JQ 常用方法

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录播图