jQuery 选择器返回 null 而 DOM 函数工作得很好答案

【问题标题】：jQuery Selector returns null while DOM functions work just finejQuery 选择器返回 null 而 DOM 函数工作得很好
【发布时间】：2018-04-05 10:57:24
【问题描述】：

我需要使用 jQuery 选择器，但它返回 null。普通的、旧的 DOM 函数可以工作。我试图操纵这个：

<ul id="lhs_container">LI elements and HTML</ul>

这是我的测试代码：

$(document).ready(function() {
   if(document.getElementById("lhs_container")){
      console.log("DOM was there");             //this is logged in the console
      console.log($("#lhs_container").html());  //this blows up (error below)
   }
});

我得到的错误是：

Uncaught TypeError: Cannot read property 'html' of null
at HTMLDocument

我也尝试过其他 jQuery 操纵器（追加等），它们都会导致错误。有谁知道是什么原因造成的？我正在拔头发！

【问题讨论】：

我不知道原因（没有足够的信息），但很明显，$ 没有在您的文档中准备好jQuery。在该脚本声明之后，某些东西正在覆盖它。
jQuery() 永远不会返回 null。 jsfiddle.net/gcqy95ag 如果找不到元素，它将始终返回一个空的 jQuery 对象。所以正如 ^^^ 建议的那样，这似乎是说 $ 在你的情况下不是 jQuery。
@Karl-AndréGagnon 你是对的！这是一个“盒子里的应用程序”，允许通过 jQuery/JavaScript 进行自定义。他们有自己的 jQuery 库，但它没有及时加载我的脚本，所以我调用了我自己的库。他们的实现不支持 $，所以 $(document).ready() 正在工作，但是当它到达 $ 选择器时，另一个库已经加载并覆盖了。

标签： javascript jquery dom jquery-selectors

【解决方案1】：

$(document).ready(function() {
   if(document.getElementById("lhs_container")){
      console.log("DOM was there");
      console.log($("#lhs_container").html());
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="lhs_container">LI elements and HTML</ul>
</body>
</html>

我得到正确的输出。检查是否正确添加了 jquery 库。

【讨论】：