4.3.1 jQuery基础(2)

本文介绍jQuery中的文档就绪处理器概念及其优势,并探讨如何在同一页面中同时使用jQuery和Prototype库,确保代码兼容性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

4.3.1 jQuery基础(2)

2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译 人民邮电出版社 我要评论(0) 字号: T | T
一键收藏,随时查看,分享好友!

《Ajax实战:实例详解》第4章Ajax开源工具集,讨论支持Ajax的JavaScript库并进一步讲解Prototype、Dojo工具箱、jQuery和DWR库,另外特别介绍了它们给Ajax带来的变化。本小节为jQuery基础。

AD: 2013大数据全球技术峰会低价抢票中


    4.3.1  jQuery基础(2)

    3.在文档就绪时执行代码

    在页面中,我们往往需要执行一些初始化代码,以便在用户与应用交互前先做好准备工作。通常我们使用窗口对象的onload事件处理器来做初始化。它保证在执行onload代码前页面已加载完毕,由此保证了DOM元素已经存在,从而可以进行DOM操作了。

    但是onload有一个问题,就是它不仅会等待文档主体加载完毕,还会等待图像等资源加载完毕。如果这些图像不在浏览器的缓存中,就必须从服务器上去拉回来,这样初始化代码运行的那个时间点就远远迟于文档本身加载完成的那个时间点,而当时已经完全可以执行初始化代码了。

    jQuery帮我们解决了这一问题,它引入了"文档就绪处理器"的概念。这一机制令函数在文档加载完成之时执行,而不必等待图片及onload事件处理器。

    要使用这一机制,我们需要对文档元素进行包装,并调用包装过的文档对象上的ready()方法:

     

    一旦DOM就绪并可供操作,传给ready()的函数就会执行。注意,当你同时使用ready机制和页面上的onload事件处理器时,两者都会执行,且ready事件处理器会先于onload事件处理器被触发。

    ready()处理器有一个简略记法,即直接用jQuery的包装器对一个函数进行包装。下面的代码片段:

     

    与之前那段声明ready()处理器的代码是等价的。

    4.同时使用jQuery和Prototype

    Prototype非常流行,而jQuery也迅速走红。因此,网页创作者完全有可能想在一个页面中同时使用这两个库。

    总的来说,jQuery遵循着最佳实践的准则,避免污染全局命名空间(global namespace)--例如将工具函数这类构造放到jQuery命名空间中而不是直接放在全局命名空间中。不过有一个地方存在冲突,就是我们之前提到过的,使用了$这一全局名称。

    jQuery,作为JavaScript程序库世界中的一个模范公民,已经预先考虑到了这个问题。当在一个页面中同时使用Prototype和jQuery时,只要在两个程序库加载完成后调用jQuery的jQuery.noConflict()工具函数,就会使得$名字的功能恢复成Prototype的定义。

    通过jQuery命名空间,你仍可以使用jQuery的功能,你也可以定义简短的别名。对于将jQuery与Prototype结合使用的情况,jQuery文档建议使用如下的别名:

     

    好了,我们已经学习了足够的预备知识了!

    在本节后续的解决方案中我们将看到jQuery的更多用途。即便如此,我们也只是稍微触及到了jQuery的皮毛。如果你在学习这些解决方案后发现自己已被jQuery的能力所深深吸引,那么我们强烈建议你访问http://docs.jquery.com/,阅读全面的在线文档并了解jQuery所提供的其他能力。

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值