Question

这是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>

access.js文件是：

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

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

我需要jQuery对象来进行更多操作，例如“append / style”......

感谢。

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

很抱歉我对你正确答案的理解不够......我只想了解更多细节。

所有属性节点（src / width / height ...）都不是jQuery对象的属性吗？那么jQuery选择器只选择像img / p / li / div节点那样的DOM元素节点吗？（＆lt;＆gt;导致一些错误。）

请查看更新后的信息...... 谢谢！

Answer 1

jQuery元素是一个包含在类数据 jQuery对象中的DOM元素，因此您可以访问所有jQuery方法，但这意味着您“失去”对原始DOM方法和属性的访问权限。您可以使用jQuery方法或抓取原始DOM元素以便能够使用vanilla属性。

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

Answer 2

因为你需要在jQuery对象上使用.attr() jQuery方法：

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

Answer 3

应该是

$('#testElement').prop("src","success.png");  //1.6 and above

OR

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

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

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

也可以用

实现

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

Answer 4

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

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

Answer 5

请改用：

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

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

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

Answer 6

jQuery对象没有src属性，这是一个DOM对象属性，这就是getElementById工作的原因，使用.attr()或.prop()设置匹配的元素属性或属性

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

Answer 7

>$('#testElement');

[＆lt; img id =＆＃34; testElement＆＃34; style =＆＃34; position：absolute; border-color：white; top：340px; left：615px;＆＃34;宽度=＆＃34; 34像素＆＃34;高度=＆＃34; 34像素＆＃34;＆GT;]

正如您所看到的，$返回一个DOM元素数组。与document.getElementsBy(Class|Tag)Name类似，如果您想进行DOM比较。

在处理ID（#testElement）时，您确定只有一个这样的元素，因此您可以使用$('#testElement')[0]直接访问它（即，第一个元素）数组）。在那之后，你可以按照你在普通JS中的方式来对待它。

为什么jQuery选择器无法工作但getElementById在这种情况下有效？

7 个答案: