jQuery-事件以及动画

事件：

1、//方法1

$(window).load(function(){

})

window.onload=function(){

}

//方法2

function one(){

alert("one");

}

function two(){

alert("two");

}

（

//这样的执行结果应该是two，因为onload事件只会保存对一个函数的引用

window.onload = one;

window.onload = two;

）

修改为以下格式：

window.onlaod=function(){

one();

two();

}

在jQuery中，还可以这样，jQuery的onlaod事件是可以执行多个函数的

function one(){

alert("one");

}

function two(){

alert("two");

}

$(document).ready(function(){

one();

})

$(document).ready(function(){

two();

})

2、

$(document).ready(function(){

two();

})

可以简写成：

$(function(){

})

或

$().ready(function(){

})

//$()的默认情况下就是document

3、事件绑定：bind（事件类型 ，可选参数（作为event.data属性值传递给事件对象的额外数据对象，处理函数fn）

bind（）方法可以多次调用，this引用的是携带相应行为的DOM元素$（this）

方法1：

$(function(){

$("#panel h5.head").bind("click",function(){

if($(this).next().is(":visible")){

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

}else{

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

}

})

})

方法2：

$(function(){

$("#panel h5 .head").bind("mouseover",function(){

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

}).bind("mouseout",function(){

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

})

})

方法3：

$(function(){

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

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

}).mouseout(function(){

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

})

})

4、jQuery有两个合成事件：hover（）以及toggle（）方法

hover(enter,laeve)

$(function(){

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

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

}.function(){

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

})

})

5、toggle（）方法

方法1：

$(function(){

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

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

},function(){

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

})

})

方法2：

//toggle()还有一个作用是切换元素的可见性，如果元素可见，切换后则为隐藏，隐藏切换后则是可见的

$(function(){

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

$(this).next().toggle();

},function(){

$(this).next().toggle();

})

})

6、事件冒泡：

停止事件冒泡：event.stopPropagation（）

阻止事件默认行为：event.preventDefault（）

如果想对事件对象停止冒泡以及默认行为，在可以事件处理函数中返回false：

event.stopPropagation（）改成  return false

event.preventDefault（） 改成 return false

7、在jQuery中不支持事件捕获，如果需要事件捕获，使用原生的js代码

8、event.type 事件类型

event.target    获取触发事件的元素

event.pageY以及event.pageX 是获取到光标相对于页面的y坐标以及x坐标，如果页面有滚动条还要加上滚动条的宽度以及高度

event.which   是在鼠标事件中获取到鼠标的左右中键，分别返回1,2,3,

9、移除事件：unbind（“click”）

$(function(){

$("#btn").bind("click",myFun1 = function(){

$("#test").append("<p>wwwww</p>");

}).bind("click",myFun2 = function(){

$("#test").append("<p>wwwwssw</p>");

}).bind("click",myFun3 = function(){

$("#test").append("<p>wwwwqw</p>");

})

})

//单独删除某一事件

$("#delTwo").click(function(){

$("#btn").unbind("click",myFun2);

})

10、one（）方法是对于只需要触发一次的，触发一次后就会解除绑定，也就是说只要在用户第一次点击的时候，处理函数才会生效

11、trigger（”click”）   -----eg：用户在进入页面后就会触发click事件，不需要用户去主动点击

$(“#btn”).trigger(“click”) 等价于$(“#btn”).click()

另外还可以通过传递数据参数：

$("#btn").bind("myClick",function(event,message1,message2){

$("#test").append("<p>"+message1+message2+"</p>");

});

$("#btn").trigger("myClick",["我的自定义","事件"]);

trigger()方法执行事件后会执行浏览器的默认事件，如果不想执行默认事件，需要使用以下方法：

$("input").triggerHandler("focus")---取消聚焦事件

12、还可以一次性为元素绑定多个事件

$(function(){

$("div").bind("mouseover mouseout",function(){

$(this).toggleClass("over");

})

})

13、为事件添加命名空间

$(function(){

$("div").bind("click .plugin",function(){

$("body").append("<p>click</p>");

});

$("div").bind("mouseover .plugin",function(){

$("body").append("<p>click</p>");

});

$("div").bind("dbclick",function(){

$("body").append("<p>click</p>");

});

$("button").click(function(){

$("div").unbind(".plugin");

//会删除含有命名空间.plugin的事件，不会删除dbclick事件

})

})

14、

$(function(){

$("div").bind("click .plugin",function(){

$("body").append("<p>click</p>");

});

$("div").bind("click",function(){

$("body").append("<p>click</p>");

});

$("button").click(function(){

$("div").trigger("click!");

//点击button按钮只会触发click事件，click后面的感叹号是用来匹配所有不包含在命名空间的click方法

//当将感叹号去了之后会触发两个click事件，包含在命名空间中的click事件

})

})

jQuery中的动画：

1、show()以及hide（）方法

相当于display = none /block/inline-block

在两个方法中添加参数，slow,fast,normal,获取是一个数值

2、fadeIn（）以及fadeOut（）方法：只改变元素的透明度

3、slideUp（）以及slideDown（）方法：只改变元素的高宽，slideUp是由下到上缩短隐藏，slideDown是由上到下显示

4、animate（）方法：

animation（params（样式属性），speed，callback）

$("#myImg").click(function(){

$(this).animate({left:"500px",height:"200px"},300);

})

5、停止元素的动画：stop（[clearQuere],[gotoEnd]）,两个参数都是一个布尔值

6、判断元素是否处于动画状态：

if(! $(element).is(":animated")){

}

7、延迟动画：delay（10000）

8、toggle（speed，[callBack]）

slideToggle(speed,[easing],[callback])—通过高度变化切换匹配元素的可见性

fadeTo（speed，opacity，[callBack]）---将元素的不透明度以渐进方式调整到指定值

fadeToggle（speed，[easing],[callBack]）---通过透明度变化切换匹配元素的可见性