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.

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 .ready()的更多相关文章

  1. jQuery-1.9.1源码分析系列（六） 延时对象应用——jQuery.ready

    还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFu ...

  2. jQuery Ready 与 Window onload 的区别(转)

    “我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?一 般情况下都是设置body标签的onload监听window的loa ...

  3. jquery ready 延迟

    $.holdReady(true);//延迟 $.holdReady(false);//解延迟 用于下载文件的时候,异步操作 $.holdReady(true); $.getScript(" ...

  4. (十六)JQuery Ready和angularJS controller的运行顺序问题

    项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...

  5. jquery ready方法实现原理 内部原理

    jquery ready方法实现原理 内部原理 今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下 ...

  6. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  7. jquery ready方法实现原理

    先看这两句代码: window.addEventListener('load',loaded,false); document.addEventListener('DOMContentLoaded', ...

  8. jquery ready和window onload区别

    window onload是指标签加载完成,并且标签资源加载完成: jquery ready是指标签加载完成,标签资源可能未加载完成 $(document).ready(function(){});= ...

  9. DOMContentLoaded vs jQuery.ready vs onload, How To Decide When Your Code Should Run

    At a Glance Script tags have access to any element which appears before them in the HTML. jQuery.rea ...

  10. JavaScript window.onload 事件和 jQuery ready 函数有何不同？

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

随机推荐

  1. CAS单点登录系统--进阶

    2.CAS服务端数据源设置 2.1需求分析 我们现在让用户名密码从我们的优乐选的user表里做验证 2.2配置数据源 (1)修改cas服务端中web-inf下deployerConfigContext ...

  2. linux工具之screen

    screen官方网址:http://www.gnu.org/software/screen/ 参考文章:http://man.linuxde.net/screen 简介 Screen是一款由GNU计划 ...

  3. [2019上海网络赛J题]Stone game

    题目链接 CSLnb! 题意是求出给定集合中有多少个合法子集,合法子集的定义为,子集和>=总和-子集和$\& \&$子集和-(子集的子集和)<=总和-子集和. 其实就是很简 ...

  4. Spark出现java.lang.stackoverflowerror的解决方法

    正在测试的程序需要多次迭代(400+次),每次迭代有复杂的运算 迭代到100多次的时候报java.lang.stackoverflowerror的错误 解决方法:先checkpoint()再count ...

  5. python中，a=10.0 b=10.0 a is b 为什么输出是false

    >>>a=10.0>>>b=10.0>>>a is bFalse为什么当a=10,b=10时,a is b输出的是True呢? >>& ...

  6. Python2 中 range 和 xrange 的区别？

    两者用法相同,不同的是 range 返回的结果是一个列表,而 xrange 的结果是一个生成器,前者是直接开辟一块内存空间来保存列表,后者是边循环边使用,只有使用时才会开辟内存空间,所以当列表很长时, ...

  7. 四：JVM调优原理与常见异常处理方案

    在jvm调优之前,我们必须先了解jvm的内存模型与GC回收机制,这些在我前面的文章里面有介绍!接下来我们通过一个案例来调整jvm性能. 一测试案例: 1.1 编写demo import java.te ...

  8. Filter&Listener笔记

    ## 今日内容     1. Filter:过滤器     2. Listener:监听器 # Filter:过滤器     1. 概念:         * 生活中的过滤器:净水器,空气净化器,土匪 ...

  9. 运用在伪类content上的html特殊字符

    原文转载于:https://www.cnblogs.com/wujindong/p/5630656.html 项目中用到的一些特殊字符和图标 html代码 <div class="cr ...

  10. padding溢出

    一.padding溢出 参考代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...