Javascript 为什么jQuery会破坏这段代码？

当我使用jQuery id选择器选择元素时，它的功能与使用普通JS时不同。为什么在使用jQuery时，显示块或src没有改变，而是与普通JS一起工作

参见JS第2行的工作代码 注释掉并取消注释第3行，用jQuery选择元素，它将停止工作

HTML

×
关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}

---

非常简单。当jQuery选择一个元素时，它所选择的不是元素本身，而是包含该元素的jQuery对象。如果执行$（“选择器”）[0]，将返回正确的对象。或者您可以使用css函数设置样式，例如：$（“选择器”）.css（“属性”、“值”）。

请不要在css不相关时粘贴css。jQuery元素和DOM元素是不同的。我以前在任何jQuery教程中都没有看到过这一点。你知道我在哪里可以找到更多关于这些选择器的信息吗？为了澄清，我想你可能仍然感到困惑，浏览了一下你的代码笔上的编辑。这里涉及两种类型的对象：内置HTML元素（您似乎已经习惯了）和jQuery元素。您似乎想做的是使用jQuery选择器并获取HTML元素，但也有其他方法可以做到这一点。例如，您可以使用内置javascript选择一个元素，并使用jQuery应用样式（例如，

$（document.getElementsByTagName（“body”）[0]）、css（“background”、“red”）

）……我没有字符了。一秒钟后，您将以另一种方式进行操作，即获取jQuery对象，它本质上是一个围绕HTML元素的函数包，并尝试在其上使用内置的HTML函数。您可以在根本不使用jQuery的情况下编写所有代码（这样您可能会更轻松）。事实上，您在代码中成功地使用了document.GetElementById。为什么不这样选择你的图像呢？或者您可以学习jQuery函数。它们往往是值得的。jQuery函数的文档可以在这里找到：内置函数的文档可以在这里找到：

<img id="myImg" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

// Get the modal
var modal = document.getElementById('myModal');
// var modal = $("#myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}