$(document).ready()

document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件
一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
 
用jQ的人很多人都是这么开始写脚本的:
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:

 

$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;

 

$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。

 

学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前。

实例

在文档加载后激活函数:

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});

亲自试一试

定义和用法

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。

由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档,因此无需选择器。

允许使用以下三种语法:

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)


If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

复制代码 代码如下:

$(document).ready(function() {
// put all your jQuery goodness in here.
});


有很多方法可以确保事件在页面上正常工作,$(document).ready()比其它方法要更有优势。首先,你不必在HTML上放置任何“ 行为性的”标记。另外,你可以将JavaScript/jQuery写入一个独立的js文件,这样既容易维护,又保证了js与页面内容的隔离。如果你在浏览网页时更加细心,你就会常常看见这种情况:当你将鼠标悬停在一个连接时,有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所造成的。

在一些使用traditional JavaScript的页面,你会在<body>标签中看见“onload”属性。这会导致一个问题:它限定了在body上只能有一个函数事件。是的,因为它又往内容中添加的“行为性的”标签。如果你想解决这个问题,请参考Jeremy Keith的书:DOM Scripting,里面讲述了如何在一个单独的js文件里创建一个 “addLoadEvent” 函数,它允许多个函数可以在body里被加载。但是这种方法需要为本来很简单的问题编写相当数量的代码,另外,这种方法是在加载window时触发这些事件的,这不得不让我再一次想起 $(document).ready()的好处。

使用 $(document).ready(),你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说,一旦DOM在浏览器中注册后,$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时,特效就可以运行了。 

<think>我们正在讨论的是jQuery的$(document).ready()方法的使用。用户之前的问题涉及到BootstrapTable的配置,但当前问题聚焦于$(document).ready()。根据引用,特别是引用[1][2][3][5],我们得知:1.$(document).ready()是jQuery提供的,需要引入jQuery库。2.它的作用是当DOM(文档对象模型)加载完成后就执行,而不需要等待图片等其他资源加载完成。3.与window.onload的区别在于:window.onload是等待整个页面(包括图片等)加载完成才执行,而$(document).ready()只需要DOM结构加载完成即可。用户可能的需求:如何在代码中正确使用$(document).ready(),尤其是在配置BootstrapTable等需要操作DOM的场景。因此,我们给出以下回答:###一、基本概念`$(document).ready()`是jQuery中用于在DOM(文档对象模型)完成加载后立即执行指定函数的机制。它比JavaScript原生的`window.onload`事件触发更早(不需要等待图片等资源加载)[^5]。###二、使用语法1.**标准形式**```javascript$(document).ready(function(){//此处编写DOM操作代码//例如:初始化表格});```2.**简化形式**(推荐)```javascript$(function(){//等同于$(document).ready()//例如:$('#table').bootstrapTable({...});});```###三、示例场景(结合用户之前的BootstrapTable配置)假设需要在DOM加载完成后初始化一个BootstrapTable:```javascript//引入jQuery和BootstrapTable相关库后$(function(){$('#myTable').bootstrapTable({columns:[{title:'ID',field:'id',visible:true},{title:'名称',field:'name'}],data:[{id:1,name:'Item1'},{id:2,name:'Item2'}]});});```>关键提示:此代码必须放在DOM中`<tableid="myTable">`元素之后(或放在页面底部),或者确保在`$(document).ready()`内执行,因为此时DOM元素已经加载完成[^2]。###四、与window.onload对比|特性|$(document).ready()|window.onload||-------------------|------------------------------------|-----------------------------------||**执行时机**|DOM树构建完成即执行|整个页面包括图片等资源加载完成||**多次使用**|可以定义多个,均执行|后一个会覆盖前一个||**兼容性**|依赖jQuery|标准JavaScript|###五、最佳实践1.**引入位置**:将`<script>`标签放在`</body>`结束前,或使用`$(document).ready()`确保DOM就绪。2.**避免阻塞**:不要在`$(document).ready()`中执行耗时操作,以免阻塞页面渲染。3.**模块化**:如果使用模块化开发(如Webpack),结合`import`使用。§§相关问题§§1.如何在jQuery中处理多个$(document).ready()块?2.如果不使用jQuery,如何实现类似DOM就绪的效果?3.为什么说在$(document).ready()中使用AJAX加载数据是安全的?</think> ### jQuery 的 `$(document).ready()` 使用方法详解 `$(document).ready()` 是 jQuery 的核心函数之一,用于在**DOM 加载完成后立即执行代码**(无需等待图片等资源加载)。它比 JavaScript 原生的 `window.onload` 触发更早,能显著提升页面响应速度[^5]。 --- #### 一、基础用法 ##### 1. 标准格式 ```javascript $(document).ready(function() { // DOM 加载完成后执行的代码 console.log("DOM 已就绪!"); $("#myButton").click(function() { alert("按钮被点击!"); }); }); ``` ##### 2. 简化语法(推荐) ```javascript $(function() { // 功能同上,更简洁 $("#myTable").bootstrapTable({...}); // 初始化表格 }); ``` --- #### 二、结合 Bootstrap Table 的实用示例 假设需要初始化表格并隐藏特定列(参考用户问题): ```javascript $(function() { $('#dataTable').bootstrapTable({ columns: [ { title: 'ID', field: 'Id', visible: false // 初始隐藏列 }, { title: '用户名', field: 'username' } ], data: loadDataFromServer() // 从服务器加载数据 }); // 动态隐藏"电话"列 $('#hidePhoneBtn').click(function() { $('#dataTable').bootstrapTable('hideColumn', 'phone'); }); }); ``` > **关键说明**: > - 使用 `$(function(){...})` 确保表格初始化时 DOM 已就绪[^2] > - 通过 `visible: false` 直接配置初始隐藏列 > - 按钮事件绑定在 DOM 就绪后执行,避免找不到元素 --- #### 三、与 `window.onload` 的核心区别 | 特性 | `$(document).ready()` | `window.onload` | |--------------------|-----------------------------|--------------------------| | **触发时机** | DOM 解析完成立即触发 | 所有资源(如图片)加载完成 | | **执行速度** | ⚡️ 更快 | ⏳ 较慢 | | **多次调用** | ✅ 可定义多个,均会执行 | ❌ 后定义的覆盖先定义 | | **依赖关系** | 需引入 jQuery 库[^1] | 原生 JavaScript 支持 | > **典型场景**: > - 表格初始化、事件绑定 → 用 `$(document).ready()`[^5] > - 图片尺寸计算 → 用 `window.onload` --- #### 四、最佳实践 1. **防止 JS 阻塞渲染** ```html <!-- 将脚本放在 body 末尾 --> <body> <table id="myTable"></table> <script> $(function() { /* 初始化代码 */ }); </script> </body> ``` 2. **模块化组织代码** ```javascript $(function() { initTable(); // 初始化表格 bindEvents(); // 绑定事件 }); function initTable() { $('#myTable').bootstrapTable({...}); } ``` 3. **异步加载优化** ```javascript $(function() { $.get('/api/data').done(function(data) { $('#table').bootstrapTable({ data: data }); }); }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值