Javascript 为什么jQuery选择器可以'；但getElementById在这种情况下有效吗？_Javascript_Jquery_Dom

Javascript 为什么jQuery选择器可以'；但getElementById在这种情况下有效吗？

javascript jquery dom

Javascript 为什么jQuery选择器可以'；但getElementById在这种情况下有效吗？,javascript,jquery,dom,Javascript,Jquery,Dom,以下是HTML： <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script> <script type="text/javascrip

以下是HTML：

<html>
  <head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="access.js"></script>
  </head>
  <body>
    <button id="trigger"></button>
    <img id= "testElement" style= "position: absolute; border-color: white; top:340px; left:615px;" width="34px" height= "34px" />
  </body>
</html>

我知道如果我使用$，返回对象就是jQuery对象。它与getElementById不同。但是为什么jQuery选择器不能在这里工作呢

我需要jQuery对象进行更多的操作，比如“append/style”

谢谢

更新几乎同时出现了太多正确答案。。。请给我更多的解释，让我决定我应该给谁的信用，谢谢

对不起，我对你的正确答案理解不好。。。我只想知道更多的细节

所有属性节点（src/width/height…）都不是jQuery对象的属性吗？那么jQuery选择器是否只选择DOM元素节点，比如img/p/li/div节点？（导致一些错误。）

请看一下更新的信息。。。

谢谢大家!

因为您需要在jQuery对象上使用

.attr（）

jQuery方法：

$(document).ready( function(){
  $('#trigger').click(function(){
    $('#testElement').src="success.png";
    //THIS WON'T WORK.
    document.getElementById('testElement').src= "success.png";
    //BUT THIS WORKS.
  });
});

src

不是jQuery对象的属性。你需要做什么

$('#testElement').attr("src", "success.png");

改用这个：

$('#testElement').attr('src', 'success.png')

或者，如果您使用的是最新版本的jquery，那么您可以使用：

$('#testElement').attr("src","success.png");

应该是

$('#testElement').prop("src","success.png");

或

在JavaScript和JQuery中访问属性的方式是不同的

$('#testElement').attr("src","success.png");  //before 1.6

也可以通过

document.getElementById('testElement').src= "success.png";

jQuery对象没有属于DOM对象属性的

src

属性，这就是getElementById工作、使用或设置匹配元素属性或属性的原因

$('#testElement')[0].src = "success.png";

jQuery元素是封装在类似jQuery对象的数组中的DOM元素，因此您可以访问所有jQuery方法，但这意味着您“失去”了对原始DOM方法和属性的访问。您可以使用jQuery方法，也可以获取原始DOM元素以使用普通属性

$('#testElement').attr('src',"success.png");
$('#testElement').prop('src',"success.png");

[]

如您所见，$返回一个DOM元素数组。类似于

document.getElementsBy（Class | Tag）Name

，如果您想要进行DOM比较

处理ID（#testElement）时，您几乎可以确定只有一个这样的元素，因此可以使用

$（“#testElement”）[0]

（即数组中的第一个元素）直接访问它。在那之后，你就可以像对待普通JS一样对待它了。

为什么？你能给出更多解释吗？@Stallman Sure。

src

是普通旧DOM元素的属性。当你使用jQuery时，你是在与jQuery包装器交互，而不是与实际的DOM元素交互。jQuery本身将设置DOM元素的

src

属性为您准备。使用

prop

表示属性，使用

attr

表示属性。它们可以互换，但语义不同。

src

是AFAIK的一个属性。但是我只创建了一个ID为testElement的DOM元素，为什么选择器会返回一个DOM元素数组。没有其他元素的ID是testElement是这样的。因为$可以在任何条件下工作：#xxxx、.xxxx等等。所以，它作为一个标准数组返回。不要试图反对它。只需接受事实，并利用它们为您带来好处。问为什么？不会有任何帮助。

$('#testElement').attr('src',"success.png");
$('#testElement').prop('src',"success.png");

$('#testElement').attr('src', 'success.png');
$('#testElement')[0].src = 'success.png';
                --^-- get DOM element

>$('#testElement');