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. servlet3.0文件上传与下载

    描述:文件上传与下载是在JavaEE中常见的功能,实现文件上传与下载的方式有多种,其中文件上传的方式有: (1)commons-fileupload: (2)Servlet 3.0 实现文件上传 (3 ...

  2. 【暑假培训1】test1

    T1: 30pts:直接暴力三层循环枚举 就就就先不写代码了qwq: 70pts: 因为X+Y+Z==0 所以我们可以考虑枚举X和Y,然后利用↑式子求出Z=-X-Y: 然后touli xcg的70pt ...

  3. 基于bs4库的HTML查找方法

    基于bs4库的HTML查找方法 find_all方法 <>.find_all(name,attrs,recursive,string,**kwargs) 返回一个列表类型,内部存储查找的结 ...

  4. 在Myeclipse下查看Java字节码指令信息

         在实际项目开发中,有时为了了解Java编译器内部的一些工作,需要查看Java文件对应的具体的字节码指令集,这里提供两种方式供参考. 一.使用javap命令      javap是JDK提供的 ...

  5. ModelForm操作

    ModelForm a. class Meta: model, # 对应Model的 fields=None, # 字段 exclude=None, # 排除字段 labels=None, # 提示信 ...

  6. HTML DOM中的comfirm()确认对话框

    前言 最近在开发中有一个需求大概就是说:表单点击提交按钮首先弹出确认对话框,然后点击确定请求接口,那么问题来了,我们如何确定点击的是确定还是取消呢? 定义和用法 定义 comfirm()确认对话框,用 ...

  7. HTML-图片和多媒体

    1.图片和多媒体 (1)    图片:img元素 src 属性:图片路径: alt 属性:图片无法显示时使用的替代文字: title:鼠标悬停时显示的文字 : <img src="图片 ...

  8. CSS中的伪类和为伪元素

    伪类: 伪元素:

  9. UIAlertView, UIAlertViewController

    iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.全新的UIPresentationController 在实现视图控制器间的过渡动画效果和自适应设备尺 ...

  10. man - 格式化并显示在线帮助手册页

    总览 man [-acdfFhkKtwW] [-m 系统名] [-p <前处理程序>] [-C <配置文件>] [-M <路径>] [-P <浏览方式> ...