jQuery $(document).ready()执行顺序
jQuery的官方网站的解释如下：
“While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
当页面DOM 元素全部加载完毕后就执行.ready()。
如果在.ready()执行之前有javascript代码存在，那么javascript将怎么执行呢？
答案是先执行.ready()之前的javascript代码，然后执行.ready()。
写个example
<span>This page is shown to understand '$(document).ready()' in jQuery. <br /><span>
|
If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS...<br /><br />
|
document.write('The JS is doing sth after DOM loaded and before executing $(document).ready()...<br /><br />');
|
//alert('The JS is doing sth after DOM loaded and before executing $(document).ready()...');
|
document.write('DOM is loaded and $(document).ready() will now be executed!<br /><br />');
|
//alert('DOM is loaded and $(document).ready() will now be executed!');
|
$(document).ready(function () {
|
$(document.body).append("$(document).ready() is now been executed!!!<br /><br />");
|
//alert("$(document).ready() is now been executed!!!");
|
执行完页面打印出来的顺序是:
This page is shown to understand '$(document).ready()' in jQuery. |
If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS... |
The JS is doing sth after DOM loaded and before executing $(document).ready()... |
DOM is loaded and $(document).ready() will now be executed! |
$(document).ready() is now been executed!!! |
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
Jquery 代码如下：
$(window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
Window.onload = function (){
// 编写代码
}
分享到：
相关推荐
例如，使用`$(document).ready()`确保在页面完全加载后执行初始化代码，使用`.click()`绑定点击事件，以及使用`.data()`来存储和检索附加数据。 总的来说，`jquery-3.1.1.js`和`jquery-3.1.1.min.js`是jQuery库的两...
- `$(document).ready(function() {...})`：页面加载完成时执行的函数。 - `$(element).on('event', function() {...})`：动态绑定事件，支持多种事件类型。 5. **动画效果** - `$(element).fadeIn()`/`.fadeOut...
$(document).ready(function() { // 当页面加载完成后，隐藏所有 class 为 'hidden' 的元素 $(".hidden").hide(); // 绑定点击事件 $("#myButton").on('click', function() { alert("按钮被点击了！"); }); }...
- **延迟加载**：使用`.ready()`或`$(document).ready()`确保DOM加载完成后执行脚本，避免阻塞页面渲染。 - **选择器优化**：合理使用CSS选择器，避免过于复杂的选择表达式，以提高性能。 - **事件委托**：利用`....
2. **事件处理**：jQuery 的事件处理比原生JavaScript更加直观，例如`$(document).ready(function() { ... })`用于页面加载完成后执行代码，`$("button").click(function() { ... })`用于监听按钮点击事件。 3. **...
$(document).ready(function(){ $("#myButton").click(function(){ alert("按钮被点击了！"); }); }); ``` 在上述例子中，当用户点击id为`myButton`的按钮时，会弹出一个警告框显示“按钮被点击了！”。 ...
使用$(element).on('event', callback)可以绑定事件，例如$(document).ready(function() {})用于页面加载完成后执行的代码，$(element).click(function() {})则是绑定点击事件。jQuery还支持事件委托，利用$(parent)...
`$(document).ready()`函数则确保DOM加载完成后再执行代码，避免了早期JavaScript代码可能遇到的未定义问题。 在jQuery 3.3.1中，`.append()`、`.prepend()`、`.before()`和`.after()`等方法被用来插入、删除或移动...
同时，`$(document).ready()`确保了代码在DOM加载完成后执行。 3. **动画效果**：`.fadeIn()`, `.slideUp()`, `.animate()`等方法让创建平滑的动画效果变得简单。 4. **Ajax交互**：jQuery的`.ajax()`函数封装了...
$(document).ready(function() { $('.resizable').resizableColumns(); }); ``` 五、优化与拓展 1. **存储列宽**：可以将用户调整后的列宽保存在本地存储或服务器，以便下次访问时恢复。 2. **列宽锁定**：...
此外，jQuery提供了一套丰富的API，如`$(document).ready()`用于页面加载完成后执行函数，`$.ajax()`用于异步数据交互，`$.each()`用于遍历数组或对象，等等。 在jQuery 1.3.2中，性能优化是一个重要方面。"jquery....
例如，使用`$()`函数可以快速选取DOM元素，`$(document).ready()`用于在页面加载完成后执行代码，`.click()`和`.on()`用于绑定事件，`.html()`和`.append()`则方便地实现了DOM内容的获取与修改。 总的来说，jQuery ...
$(document).ready(function() { $('#open-popup').click(function() { $('#popup-content').popup(); // 打开模态窗口 }); $('#close-popup').click(function() { $('#popup-content').popup('close'); // ...
比如，使用`$(document).ready()`来确保文档加载完毕后再执行代码，或者使用`$('selector').action()`来选择元素并执行相应的动作，如`click()`、`append()`等。 jQuery在JavaScript JSP HTML的环境中起着桥梁的...
3. **事件处理**：jQuery简化了事件绑定，`$(element).click(function() {...})`用于绑定点击事件，`$(document).ready(function() {...})`确保页面加载完成后执行代码。 4. **链式操作**：jQuery的方法返回的是...
2. **利用文档就绪事件**：使用`$(document).ready()`确保DOM加载完成后再执行jQuery代码，防止因DOM未加载完成导致的错误。 3. **链式操作**：jQuery支持链式调用，如`$("#myDiv").addClass("highlight").css(...
$(document).ready(function() { $("#barcode").barcode("1234567890", "ean13", { displayValue: true, // 是否显示条形码下方的文本值 barWidth: 2, // 条形码的宽度 barHeight: 50 // 条形码的高度 }); })...
- **$(document).ready()**：页面加载完成后执行的函数，确保DOM已经完全加载。 - **$.ajax()**：进行异步数据请求的核心方法，支持JSON、XML、HTML等多种数据格式。 - **$.each()**：遍历数组或对象，执行回调...
$(document).ready(function() { $('#sortableList').dragsort({dragSelectorEnabled: false}); }); ``` 在上述代码中，`#sortableList`是需要排序的列表，`dragsort`方法设置了`dragSelectorEnabled`参数为...
3. **事件监听**：插件提供了一系列的事件回调，如`onSelect`、`onClose`，允许开发者在用户选择日期后执行自定义操作。 4. **禁用日期**：可以通过配置选项禁止用户选择某些日期，例如节假日或已过期的日期。 5. **...