0

0

jQuery.ready() 函数实例用法详解

巴扎黑

巴扎黑

发布时间:2017-06-25 10:22:24

|

1575人浏览过

|

来源于php中文网

原创

ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。

该函数的作用相当于window.onload事件。

你可以多次调用该函数,从而绑定多个函数,jQuery将在DOM文档结构加载完毕后按照绑定顺序立即执行这些函数。

请注意:请不要在一个页面同时使用ready()函数和

元素的onload事件绑定函数,因为它们之间并不完全兼容。如果你必须使用load,那么请不要使用jQuery的ready()和load()来为window或更多指定项(例如图片)添加load事件处理器。

该函数属于jQuery对象(实例)。

语法

jQueryObject.ready( fn )

参数

参数 描述

fn Function类型指定需要执行的函数。

ready()将为函数参数fn传递一个参数,这个参数就是jQuery标识符,你可以自定义该参数的名称,并将其用作jQuery的别名。

返回值

ready()函数的返回值为jQuery类型,返回当前jQuery对象本身。

与window.onload事件相比,ready()具有较高的执行优先级。window.onload必须等到当前页面中包括图片在内的所有元素全部加载完毕后才会执行;ready()是等到HTML结构绘制完毕后就立即执行,不必等到图片等所有资源加载完毕。

绝大多数时候,你都可以使用ready()来取代window.onload。不过,也有一些例外情况,比如使用:target选择器时,你就必须使用window.onload事件(因为它还要依赖文档结构之外的某些内容)。

示例&说明

ready()函数有以下三种等价的形式:

function handler(){

    //这里是需要执行的代码

}

// 形式一

$(document).ready( handler );

// 形式二

$( ).ready( handler ); // 不推荐该形式

// 形式三

$( handler );

以下面这段HTML代码为例:

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载

以下jQuery示例代码用于演示ready()函数的具体用法:

// 形式一

$(document).ready( function(){

    // 为btn按钮绑定点击事件

    $("#btn").click( function(){

        alert("你点击了按钮!");

    } );

} );

// 形式三

$( function(){

    $("#message").html( '文档加载完毕!' );  

} );

在多个JS库共存的情况下,变量$的控制权可能会交给其它的JS库,例如Prototype。此时,在全局作用域中我们只能使用变量jQuery。不过ready()函数会传入一个参数;jQuery,因此我们可以自定义参数名称,从而实现在函数内继续变量$来访问jQuery库(你也可以定为其他名称,然后用该参数变量来访问jQuery)。

// 载入Prototype库文件

// 载入jQuery库文件

//让出对变量$的控制权

jQuery.noConflict();

// 基于Prototype进行DOM操作(变量$的控制权在Prototype手中)

$("myDiv").setStyle( {color: "#ffffff"} );

jQuery(document).ready( function( $ ){

    // 在函数内部,我们仍然可以使用变量$来访问jQuery

    $("#message").html( "当前jQuery版本是:" + $.fn.jquery );     

} );

jQuery(document).ready( function( abc ){

    // 在函数内部,我们可以使用变量abc来访问jQuery

    abc("#message").html( "当前jQuery版本是:" + abc.fn.jquery ); 

} );

相关专题

更多
c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

79

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

46

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

121

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

12

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

15

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

71

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

370

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

45

2026.01.09

php网站搭建教程大全
php网站搭建教程大全

本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

12

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go 教程
Go 教程

共32课时 | 3.6万人学习

麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 5.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号