在页面加载后执行任务
$(document).ready()可以让jQuery响应网页加载事件,触发函数中的代码
代码执行的时机选择
我们已经知道,$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方 式.当文档完全下载到浏览器中时,会触发window.onload事件,这意味着页面中的全部元素对JavaScript而言都是可访问的.而通 过$(document).ready()注册的事件处理程序,会在DOM完全就绪时就可以访问,这意味着所有元素对脚本来说是可访问的,但并不意味着关 联文件已下载完成
简单的事件
$(document).ready(function(){
$(‘#some-id’).bind(‘click’,function(){
$(‘body’).addClass(‘large’);
$(this).addClass(‘selected’); //$(this)为some-id元素创建一jQuery对象
});
});
通过bind方法,可以指定任何JavaScript事件,并为事件添加一种行为.当触发任何事件处理程序时,关键字this引用的都是携带相应行为的DOM元素,通过在事件处理程序中使用$(this)可以为相应的元素创建一个jQuery对象
显示和隐藏高级特性
$(document).ready(function(){
$(‘#some-id’).toggle(function(){
$(‘#switch’).addClass(‘hidden’);
},function(){
$(‘#switch’).removeClass(‘hidden’);
});
});
toggle方法接受两个参数,而且这两个参数都是函数,第一在元素上单击会调用每个参数,第2次单击则会调用第2个函数,此后,这两个函数会随着每次单击交替执行
$(document).ready(function(){
$(‘#some-id’).click(function(){
$(‘#switch’).toggleClass(‘hidden’);
});
});
toggleClass在为元素应用/移除类之前,先用toggleClass方法检查类是否存在.如上面,若switch元素已应用了hidden类,则移除它,若没有应用,则应用它.这可以实现更简单的显示/隐藏功能
$(document).ready(function(){
$(‘#some-id’).hover(function(){
$(this).addClass(‘hover’);
},function(){
$(this).removeClass(‘hover’);
});
});
同.toggle方法一样,.hover函数也接受两个函数参数,第一个函数会在鼠标进入被选择元素时执行,第2个函数会在鼠标离开被选择元素时执行
阻止事件冒泡
$(document).ready(function(){
$(‘#some-id’).click(function(event){
if(event.target == this){
//event.target保存着发生事件的目标元素
}
//停止事件传播
event.stopPropagation();
//阻止事件默认操作(比如按了submit按纽会提交表单,这就是默认操作,和IE中的return false同效果)
event.preventDefault();
});
});
移除事件处理程序
$(document).ready(function(){
var toggleswitch = function(){
……
};
$(‘switch’).click(toggleswitch);
//移除click事件
$(‘switch’).unbind(‘click’,toggleswitch);
//对于只触发一次,随后立即解除绑定的情况,有一种简写方法.one()
$('switch’).one(‘click’,toggleswitch);
//模拟用户操作(模拟用户单击鼠标)
$('switch’).trigger(‘click’);
});