javascript - 将 javascript 放在 head 或 body 中有区别吗？-6ren

javascript - 将 javascript 放在 head 或 body 中有区别吗？

转载作者：行者123 更新时间：2023-11-28 12:22:55

我对 javascript 很陌生，无法确定使用“selectize”输入的这两段代码之间是否存在差异。

两者都有效，但我不知道哪个更好或者它们是否真的相同。如果有的话，哪一个更可取？是否有关于在 html 文档中放置 javascript 的“规则”或最佳实践？

如果这是非常微不足道的事情，我们深表歉意:)

tl;博士

第一个代码有 $('#location').selectize({ .... })里面<body>标签

第二个代码具有相同的 $('#location').selectize({ .... })但在 <head>标签并包含在

中

$(document).ready(function () { $('#location').selectize({ .... }) )}

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>


        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">

        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
<script>
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
</script>
</body>
</html>

版本 2 的头部有选定的项目

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
    <script>
    $(document).ready(function () {
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
});
</script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>


        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">

        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
</body>
</html>

最佳答案

最好将 javascript 放在 </body> 之前的底部。。这样它就不会阻止渲染(有利于性能)。另外，此时您就知道 DOM(HTML 元素树)已经为您准备好了。

$(document).ready(function () {})是 jQuery 等待 DOM 准备就绪的方式。如果你把你的javascript放在<head>中你必须使用这种技术，因为显然你想要使用的所有实际 HTML 都在它之后并且需要解析。一旦 DOM 准备好，回调(传递给 .ready() 的函数)就会被调用。

关于javascript - 将 javascript 放在 head 或 body 中有区别吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34212089/

文章推荐： Django 中的 Javascript 开发工作流程

文章推荐： javascript - 在具有动态内容的 div 上保持纵横比

文章推荐： css - rails : Override CSS on button_to?

文章推荐： ios - NSMutableArray 的索引不是以 0 开头

c++ - 为什么for循环中的 "++i"和 "i++"有区别？
我觉得 for(int i = 0; i < 2; i++) 和 for(int i = 0; i < 2; ++i) 不应该做同样的事情。对于第二个例子，从循环开始 i 应该等于 1 对我来说更符合
haskell - 为什么 throw 和 throwIO 有区别？
我试图牢牢掌握异常情况，以便改进我的conditional loop implementation .为此，我进行了各种实验，扔东西，看看会被抓到什么。这个让我惊喜不已: % cat X.hs mo
css - 为什么内联 CSS 和普通 CSS 有区别
我只是想回答一个问题，但我遇到了一些我不明白的事情!为什么如果我在文件中使用内联 CSS 或 CSS，如本例中的颜色，结果就不一样! 代码相同，但第一段是绿色，第二段是红色! 我真的不明白为什么？谢
HTML 为什么我的边框中的 span 和 div 有区别？
我目前正在学习 CSS 并进行试验，我偶然发现了输出中的这种差异。所以这是代码: .red-text { color: red;
python - 为什么 "import"与 "import *"有区别？
"""module a.py""" test = "I am test" _test = "I am _test" __test = "I am __test" ============= ~ $ p
firebase - 为什么 servertimestamp 和 Firestore 中的 js new Date() 有区别？
在向 Firestore 写入文档时，我经常看到 serverTimestamp() 标记和 new Date() 对象之间的差异不为零。差异范围从几秒到几十分钟。他们不是在做同样的事情吗？
python - 为什么 round(x) 和 round(np.float64(x)) 有区别？
据我了解，2.675 和 numpy.float64(2.675) 都是相同的数字。然而，round(2.675, 2) 给出 2.67，而 round(np.float64(2.675), 2) 给
linux - 为什么使用 std::thread::hardware_concurrency() 和 boost::thread::hardware_concurrency() 有区别？
问题本身的描述很简单。我正在测试 C++11 中 std::thread 库和 boost::thread 库的区别。这些的输出: #include #include #include int
apache-spark - 为什么 sqlContext.read.load 和 sqlContext.read.text 有区别？
我只是想将文本文件读入 pyspark RDD，我注意到 sqlContext.read.load 之间的巨大差异和 sqlContext.read.text . s3_single_file_inp
.net - 使用 SC.exe 或 InstallUtil.exe 安装 Windows 服务 - 有区别，但哪个？
SC.exe 和 InstallUtil 都可以安装/卸载 Windows 服务。但它们的工作方式似乎并不相同。有什么区别？例如，InstallUtil 失败(找不到某些文件或依赖项错误)，而 S
Why is there difference between static Thread.currentThread().getName() and getName()?(为什么Static Thread.CurrentThread().getName()和getName()有区别？)
我认为Thread对象就像是带有名称和静态Thread.CurrentThread()的抽象对象，就像访问Thread对象的方式一样。显然，这是错误的假设。。是这样的吗？
Why is there difference between static Thread.currentThread().getName() and getName()?(为什么Static Thread.CurrentThread().getName()和getName()有区别？)
我认为Thread对象就像是带有名称和静态Thread.CurrentThread()的抽象对象，就像访问Thread对象的方式一样。显然，这是错误的假设。。是这样的吗？

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将 javascript 放在 head 或 body 中有区别吗？