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. 【模板】最长上升子序列(LIS)及其优化 & 洛谷 AT2827 LIS

    最长上升子序列 传送门 题意 对于给定的一个n个数的序列,找到它的一个最长的子序列,并且保证这个子序列是由低到高排序的. 例如,1 6 2 5 4 6 8的最长上升子序列为1 2 4 6 8. 基本思 ...

  2. 使用electron实现百度网盘悬浮窗口功能!

    相关依赖 里面使用了vuex vue vue-route storeJs storeJs 用来持久化vuex状态 展示 介绍说明 没有使用electron内置的-webkit-app-region: ...

  3. PHP通过exec执行git pull

    目标 项目没有使用Jenkins部署,使用的是Gitlab+ECS,要实现代码的自动部署 想法 使用Gitlab的钩子,当某个分支的代码提交之后,访问一个URL,实现代码的自动部署.这里使用PHP的e ...

  4. #define 宏实现函数功能可能存在的问题

    #define 宏实现函数功能的问题 情形1 #define free_ptr(p) \ if(p) delete p; p = nullptr; 在调用free_ptr(p)的地方展开看这段代码: ...

  5. es6 async和await

    es7 async和await ,作为genertor函数语法糖,在使用上比generator函数方便的,Generator 函数就是一个封装的异步任务,或者说是异步任务的容器.异步操作需要暂停的地方 ...

  6. PCA原理推导及其在数据降维中的应用

    一个信号往往包含多个维度,各个维度之间可能包含较强的相关性.下图表示的是一组二维信号x=(x1,x2),可以看到数据点基本上分布在x2=x1这条直线上,二者存在很强的相关性(也就是确定x1之后,就能确 ...

  7. 18.Linux-CentOS系统根目录空间使用率100%问题？

    问题描述:发现服务器根目录爆满100%? 排查步骤:1.先检查文件索引节点iNode使用率情况,[root@localhost ~]# df -hTi2.查看无用文件是否居多:[root@localh ...

  8. 一、IIS搭建前端静态模板_资源加载问题

    一.模板文件说明和效果展示 二.IIS配置模板 三.解决方案 把资源文件复制到html目录内与index.htm同级,因为我iis指定站点就是该目录.

  9. 013-linux系统管理——系统资源查看

    linux系统管理——系统资源查看 ############# vmstat 命令 监控系统资源 ############# vmstat [刷新时间 刷新次数] [root@zabbix ~]# v ...

  10. PAT Advanced 1036 Boys vs Girls (25 分)

    This time you are asked to tell the difference between the lowest grade of all the male students and ...