JS和THML之间的交互是通过用户和浏览器操作页面是引发的事件来处理的。当文档或者他的某些元素发生某些变化或者操作时,浏览器会自动生成一个事件。虽然传统的js事件能完成这些交互,但jQuery增加并扩展了基本事件处理机制。
加载DOM
1、jQuery 中用$(document).ready()
方法代替传统的window.onload方法。需要注意,两者是有差别的。
window.onload方法是在网页中所有元素(包括元素的所有关联文件)完成加载到浏览器后执行,即js此时才能访问网页中的元素;$(document).ready()
在DOM完成就绪时就可以被调用,例如对于一个大型的图库网站,只要DOM记载完毕,不需要等待所有图片下载完毕就能操作,不过图片的高度和宽度这样的属性此时不一定有效。
2、onload事件一次只能确保对一个函数的引用,他会自动用后面的函数覆盖前面的函数。
window.onload = one;
window.onload = two; //只执行two函数
$(document).ready()方法会在现有的行为上追加新的行为,这些行为会根据注册的顺序依次执行。
$(document).ready(){ //先执行one(),再执行two()
one();
}
$(document).ready(){
two();
}
3、 (document).ready(function())可以简写成 (function(){})或者$().ready(function(){})。
事件绑定
bind(),接收3个参数,第一个是事件类型,第二个是可选参数,作为event.data属性值传递给事件对象的额外数据对象,第三个是用来绑定的处理函数。
//点击标题,如果内容隐藏则显示,如果内容显示则隐藏
$(function(){
$("#panel h5.head").bind("click",function(){
if($(this).next().is(:visible)){
$(this).next().hide();
}else{
$(this).next().show();
}
})
});
可以把上面的例子简写成:
$(function(){
$("#panel h5.head").click(function(){
if($(this).next().is(:visible)){
$(this).next().hide();
}else{
$(this).next().show();
}
})
});
合成事件
1、hover(enter,leave),用于模拟光标悬浮事件。当光标移动到元素上是,触发enter函数,当光标移除这个元素时,触发leave函数。
$(function(){
$(#panel h5.head).hover(function(){
$(this).next().ahow();
},function(){
$(this).next.hide();
});
});
2、toggle(fn1,fn2,…fnN),用于模拟鼠标连续单击事件。第一次单击触发第一个函数,第二次触发第二个,依次类推。
$(function(){
$(#panel h5.head).toggle(function(){
$(this).next().ahow();
},function(){
$(this).next.hide();
});
});
另外一个作用,切换元素 可见状态,上面的代码还可以写成:
$(function(){
$(#panel h5.head).toggle(function(){
$(this).next().toggle();
},function(){
$(this).next.toggle();
});
});
事件对象的属性
1、event.tyep,获取事件的类型
$("a").click(function(event){
alert(event.type); //"click"
return false; //阻止链接跳转
})
2、event.preventDefault(),阻止默认的事件行为。
3、event.stopPropagation(),阻止事件的冒泡。
4、event.target,获取到触发事件的元素。
5、event.pageX和event.pageY,获取到页面相对于x坐标和y坐标。
6、event.which,在鼠标单击事件中获取鼠标的左中右键;在键盘事件中获取按键。
移除事件
unbind(),第一个参数是事件类型,第二个参数是将要移除的函数。
(1)、如果没有参数,删除所有绑定的事件;
(2)、如果提供了事件类型作为参数,只删除该类型的绑定事件;
(3)、如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理程序函数会被删除。
另外,如果只需触发一次,使用one()方法。当处理函数绑定一次后立即删除,即在每个对象上,事件处理函数只会执行一次,用法和bind()类似。
jQuery中的动画
1、show()和hide()方法
为一个元素调用hide()方法,会将该元素的display样式改为none,修改之前会先记住原先display的属性值。show()方法将元素的display属性值设置为先前的显示状态。
可以指定参数slow,normal,fast或直接指定显示的速度(毫秒)。show(“slow”),hide(100)
2、fadeIn()和fadeOut()方法
fadeOut()方法在指定的一段时间内降低元素的不透明度,直到元素完全消失(display:none).fadeIn()方法则相反。
3、slideUp()和slideDown()方法
只会改变元素的高度。如果一个元素的display属性值为none,调用slideDown()将这个元素又上至下延伸显示,slideUp相反,元素将由下到上缩短隐藏。
4、自定义动画方法animate()
animate(params,speed,callback)。
params:一个包含样式属性及值的映射;
speed:速度,可选;
callback:在动画完成时执行的函数,可选。
综合动画,点击后让他向右移动的同时增大他的高度,并将他的不透明度从50%变换到100%,然后再让他从上到下移动,同时让他的宽度变大,当完成这些效果后,让他以淡出的方式隐藏。
$(function(){
$("#span1").css("opacity","0.5");
$("#span1").click(function(){
$(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},300)
.fadeOut("slow");
});
});
css()方法并不会加入到动画序列中,而是立即执行。可以使用回调函数对非动画方法实现排队。
$(function(){
$("#span1").css("opacity","0.5");
$("#span1").click(function(){
$(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},300,function(){
$(this).css("border","5px solid blue");
})
});
});
5、停止动画好判断是否处于动画状态
stop([clearQueue],[gotoEnd])。
两个参数都是布尔值,第一个表示是否要清空未执行的动画序列,设置为true把接下来尚未执行完的动画序列都清空;第二个表示是否直接将正在执行的动画跳转到末状态,通常用于后一个动画需要基于前一个动画末状态的情况。
直接使用stop()方法,会立即停止当前正在执行的动画,如果接下来还有动画等待继续执行,则以当前状态开始接下来的动画。
JQuery只能设置正在执行的动画的末状态!
$(element).is(":animated") //判断元素是否正处于动画状态