jQuery .ready()
https://www.w3schools.com/jquery/event_ready.asp
Example
Use ready() to make a function available after the document is loaded:
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
Definition and Usage
The ready event occurs when the DOM (document object model) has been loaded.
Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above.
The ready() method specifies what happens when a ready event occurs.
Tip: The ready() method should not be used together with <body onload="">.
只能在document上使用
.ready()
.ready( handler )Returns: jQuery
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.
The .ready()
method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.
This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins.
When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added.
As of jQuery 3.0, jQuery ensures that an exception occuring in one handler does not prevent subsequently added handlers from executing.
Most browsers provide similar functionality in the form of a DOMContentLoaded
event.
However, jQuery's .ready()
method differs in an important and useful way:
If the DOM becomes ready and the browser fires DOMContentLoaded
before the code calls .ready( handler )
, the function handler
will still be executed.
In contrast, a DOMContentLoaded
event listener added after the event fires is never executed.
Browsers also provide the load
event on the window
object.
When this event fires it indicates that all assets on the page have loaded, including images.
This event can be watched in jQuery using $( window ).on( "load", handler )
.
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.
Note that although the DOM always becomes ready before the page is fully loaded, it is usually not safe to attach a load
event listener in code executed during a .ready()
handler.
For example, scripts can be loaded dynamically long after the page has loaded using methods such as $.getScript()
.
Although handlers added by .ready()
will always be executed in a dynamically loaded script, the window
's load
event has already occurred and those listeners will never run.
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )
As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready()
method, which is inefficient and can lead to incorrect assumptions about the method's behavior. For example, the third syntax works with "document"
which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready.
There is also $(document).on( "ready", handler )
, deprecated as of jQuery 1.8 and removed in jQuery 3.0. Note that if the DOM becomes ready before this event is attached, the handler will not be executed.
The .ready()
method is typically used with an anonymous function:
$( document ).ready(function() {
// Handler for .ready() called.
});
Which is equivalent to the recommended way of calling:
$(function() {
// Handler for .ready() called.
});
相关文章
- 【JQuery】write less,do more
- jQuery Validate多实例讲解
- JS框架_(JQuery.js)图片相册掀开切换效果
- 选择DOM中除一个元素以外的所有元素[Jquery]
- [转载]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- jQuery插件 -- Form表单插件jquery.form.js
- 第一百六十八节,jQuery,表单选择器
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
- jquery插件范例代码
- jQuery Custom Selector JQuery自定义选择器
- jquery bind、delegate、live、on的区别及联系
- jquery遍历:数组、对象、json
- jQuery温习篇---强大的JQuery选择器
- JQuery模板插件jquery.tmpl-动态ajax扩展
- jQuery图片延迟加载插件:jquery.lazyload
- 直接在UI5里使用jQuery, 而不是oData API去绑定模型
- HTML里Dom onload和jQuery document ready这两个事件的区别
- 使用jquery获取父元素或父节点的方法
- jQuery UI API 类别 - 选择器(Selectors)
- js和jquery获取textarea输入的内容
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- jQuery 层次选择器
- jquery分页插件pagination.js的使用