Question

我正在尝试在单独的.JS文件中使用Jquery，因为保留HTML文档中的所有JavaScript代码将提高加载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中，但下面的示例对我不起作用：

main.js：

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

我也试过这个没有成功：

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

我如何解决这个问题，将JavaScript置于内部并将其置于.js文件中有什么区别？

Answer 1

你需要在dom ready处理程序中添加代码，因为在执行代码时其他方面仍然没有将p元素添加到dom中 - 这是因为之前添加了main.js标记中的p元素，但无论如何最安全的选择是使用dom ready处理程序进行dom操作

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

Answer 2

我建议使用JQuery提供的$( document ).ready()函数：

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

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

Answer 3

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

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

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

的简写

Answer 4

正如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>" );
}

在HTML文档外部使用来自Jquery的append（）

4 个答案: