jQuery事件和动画sss

加载DOM：

$(document).ready()方法,可以缩写成$(function(){}),$(document)也可以简写成$() 与传统的window.onload有所不同

1: onload方法将会在网页中所有元素被加载到浏览器后才执行 .ready方法将会在dom完全就绪时就可以被调用,并不等于所有元素关联的文件已经下载完毕

2: onload函数只能保存一个对函数的引用,而ready可以保存多个引用

事件的绑定

bind(type,[data],fn)

绑定元素的事件,type为html事件类型（blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、errror）,js的形式(去除on),data为传递的参数(可选),fu为监听的函数

注意data需要使用[]进行包装,在监听函数中使用一个参数进行捕获,e.data获取数组形式后,进行访问,也可以使用简写的进行绑定事件（像click、mouseover、mouseout这类事件，程序中常会用到）,如:

$("p").click(function(){$(this) //为源对象})

合成事件,hover(),toggle() 用于两个事件之间的切换,分别为移过和点击后触发 ,其中hover的使用例子为hover(fun,fun2),而taggle则可以带更多的function,使用元素.toggle(),带指定的事件类型,可以模拟事件: 如 $(".vic").toggle("click")

$(function(){

    $("#panel h5.head").toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

事件的冒泡处理

与Flex类似,JavaScript中的事件也同样存在,捕获--触发--冒泡 三个节点.

比较常见的情况是,在子元素触发事件时,如果父元素也监听同类事件,那么也会一起触发,并向上冒泡

看见，内层span被点击的时候，就会触发外部div和body元素上的click事件，引起冒泡。

jQuery对事件监听函数,都会默认传递一个参数,一般命名为event(非必须,也可以任意命名)

停止事件冒泡的方法 event.stopPropagation();

组织默认行为--如超链接的跳转 event.preventDefault();

更简单的方式:

return false,对上面两种都起同样的作用

由于不同浏览器对事件捕获阶段的支持不同,所有jQuery并不支持事件捕获，和冒泡相反，从顶端开始往下开始触发。

event参数中的其他属性

event.type ---事件的类型,如click

event.target---事件的html元素对象

event.relatedTarget() --如在mouseover事件触发时,相关的元素,如另外一个mouseout元素

event.pageX()/event.pageY() --相对于页面的x,y坐标

event.which() --获取与事件相关的键盘或鼠标的按键值

event.metaKey()--判断事件是否包含ctrl按键

event.originalEvent()--指向原始的事件对象

移除事件

    unbind("type") 移除元素上指定类型的事件,也可以不带参数,移除该元素所有的事件.也可以带两个参数,移除指定事件 ,类型上,不同的监听函数(一个事件可以有多个监听函数) 获取监听事件函数的方法,在开启监听时: $("btn").bind("click",myfun=function(){....}); //移除时,就可以使用myfun进行移除

one(...) 类似bind的使用,指定监听的事件类型,已经对于的函数,区别在于one只会触发一次后,就被自动移除

模拟操作

      trigger("..") 触发元素的指定事件,可以使用bind绑定任意自定义事件与对应的事件监听函数,然后使用trigger触发

      注意:使用trigger时,默认将会触发浏览器对该事件的默认行为,比如focus等,也会使组件获取焦点,可以使用。可以用来模拟用户的操作，来达到点击的效果。

     triggerHandler("focus"),将会取消浏览器的默认行为。比如，$("input").trigger("focus");

以上代码不仅触发input绑定的focus事件，也会使input本身得到焦点，这是浏览器的默认操作。

其他：

一次绑定多个事件

      bind("mouseover mouseout") 可以同时绑定两个不同的事件,注意只能使用一个函数进行监听给事件添加命名空间,便于管理

     bind("click.p",fun...) ,移除的时候,可以批量使用ubind(".p") 进行移除同命名空间的事件

相同事件名称,不同命名空间执行方法

在trigger("click!"),中注意使用!,将只会触发对应的非命名空间的方法

jQuery中的动画

show() hide()

会根据display的属性值,进行隐藏和显示, 注意需要使用标准模式的xHtml的DTD头部 ,否则可能引起动画抖动，标准模式即要求文件头部包含如下的DTD定义：。。。

可以带给这两个方法带参数,表示不同的显示效果,主要是现实速度上的不同。关键字有：slow，600毫秒；normal：400毫秒；fast：200毫秒.或者直接指定一个数字,单位是毫秒.

$("element").show("slow");

$("element").hide(1000);

   关键字有: slow,hide,normal(400),fast(200),毫秒的时间 ,也可以指定具体的数值,如 show(1000) 表示1000毫秒内 ,

渐变效果: fadeIn()方法和fadeOut()方法,只通过修改元素的不透明度,不改变元素的高度:

slideUp()方法和slideDown()方法,用于收放组件，值改变高度，不改变透明度

animate() 自定义动画类型,弥补其他三种动画只能同时执行一种缺陷

注意需要在样式里面设置position: relative或absolute其他绝对位置的布局,否则有可能导致效果无法显示

animate({left:"500px"},3000,collback); 其中

第一个{}里面用json形式设置动画要修改的属性

第二个3000,表示持续时间,也可以使用slow等关键字代替

第三个collback为回调函数

属性中 可以使用+= 来对元素进行添加

常用的属性有left,right,height,width,top,opacity(透明度,使用1-0之间),marginLeft,scrollTop如果分开,会连续的执行,并不会时执行 也可以使用链式的方法,设置多个动画效果,逐步执行

在使用动画时,注意对元素属性的修改,如样式,将不会在动画结束后执行,需要使用回调函数中进行变更 同样回调函数也可以作用与其他的3个动画

 使用stop可以立即结束指定元素的动画,不带参数,只会停止当前链表中的一个动画,带true参数则会结束所有动画 最多可以带两个参数,其中两个都为true时,将会停止所有动画,并改变成动画的最终结果,一个为true时,将会停止 动画效果,并且保持现状

. is(":animated") 判断指定元素是否在动画效果

其他动画效果

       toggle() 切换元素的可见性,自动来回切换隐藏与显示 ,slideToggle() 通过高度来回切换匹配元素的可见性 , fadeTo() 使用透明度切换匹配元素的可见性,参数为时间和结果的透明度

案例：视频动画的滚动

1.当视频展示内容处于最后一个版面的时候，如果再向后，应该跳到第一个版面

2.如果在第一个，再向前，应该跳到最后一个

3.蓝色圆点应该一起切换

$(function(){

    var page = 1;

    var i = 4; //每版放4个图片

    //向后 按钮

    $("span.next").click(function(){    //绑定click事件

     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素

 var $v_show = $parent.find("div.v_content_list"); //找到“视频内容展示区域”

 var $v_content = $parent.find("div.v_content"); //找到“视频内容展示区域”外围的DIV元素

 var v_width = $v_content.width() ;

 var len = $v_show.find("li").length;

 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数

 if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。

$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面

page = 1;

}else{

$v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面

page++;

 }

$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

   });

    //往前 按钮

    $("span.prev").click(function(){

     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素

 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”

 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域

 var v_width = $v_content.width();

 var len = $v_show.find("li").length;

 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数

 if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。

$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");

page = page_count;

}else{

$v_show.animate({ left : '+='+v_width }, "slow");

page--;

}

$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

    });

});