bind() 绑定事件: 参数1,绑定的时间类型;参数2,触发该事件后执行的函数。
事件触发器
Trigger(“参数一” “参数二”)触发器,不仅可以触发浏览器有的事件名称,还可以触发自定义的事件,就相当于调用参数1绑定的事件,参数二可以将需要的参数返回到执行的函数中
例如:
$(“h5.head”).bind
("myClick",function(event,mes1,mes2,mes3)
{alert(mes1+mes2+mes3);
$("div.content").hide(5000);});
$("h5.head").trigger("myClick",['name','age','gender']);
这里会输出:nameagegender就是trigger传过去的三个参数
jQuery有两个合成事件:hover()和toggle()方法hover(enter,leave)方法 语法结构:当光标移动到元素上时,会触发第一个函数;光标移出时出发第二个函数,就相当于
$("#id").mouseover(function(){}).mouseout(function(){})
例如 $("h5.head").hover(function(){
$("div.content").hide();
},function(){
$("div.content").show();
});
Toggle()方法用于模拟鼠标连续单击事件,第1次单击元素,触发第一个函数,再次单击同一个元素,触发第二个函数,如果有更多函数,依次触发.
例如 $("h5.head").toggle(function(){
$("div.content").hide();
},function(){
$("div.content").show();
});
事件对象的属性
Event.type
event.pageX 光标相对于页面的X坐标和Y坐标
event.pageY
Event.which
在鼠标单击事件中获得鼠标的左中右键
在键盘事件中获得键盘的按键
这个有点麻烦,先看例子:$("h5.head").click(function(e){
$("#xy").html("X:"+e.pageX+".....Y:"+e.pageY);
})
});这个实现点击的时候将鼠标坐标输入$("xy")中
这个函数的参数是个对象,在你触发事件的时候就传过来了。至于你在函数小括号里写的那个只是起个名字。其他的type()pageX()pageY()which()这些都穿过来参数的属性。对象.属性调用就好了
注意。这里的属性没有小括号。
jQuery中的动画
1.show() 和 hide()方法
用jQuery做动画要求在标准模式下,否则可能引起动画抖动,标准模式就是在文档的头部有DTD定义部分
Show()参数:
速度参数slow(600毫秒内显示出来)
normal(400毫秒内显示)
fast(200毫秒)
2.fadeIn()和fadeOut()方法
只改变元素的不透明度
fadeIn()淡入 慢慢显示出来
fadeOut()淡出 慢慢消失
3.slideUp() 方法和slideDown()方法和slideToggle()方法
只会改变元素的高度:
假如display:none slideUp()自下往上缩短隐藏 slideDown()自上往下延伸显示,前两个都是单向的,就是上去就不下来了。第三个slideToggle()是第一次点击自上往下延伸显示,第二次点击缩短隐藏
用法都一样选中元素+.+放法名 三个函数的参数都是速度和回调函数
4,自定义动画:animate
如果上面3种仍无法满足我们的需要,就需要自定义动画
语法结构:
Animate(params,speed,callback)
动画需要position:relative
例子: $(function(){
$("div.content")
.animate({width:500,left:"+=100px",opacity:0.3},3000,function(){
$(this).toggle();
})
.css("background","red")
.click(function(){
$(this).fadeOut();
});
})
animate函数的三个参数分别是CSS样式,时间,回调函数。这个函数说白就是在某个时间完成一种效果。这效果是在参数1中写的。,这些执行完了要是还有事要做就写在回调函数里,回调函数在执行完之后自动运行
Stop()有两个参数,1,true表示把当前元素尚未执行完的动画对列清空
2,让正在执行动画到达结束时的状态,例如隐藏动画,三秒时间内如果触发了显示事件,就会把隐藏做完才会显示,这时候加stop()就好了