将JS代码从HTML移动到HEAD部分的源代码


Move JS code from HTML to source in HEAD section

我有一个问题,如果你不介意的话,我希望你能指导我解决。。。在我的HTML源代码中,到处都有一些css代码。所以我决定把它放在一个名为principal.css的文件中,并在的标题部分做以下操作

<link href="css/principal.css" rel="stylesheet" type="text/css" />

这真是太棒了!我的想法是对HTML中的javascript代码做同样的处理,但它没有起作用。这就是其中之一:

$("[data-slider]")
    .each(function () {
    var input = $(this);
    $("<span>")
        .addClass("output")
            .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
    $(this)
        .nextAll(".output:first")
            .html(data.value);
    });

有什么特别的方法吗?我的目标是让页面的代码量最少,我留下了良好的缩进、文档化和干净。问候,我将在等待您的答复!请原谅我的英语。。。

您需要将其包装在$(document).ready(…)中

此外,它还有不寻常的压痕。这样格式化可能会更好:

$(document).ready(function() {
    $("[data-slider]").each(function () {
        var input = $(this);
        $("<span>").addClass("output").insertAfter($(this));
    }).bind("slider:ready slider:changed", function (event, data) {
        $(this).nextAll(".output:first").html(data.value);
    });
});

我个人不喜欢把这么多这样的命令连在一起。它可能效率稍高,但它使调试和修复问题变得更加困难。我个人会把.each()和.bind()分解成单独的语句。但我想这是一个偏好的问题。

.ready()文档

$(document).ready(function(){
    // your code here
});

.load()文档

$(window).on('load', function(){
    // your code here
});

js代码放在一个单独的.js文件中。类似于CSS也被放置在一个单独的文件中,然后将其链接到您的html文件。

就像这样,在你的html文件中:

<script src="somejsfile.js"></script>

是的,您必须将js代码封装在document.ready函数中,这样它才能在加载完documents元素后执行。

例如:

$(document).ready(function() {
    // Your JS code here
});

这是因为浏览器HTML解释器从TOP to BOTTOM读取代码,所以如果您不设置document.readyJavaScript将在任何document elements are loaded之前运行。

标题:

<head>
  <link href="css/principal.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="myscript.js"></script>
</head>

myscript.js

$(function() {    
    $("[data-slider]")
        .each(function () {
        var input = $(this);
        $("<span>")
            .addClass("output")
                .insertAfter($(this));
        })
        .bind("slider:ready slider:changed", function (event, data) {
        $(this)
            .nextAll(".output:first")
                .html(data.value);
        });
});

如果您计划将js代码放在一个单独的文件中,我想添加这一点,这是一个好主意。您应该意识到,您将不必使用。。。

<script>
  //js code
</script>

脚本标记在一个单独的js文件中。