jQuery和js的执行时机比较

最新推荐文章于 2024-09-09 15:17:21 发布
最新推荐文章于 2024-09-09 15:17:21 发布
阅读量737 收藏 1
点赞数
分类专栏： web 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15652607/article/details/82813410
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

</head>
<body>
    <img src="imgs/01.jpg" alt=""/>
    <img src="imgs/02.jpg" alt=""/>
    <img src="imgs/03.jpg" alt="" id="img3"/>
</body>

</html>


<script type="text/javascript">
    // window.onload = function(){
    //     // alert($("#img3").width());
    //     alert(document.getElementsByTagName("img")[2].clientWidth);
    // };

    $(function () {
        alert(document.getElementsByTagName("img")[2].clientWidth);
        //alert($("#img3").width());
    });

</script>

结论是：

js的window.onload是在htm的所有内容都加载完毕，包括外部的图片资源加载完毕，才去执行js的代码

而jQuery只是等到html的所有标签加载完毕后就去执行jQuery的入口函数中的内容，所以感觉外部资源有延迟。

效果是：JS是先显示图片在alert，而jQuery的是先alert 在显示图片

 

jquery中ready()函数执行的时机和window的load事件比较
10-24
为了理解 ready() 函数，我们需要与 window 的 load 事件进行比较，了解它们在页面加载过程中的不同执行时机。 首先，让我们来看看 ready() 函数。ready() 函数在 jQuery 中实现的是 DOMContentLoaded 事件，这是一...
JavaScript代码的执行时机与HTML内容加载时机问题
qq_45929019的博客
06-14 277
使用time.js实现HTML页面中时间的实时更新，遇到的问题及解决。
JS的执行时机（探究6个6问题）
zymtasd0_的博客
08-01 314
大家好，这里是阿凉，今天给大家讲一下JS的执行时机。以及6个6问题。
JQuery js 版本 下载
最新发布
qq_43893881的博客
09-09 802
4、页面 ctrl + S ，弹窗，提示保存对应js文件。这样，你就获得了对应的jQuery包！1、访问官网，找到所需类型的版本。2、点击对应类型 ，例：如下。
jQuery执行时机
u014651093的专栏
03-28 794
《锋利jquery》
jQuery | 事件JS的执行时机和事件操作
weixin_47982238的博客
08-18 295
事件JS加载执行的时机 1)DOM加载完毕 把js标签放在body之后即可! 2)资源加载完毕 $(window).load(function(){ //代码 }); 3)jquery中实现等dom加载完毕 $(function(){ //所有代码都是等dom加载完毕才会去执行! }); 一、页面载入 $(document).ready(fn); $(fn); 二、事件处理 bind(); unbind(); one(); 三、事件委派 live(); di...
jquery 延迟执行实例介绍
10-26
jQuery的延迟执行是一个非常实用的功能，它允许开发者控制元素在页面中的显示顺序，或者是某些操作的执行时机。在复杂的Web应用中，延迟执行可以帮助我们避免页面元素在渲染时出现的“闪现”现象，或是在适当的时候...
原始的js代码和jquery对比体会
10-26
本文将对比原始的JavaScript代码和使用jQuery的代码，探讨jQuery带来的优势。 首先，让我们看看原始JavaScript中添加一个CSS类（如`highlight`）到具有特定条件的元素的示例。在原始JavaScript中，我们需要手动获取...
jQuery+ajax实现动态执行脚本的方法
10-24
使用jQuery框架结合ajax技术，可以便捷地实现JavaScript脚本的动态加载和执行。其中，$.getScript() 方法是jQuery提供的一个全局函数，可以用来加载指定的JavaScript文件。使用这个方法时，只需传入一个URL参数，该...
页面加载完成后再执行JS的jquery写法以及区别说明
10-26
总而言之，页面加载完成后执行JS代码是网页开发中非常重要的环节，正确的使用时机和方法可以显著提升用户对网页性能的感知。在使用jQuery时，推荐使用$(document).ready()或其简写形式$(function() {...})，以便在不...
JS 函数的执行时机
sanshiliuxiao的博客
09-25 518
先来看下面这段代码，猜猜这段代码会打印出 0 1 2 3 4 5 还是 6 6 6 6 6 6 呢？ // ES6 的 let 和 箭头函数语法 let i = 0; for(i = 0; i < 6; ++i) { setTimeout(() => { console.log(i) }, 0) } 答案是 6 6 6 6 6 6 。 先来用例子来解释 setTimeout...
jquery的核心知识（一）
BuZiShuoquoto的博客
09-04 506
jquery的核心基础（一） jquery是一种特殊的js jquery的使用是要引入jquery的核心包<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基础核心</title> <scri
《JS 函数的执行时机》
zhaaaccc的博客
04-12 761
调用时机 一个函数调用时机不同 他的结果就不同 问题：解释如下代码为什么是6个6 let i=0 for(i=0;i<6;i++){ setTimeout(()=>{ console.log(i) },0) } 问打印出多少？ 6个6 原因： setTimeout JavaScript提供定时执行代码的功能，叫做定时器(timer)，主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。 setTimeout 允许我们
jQuery（二）基础核心
在路上
03-30 300
jQuery基础核心 一、代码风格  1.在jQuery程序上，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象，所以我们在页面元素选择成执功能函数的时候就可以这么写。     $(function(){});//执行一个匿名函数     $('#box');//进行执行的ID元素选择     $('#box').css
二、jQuery核心
weixin_45602227的博客
09-03 261
一、 jQuery核心函数 +++ jQuery核心函数($/jQuery) 1) jQuery向外暴露的核心函数就是 $/jQuery 2) 引入jQuery库后,$或jQuery函数可以直接使用 3) $与jQuery函数完全等价 +++ jQuery核心函数的应用($/jQuery) 1) 作为一般函数调用 $(param)，会返回jQuery实例对象。 1) 参数为函数:延时加载运行该函数。
jQuery与JavaScript与ajax三者的区别与联系
weixin_33816611的博客
03-31 3980
简单总结： 1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便 关系比喻： 若把js比作木头，那么jquery就是木板（半成品） jQuery与ajax都是js的一个框架，各有各的功能...
JS与JQuery实现雪花飘落特效
"JS和JQuery实现网页上的雪花飘落特效" 在网页设计中，创建动态特效能够提升用户体验，其中雪花飘落效果就是一...无论是纯JavaScript还是jQuery，都需要理解并灵活运用`setTimeout`和`setInterval`来控制动画的时机。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值