时间戳

首页 > 解决方案 > 在页面上找不到我的 jQuery？它是否在其他元素后面显示加载的数据？

javascript - 在页面上找不到我的 jQuery？它是否在其他元素后面显示加载的数据？

问题描述

所以我的基本目标是简单地使用 jQuery 样式函数来显示单词 hello。我想要这个，以便将来我可以个性化 hello 。“你好” + $用户名。我附上了我的代码。

<h3 onLoad = "helloMessage();" id="id"> </h3>

我的 .js 文件看起来像这样，

function helloMessage()
    {
    document.getElementById("id").innerHTML = "Hello ";
    }

我的页面没有给我任何错误，但是当我尝试查找元素h3时，它只是在页面上给了我一个没有“Hello”消息的区域？这是因为我的“你好”在h3场内返回吗？

<h3 "Hello "> </h3>

编辑：我很感激我之前不正确。

现在我目前有

$(document).ready(function(){
    $.fn.helloMessage = function(){ 
        alert ('Hello'); 
    }
    $(".hello").ready(function(){
        $.fn.helloMessage();
    });
});

我的 HTML 如下所示：

<h3 class="hello"> </h3>

这一切都很好并且有效。但是我希望“Hello”显示在网页上，而不是作为警报。如果我尝试使用：

$(document).ready(function(){
    $.fn.helloMessage = function(){ 
        return ('Hello'); 
    }
    $(".hello").ready(function(){
        $.fn.helloMessage();
    });
});

最终编辑：谢谢罗里，你的彻底回答帮助我弄清楚我哪里出错了。此外，YamneZ 感谢您提供有关显示问题的帮助。

标签： javascriptjqueryhtml

解决方案

元素没有onload属性。h3如果要在页面加载时运行该函数，请直接调用它：

function helloMessage() {
  document.getElementById("id").innerHTML = "Hello";
}

helloMessage();
<h3 id="id"></h3>

不过，您的 JS 需要放在前面</body>才能正常工作。否则，您需要将DOMContentLoaded事件处理程序附加到文档并将代码放在那里，如下所示：

function helloMessage() {
  document.getElementById("id").innerHTML = "Hello";
}

document.addEventListener('DOMContentLoaded', function() {
  helloMessage();
});
<h3 id="id"></h3>

最后请注意，尽管标题如此，但在这个问题中与 jQuery 无关。如果您想在 jQuery 中执行此操作，它将如下所示：

function helloMessage() {
  $('#id').html('Hello');
}

jQuery(($) => {
  helloMessage();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="id"></h3>

推荐阅读