$(document).ready
这个函数的解释：
Description: Specify a function to execute when the DOM is fully loaded.
version added: 1.0.ready( handler )
handler
Type: Function()
A function to execute after the DOM is ready.
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. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
改变顺序的办法
However, a quick look at the $(document).ready() internals shows a way to get what we want.
ready: function(fn) {
// Attach the listeners
bindReady();
// If the DOM is already ready
if ( jQuery.isReady )
// Execute the function immediately
fn.call( document, jQuery );
// Otherwise, remember the function for later
else
// Add the function to the wait list
jQuery.readyList.push( fn );
return this;
},
It's not really important to understand everything that's going on here, so don't worry about the Javascript. First, the function tells the browser to alert jQuery when it's done loading. Next, it checks if the browser is already ready, to see if you're running a function long after the page has already loaded. If the page is ready, jQuery will just run the function immediately. But if the page hasn't finished loading (the usual case for $(document).ready() logic), your function gets put on the end of a jQuery.readyList array. This is what we're after.
Before the page is finished loading, all of the functions added through $(document).ready() are put on the jQuery.readyList variable. If you want to change the order in which these functions are executed, all you have to do is alter this array.
Here's what it would look like to put your function at the front of the line for execution:
// Adding a function to $(document).ready() the regular way
$(document).ready(function() {
// processing happens here
});
// Adding a function to the front of the list
$.readyList.unshift(function() {
// processing here
});
Of course, this shouldn't be overused. Other jQuery authors expect functions to run in the order they're added, so they might be thrown off if the readyList is modified too much. Still, a small change like this can save a lot of headache in the right situation.
$(document).ready函数会在所有的js文件加载完成后执行
这个函数的解释：
引用
Description: Specify a function to execute when the DOM is fully loaded.
version added: 1.0.ready( handler )
handler
Type: Function()
A function to execute after the DOM is ready.
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. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
改变顺序的办法
引用
However, a quick look at the $(document).ready() internals shows a way to get what we want.
ready: function(fn) {
// Attach the listeners
bindReady();
// If the DOM is already ready
if ( jQuery.isReady )
// Execute the function immediately
fn.call( document, jQuery );
// Otherwise, remember the function for later
else
// Add the function to the wait list
jQuery.readyList.push( fn );
return this;
},
It's not really important to understand everything that's going on here, so don't worry about the Javascript. First, the function tells the browser to alert jQuery when it's done loading. Next, it checks if the browser is already ready, to see if you're running a function long after the page has already loaded. If the page is ready, jQuery will just run the function immediately. But if the page hasn't finished loading (the usual case for $(document).ready() logic), your function gets put on the end of a jQuery.readyList array. This is what we're after.
Before the page is finished loading, all of the functions added through $(document).ready() are put on the jQuery.readyList variable. If you want to change the order in which these functions are executed, all you have to do is alter this array.
Here's what it would look like to put your function at the front of the line for execution:
// Adding a function to $(document).ready() the regular way
$(document).ready(function() {
// processing happens here
});
// Adding a function to the front of the list
$.readyList.unshift(function() {
// processing here
});
Of course, this shouldn't be overused. Other jQuery authors expect functions to run in the order they're added, so they might be thrown off if the readyList is modified too much. Still, a small change like this can save a lot of headache in the right situation.
$(document).ready函数会在所有的js文件加载完成后执行
分享到：
发表评论
-
解决eclipse在修改js卡顿现象
2018-02-09 15:49 1360新版eclipse编辑含有javascript内容的jsp时, ... -
chosen 数据的动态更新
2016-09-08 15:28 1766chosen是个不错的复合下拉组件，缺点是文档较少 源码在gi ... -
优秀的弹层组件
2016-04-20 18:19 659http://layer.layui.com/ -
googleapis.com域名访问慢的解决办法
2016-04-13 12:09 9681、安装火狐 2、安装插件ReplaceGoogleCDN -
国内常用前端公共库CDN服务
2015-11-15 14:00 943BAIDU http://cdn.code.baidu.co ... -
jquery validate 1.14
2015-10-12 20:14 794<!DOCTYPE html PUB ... -
jquery 事件处理handler函数的参数
2015-02-08 23:22 2582jquery 事件处理handler函 ... -
jquery tr rowindex
2014-11-30 13:42 902var tr = $(this).parents('tr' ... -
jqgrid please select row warning
2014-11-23 19:42 1722引入ui.jqgrid.css即可解决 -
javascript 错误的继承方式
2014-11-02 23:02 723var parent = {t:1,m:2,} pare ... -
JS图片格式验证
2014-07-03 16:48 902function pic(file){ var r ... -
更改underscorejs默认的匹配符
2014-06-14 11:51 845/** 修改underscore.js默认的< ... -
uglifyjs批量压缩js
2014-06-13 16:34 2426jquery官方使用uglifyjs进行压缩的，压缩比较高 ... -
html5 canvas作的手写板【兼容手机】
2014-05-21 15:56 5276<!DOCTYPE html> <ht ... -
backbone.js model和view视图的单元测试
2014-05-20 17:32 1360backbone的模块化开发，需要引入测试流程保证代码的质量， ... -
由正则表达式html或xml标签配对说起【括号编组和正负向预查】
2014-05-15 14:17 2472经常会查找xml或HTM ... -
netbeans和karma进行单元测试二【jasmine入门】
2014-05-20 15:43 1689karma配好之后，默认使用的是jasmine作为测试框架: ... -
javascript的代理和切面
2014-05-15 13:39 738Java里有面向切面的实现方式，可以监控包、对象、函数 ... -
backbone.js路由Router的使用
2014-05-09 11:33 1581路由的使用很简单，路由的转向 router.navigate( ... -
backbone.js的View里的事件重复调用
2014-05-09 11:18 1992backbone的一个视图被初始化多次后，发现一个按钮事 ...
相关推荐
例如，你可能有一个包含多个项目的列表，用户可以通过直接拖拽这些项目来调整它们的顺序。这一特性尤其适用于那些需要用户自定义顺序的场景，如任务列表、日程安排或者产品展示等。 要使用jQuery Dragsort，首先...
**jQuery.nicescroll.js** 是一个著名的 jQuery 插件，专为网页滚动条设计，旨在提供美观且功能丰富的用户体验。这个插件的核心优势在于它的易用性和广泛的浏览器兼容性，无需额外的 CSS 文件，即可在几乎所有的现代...
jQuery.dragSort 提供了多个事件回调函数，以便开发者可以自定义拖放过程中的行为： - `dragStart`: 当用户开始拖动元素时触发，参数为元素对象和触发事件的鼠标位置。 - `drag`: 在拖动过程中持续触发，参数同上。...
- **拖放排序**：允许用户通过拖放操作改变节点顺序。 - **搜索功能**：内置搜索框，方便用户查找特定节点。 - **多选模式**：支持多选节点，便于批量操作。 - **异步加载**：对于大数据量的树，可以实现按需加载，...
例如，我们可以创建一个`<div>`作为旋转容器，里面包含多个产品图片： ```html <img src="image1.jpg" alt="Product View 1"> <img src="image2.jpg" alt="Product View 2"> <!-- 更多图片 --> ``` 每个`<img>`...
默认情况下，被拖动的行会有一个灰色的背景。你可以在CSS文件中修改这些样式以适应你的设计。 ```css /* 鼠标按下时的行 */ table tr.dragging td { background-color: #ccc; } /* 拖动指示线 */ table tr....
在`aaSorting`数组中添加多个排序指令即可实现多列排序效果。 ### 隐藏某些列 DataTables允许隐藏表格的某些列。这可以通过配置`aoColumnDefs`属性来实现。例如，如果你想隐藏第3列： ```javascript $(document)....
jQuery Timepicker可以很好地与其他前端框架如Bootstrap、AngularJS等结合使用，只需确保其CSS和JavaScript文件的引入顺序正确，并进行适当的样式调整以适应框架的样式。 总的来说，jQuery Timepicker是一个功能...
- **多列排序**：用户可以同时对多个列进行排序，通过点击表头可以切换排序顺序。 - **自定义排序**：tablesorter支持自定义排序函数，你可以根据需要编写自己的排序逻辑。 - **兼容性**：tablesorter与大多数现代...
5. **其他配置**：TableSorter提供了丰富的配置选项，例如启用/禁用排序、设置默认排序列和顺序、添加解析器等。查阅官方文档以了解更多详细信息。 ### 使用TableSorter.js的优势 1. **易用性**：通过简单的jQuery...
JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，而`jquery.cycle.all.min.js`插件是jQuery的一个扩展，专门用于实现各种类型的轮播（Banner）切换效果。本文将深入探讨如何利用...
- 多列排序，允许用户同时按多个列进行排序。 - 数据过滤，方便用户查找特定信息。 - 定义排序优先级，控制默认排序顺序。 在实际项目中，你可以通过阅读 tablesorter 的官方文档，了解更多高级用法和配置选项，以...
**jQuery-datepicker**是一个广泛使用的JavaScript库，它是基于jQuery的一个组件，专门用于实现日期选择器功能。这个组件在网页中提供了一个交互式的日历控件，允许用户方便地选择日期，通常用于输入表单中的日期...
jQuery UI Datepicker 是一个强大的日期选择插件，它提供了丰富的自定义选项和键盘快捷键支持，使得在网页上添加日期输入功能变得简单易行。这个插件允许开发者根据需求调整日期显示格式、语言设置，甚至限制用户可...
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery...
该示例结合使用了多个方法：`addClass` 添加 CSS 类，`show` 显示元素，`html` 设置元素的 HTML 内容。最终结果是所有 `<a>` 元素显示为指定样式且内容被替换为 "foo"。 ##### 示例4：使用 `hide` 方法创建动画效果...
然而，由于JavaScript的全局作用域特性，有时多个库可能会同时使用同一个变量，例如"$"，这就可能导致命名冲突。jQuery中的`noConflict()`方法就是为了避免这种情况而设计的。 `$`在jQuery中通常被用作快捷方式来...
移动表格通常指的是用户可以通过拖放操作改变表格行的顺序，以适应不同场景下的需求。在jQuery中，我们可以利用`draggable()`和`droppable()`方法来实现这一功能。`draggable()`让表格行变得可拖动，而`droppable()`...
`jQuery.barrager.js`还提供了更多高级特性，如自定义动画效果、暂停/恢复弹幕、随机显示顺序等。这些功能可以通过插件的API和配置选项进行控制，具体使用方法可以查阅插件的文档。 ### 6. 服务器端交互 在实际...
9. 动画队列：jQuery的动画默认是同步进行的，但可以通过`.queue()`和`.dequeue()`来控制动画的执行顺序，实现更复杂的动画效果。 10. 动画状态管理：`.stop()`用于停止当前运行的动画，`.clearQueue()`清除动画...