这次给大家带来jQuery的Read()方法怎么替代JS,jQuery的Read()方法替代JS注意事项有哪些,下面就是实战案例,一起来看一下。
众所周知在jQuery中ready方法在DOM完全下载后立即执行其中的代码。因为它是等所有的DOM元素都加载完毕,才执行给定的函数,所以你能确定那些试图操作和访问元素节点的方法都能被执行。而这篇文章给大家介绍的是如何用jQuery的Read()方法代替原生JS,下面来一起看看。
在jQuery 3.0的版本前, ready经典用法是用一个匿名函数,像这样:
$(document).ready(function() { // Handler for .ready() called. });
jQuery 3.0 ready() 变化
在jQuery 3.0发布之前,有以下几种方法称之为ready方法:
在document元素上操作: $(document).ready(handler);
在空元素上操作: $().ready(handler);
或者直接(即不在一个具体的元素上)操作: $(handler);
上述所有命名的变种在功能上是等价的。无论是哪个元素,在DOM加载完毕之后其指定的处理程序都将会被调用。换句话说,这里的DOM加载完毕并不表示在文档中的某个具体的元素,比如img元素,加载完毕。相反,这里表示的是整个DOM树加载完毕。
在jQuery 3.0中,除了$(handler)
其他的ready方法都被弃用。
官方声明为此:
这是因为选择器并没有和ready()建立联系,不仅低效而且会导致浏览器引擎对该方法的行为进行不正确的假设。
ready 事件和 load 事件的区别
当DOM加载完毕且元素能够被安全访问时就会触发ready事件。另一方面,load事件却在DOM和所有资源加载后触发。
可以像下面这样使用load事件:
$(window).on("load", function(){ // Handler when all assets (including images) are loaded });
这样的话,不仅仅要等到DOM结构能完全访问,而且还需要等到所有的图片资源完全加载完毕(加载时间取决于图片文件大小)才能执行函数。
正常的DOM操作你可能不需要load事件,但是如果你想要在所有的资源被加载完毕之前展示一个旋转的加载器样式,比如,又或者你想要用JS计算一下图片的大小,这可能是一个好的选择。
你可能不需要jQuery.ready()
ready 方法可以确保代码只在所有DOM元素能被安全操纵时才执行。 但这意味着什么呢?这意味着当你要执行的js代码嵌在HTML中某个片段中时,浏览器也要加载完以下元素才能执行。
就像下面这个例子一样:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>.ready() tutorial</title> <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script> $(function(){ // .ready() callback, is only executed when the DOM is fully loaded var length = $("p").length; // The following will log 1 to the console, as the paragraph exists. // This is the evidence that this method is only called when the // DOM is fully loaded console.log(length); }); </script> </head> <body> <p>I'm the content of this website</p> </body> </html>
如果你要执行的javascript代码放在body末尾,你就可能不需要使用ready()
方法,因为浏览器解析到javascript时你可能试图操纵和访问的DOM元素已经被加载完了:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>.ready() tutorial</title> </head> <body> <p>I'm the content of this website</p> <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script> var length = $("p").length; // The following will log 1 to the console, as the paragraph exists. console.log(length); </script> </body> </html>
原生JavaScript ready()替代
对于现代浏览器以及IE9+,你可以通过监听 DOMContentLoaded 事件实现ready()
相同的功能:
document.addEventListener("DOMContentLoaded", function(){ // Handler when the DOM is fully loaded });
但是,请注意,如果事件已经发射,回调将不会被执行。为了确保回调总是运行,jQuery检查文档reference)的“readyState”属性,如果属性值变为 complete,则立即执行回调函数:
var callback = function(){ // Handler when the DOM is fully loaded }; if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) { callback(); } else { document.addEventListener("DOMContentLoaded", callback); }
包括domReady库,已经实现了这个解决方案。
老版本的IE浏览器
对于IE8及以下的浏览器,你能使用onreadystatechange 事件去监听文档的readyState 属性:
document.attachEvent("onreadystatechange", function(){ // check if the DOM is fully loaded if(document.readyState === "complete"){ // remove the listener, to make sure it isn't fired in future document.detachEvent("onreadystatechange", arguments.callee); // The actual handler... } });
或者你可以使用Load事件,如jQuery,这样可以在任何浏览器上运行。这也会导致一个时间延迟,因为它会等待所有的资产被加载。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是jQuery的Read()方法怎么替代JS的详细内容。更多信息请关注PHP中文网其他相关文章!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3汉化版
中文版,非常好用

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。