$(document).ready(function()详解

本文主要是介绍$(document).ready(function()详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、

$就是jquery的简写，$()就是一个选择器，document是html的所有元素，$(document）返回一个数组，而这个数组是一个对象，这个对象调用ready方法，function则是ready里面的参数，就是说等这个页面全部加载完之后就去执行写入的js。而且在$(document）.ready(function(){ });里面写入的js特效是和下一个里面写入的特效是不冲突的，俩者之间是不影响的，因此可以通过$(function(){});在一个页面中加载多个js。

个人意见：不管怎么样，要写一个js特效，就加一个$(document）.ready(function(){ });，当然这个是有简写的，就是$(function(){});

2、

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

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

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

请注意：请不要在一个页面同时使用ready()函数和<body>元素的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代码为例：

<input id="btn" type="button" value="点击" />
<div id="message"></div>

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

// 形式一
$(document).ready( function(){// 为btn按钮绑定点击事件$("#btn").click( function(){alert("你点击了按钮!");} );
} );// 形式三
$( function(){$("#message").html( '<span style="color:green;">文档加载完毕!</span>' );  
} );

运行代码

在多个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来访问jQueryabc("#message").html( "当前jQuery版本是：" + abc.fn.jquery ); 
} );