推荐订阅源

在页面加载后执行任务

$(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’);

});