Question

我是JQuery的菜鸟，尝试使用它的基本功能

我有一个html，如下所示。

<html>
<head>
    <script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/start.js"></script>
    <script>
        $(mainFunction());
        $('#label1').prop('innerHTML', "test");
    </script>

    <title></title>
</head>
<body>
    <label id="label1"></label>
</body>

</html>

从start.js开始，我正在尝试操作此html文件中的元素，如下所示。

function start(name){
    this.iam = name;
    this.getName = function(user){
        return this.iam;
    }
}

function mainFunction(){
    var label = $('#label1');
    var oStart = new start("test");
    label.prop("innerHTML" ,oStart.getName("test"));
}

当我尝试在上面的代码中的'label'中查找什么时，我在控制台上打印[]。我在这做错了什么？

Answer 1

$(mainFunction());是你的问题。而是提供document.ready。

的函数引用

像这样：

$(mainFunction);

在执行$(mainFunction());时，您在设置处理程序时调用函数mainFunction，这意味着它在构建DOM树之前过早执行。

或者为了避免混淆，你可以这样做：

$(function(){
   mainFunction();
});

另请注意，如果您在body标记结束之前移动脚本，则不会发生此问题。您不必听取文档就绪处理程序。另外，作为简写，您可以label.html(oStart.getName("test"));

Answer 2

在使用jQuery之前，您需要等待DOM准备就绪。

这样做是这样的：

$(document).ready(function() {
  // All your code touching the DOM in here
});

另请注意，此行：$(mainFunction());使用mainFunction的返回值，当DOM准备就绪时不会触发它。

JQuery $（'＃id）不起作用

2 个答案: