1

我正在尝试在单独的 .JS 文件中使用 Jquery，因为将所有 JavaScript 代码保留在 HTML 文档之外会提高加载 HTML 文档的性能。

对于这个例子，我使用“index.html”和“main.js”

下面是 index.html：

    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>append demo</title>

      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="testJS/main.js"></script>

    </head>
    <body>

    <p>I would like to say: </p>


<!-- CODE BELOW MUST BE REMOVED FROM THIS DOCUMENT -->
    <script>
    $( "p" ).append( "<strong>Hello</strong>" );
    </script>

    </body>
    </html>

我想从 html 中剪切代码并将其插入 main.js 但是下面的示例对我不起作用：

主.js：

p.append( "<strong>Hello</strong>" );

我也试过这个没有成功：

 $( "p" ).append( "<strong>Hello</strong>" );

我该如何解决这个问题，在里面有 JavaScript 和在 .js 文件中有什么区别？

4

4 回答 4

2

您需要在 dom 就绪处理程序中添加代码，因为否则在执行代码时p元素仍未添加到 dom - 这是因为由于在标记中main.js的元素之前添加了，但无论如何最安全的选择是p使用 dom 就绪处理程序进行 dom 操作

jQuery(function($){
    $( "p" ).append( "<strong>Hello</strong>" );
})
于 2013-09-19T00:06:45.980 回答
2

我建议使用$( document ).ready()JQuery 提供的函数，如下所示：

$(document).ready(function() {
    $("p").append( "<strong>Hello</strong>" );
});

在这里您可以找到更多信息：http ://learn.jquery.com/using-jquery-core/document-ready/

于 2013-09-19T00:07:55.380 回答
1

使用外部 js 时，您必须将代码包装在文档就绪函数中，如下所示

$(function(){
  $('p').append('<strong>Hello</strong>');
});

*注 -$(function(){是简写$(document).ready(function(){

于 2013-09-19T00:07:25.370 回答
0

正如 Arun P Johny 所解释的，问题在于 js 代码在它所依赖的 DOM 元素准备好之前执行。

另一种解决方案是更改您的外部文件，以便它定义一个函数，然后您将在 html 文件的正文末尾调用该函数。

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="testJS/main.js"></script>

</head>
<body>

<p>I would like to say: </p>

<script>
  writeText();
</script>
</body>
</html>


<!-- main.js -->

function writeText(){
  $( "p" ).append( "<strong>Hello</strong>" );
}
于 2013-09-19T00:17:45.110 回答