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 ); 

} );

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

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

精品课程

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

共32课时 | 4.4万人学习

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

共34课时 | 5.2万人学习

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

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