0

您好我正在尝试使用 jQuery 编写一个 Web 应用程序，并且我想将 JS 代码与 HTML 标记分开。这是代码：

文件：index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer Search</title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
    ...
    <input type="button" id="button_batch_update" value="Save"/>

    <script type="text/javascript" src="js/customer_search.js"></script>
</body>

文件：customer_search.js

!function($){
    $("#button_batch_update").click(function(e){
        e.preventDefault();
        alert("u clicked me!");
    });
}(window.jQuery);

我从引导网站（ http://twitter.github.io/bootstrap/javascript.html）复制了 JS 文件代码。它可以工作，但我真的不明白为什么外部 JS 文件会工作。有人可以帮我解决这个问题吗？谢谢！

4

2 回答 2

2

当您包含外部文件时，它实际上将其包含为当前 HTML 页面的一部分。

因此，如果您有一个如下所示的外部文件：

<script>

function myFunc(){

}

</script>

并且您将它包含在您的 HTML 标头中，就好像该函数是在您的原始 HTML 文档中编写的：

<html>
<body>

    <script>
    
    function myFunc(){
    
    }
    
    </script>

</body>
</html>

因此允许您调用该函数。

顺便一提 ...

在我们进行此讨论时，它可能有助于通知您，您可以对许多其他类型的文件执行此操作，包括但不限于：

  • css
  • php
  • xml
  • ...
于 2013-04-18T17:22:50.010 回答
1

在 Javascript 中的 function(){} 是您声明函数的方式，而 function(){}() 将执行它。因此，当添加脚本文件时，浏览器会请求该脚本文件并执行其中的内容（基本上会对其进行解析、编译并使其可用于支持您的 html）。

所以

  < script src="js/jquery-1.9.1.min.js"></script >

将执行 jquery 代码。jquery 将自身附加到全局窗口对象。所以现在任何人都可以使用 window.jQuery 或简单地作为 jQuery（推断为全局）访问它。

然后当你的 html 找到你的脚本时

function($){
    $("#button_batch_update").click(function(e){
         e.preventDefault();
         alert("u clicked me!");
    });
}(window.jQuery)

它正在执行它并将 window.jQuery 作为函数参数传递，它在闭包中被接受为“$”。

于 2013-04-18T17:29:56.927 回答