个人中心
gpt4 book ai didi

javascript - 与 Javascript 和 jQuery 逻辑作斗争

转载 作者：行者123 更新时间：2023-11-28 00:48:49 24 4
gpt4 key购买 nike

请帮助我回答一个关于它如何工作的简短理论，因为我想理解逻辑而不是仅仅得到答案。如果您知道任何可以为初学者解释的 Material ，请引用。我花了很多时间进行研究，但一无所获，并找到了名称或任何可以解释此行为的内容。

我的问题是并且想了解，我认为浏览器解析 html 的方式是逐行的。当它遇到<script>时标记其他所有内容都停止(这个基本示例)，同时将其传递给 js 解释器以逐行完成。完成后，会将其传回 html 解析器以继续处理页面的其余部分

所以我的问题来自下面的简短示例，当我删除 backup.js 并使用 jQuery 代替 console.log(find); 中的代码时，为什么在 backup.js 完成之前加载“find”？按预期工作，但是当从 html 中删除 jQuery 并要求通过 backup.js 添加时，这仍然是 console.log(find); 之前遇到的第一个标签。在底部，它不起作用？我收到以下错误消息:

ReferenceError: $ is not defined
var find = $('.link');

让我相信var find = $('.link');在 backup.js 和 jQuery 完成加载之前尝试访问，但是当“find”在 backup.js 之后很长时间出现时，为什么会出现这种情况？或者我在 backup.js 中的 Javascript 代码做错了什么，它是在之后而不是之前添加的？

我有这段简短的 html:

<html>
    <head>

        <!--<script src="https://code.jquery.com/jquery-1.11.1.js"></script>-->
        <script type="text/javascript" src="backup.js"></script>        

        <meta charset="UTF-8">
        <title>My Web Page</title>
    </head>
    <body>
        <p>hello</p>    
        <div class="link">test</div>

    <script>
        var find = $('.link');
        console.log(find);
    </script>


    </body>
</html>

在 backup.js 中我有这个:

if(typeof jQuery=='undefined') {
   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'https://code.jquery.com/jquery-1.11.1.js';
   head.appendChild(script);
   console.log('jquery not found');
}
else{
    console.log('jquery found');
}

最佳答案

在 backup.js 文件中，如果 jquery 尚不存在，则从服务器加载 jquery。通过异步调用从服务器加载某些内容意味着它不会停止页面渲染，所以会发生什么:

页面开始渲染，来到backup.js，开始从服务器加载jquery，加载jquery的同时不断渲染页面，一直走到底部，然后找到$(".link") ;。在这行代码中，符号“$”表示 jQuery(我想在这部分代码中使用 jquery)，但可能会发生 jquery 尚未完全加载的情况，因此程序会中断并告诉您 ReferenceError: $ 未定义(或者在人类中:您试图使用 $ 但它不存在)。

要解决此问题，您可以创建一个在加载 jquery 时调用的函数:

if(typeof jQuery=='undefined') {
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= 'https://code.jquery.com/jquery-1.11.1.js';
    script.onload = function() {
         runAfterjQueryLoad();
    }
    head.appendChild(script);
    console.log('jquery not found');
} else {
    console.log('jquery found');
}

function runAfterjQueryLoad() {
    var find = $('.link');
    console.log(find);
}

工作 fiddle :http://jsfiddle.net/aj803z7u/

关于页面自上而下呈现的说法是正确的，但始终要小心异步调用(也称为 ajax，以防您想在网络上搜索更多信息)。最好的学习方式就是实践。想想您想要创建的页面并尝试执行它，搜索每个小步骤的教程(您可以随时来到这里提出问题)。

关于javascript - 与 Javascript 和 jQuery 逻辑作斗争，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27039277/

24 4 0
文章推荐： javascript - 将 rangey 与 Kendo Editor 结合使用
文章推荐： c# - 找到所有带有文本字符串的元素？
文章推荐： javascript - jQuery - 将更改应用于与变量号匹配的元素
文章推荐： html - CSS - 修复 H3 在移动设备、平板电脑上的重叠
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com