5

这是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 对象来进行更多操作，例如“追加/样式”...

谢谢。

更新 几乎同时出现了太多正确答案...请提供更多解释，让我决定应该归功于谁，谢谢！

抱歉，我对您的正确答案理解不佳……我只想了解更多详细信息。

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

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

4

7 回答 7

10

A jQuery element is a DOM element wrapped in an array-like jQuery object so you have access to all the jQuery methods, but that means you "lose" access to the original DOM methods and properties. You can either use a jQuery method or grab the original DOM element to be able to use the vanilla properties.

$('#testElement').attr('src', 'success.png');
$('#testElement')[0].src = 'success.png';
                --^-- get DOM element
于 2012-11-25T04:50:10.397 回答
8

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

$('#testElement').attr("src", "success.png");
于 2012-11-25T04:47:16.773 回答
4

应该

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

或者

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

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

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

也可以实现

$('#testElement')[0].src = "success.png";
于 2012-11-25T04:48:40.597 回答
3

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

$('#testElement').attr('src', 'success.png')
于 2012-11-25T04:47:27.070 回答
3

改用这个：

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

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

$('#testElement').prop("src","success.png");
于 2012-11-25T04:47:41.953 回答
3

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

$('#testElement').attr('src',"success.png");
$('#testElement').prop('src',"success.png");
于 2012-11-25T04:49:39.317 回答
2 
>$('#testElement');

[<img id=​"testElement" style=​"position:​ absolute;​ border-color:​ white;​ top:​340px;​ left:​615px;​" width=​"34px" height=​"34px">​]

As you can see $ returns an array of DOM elements. Similar to document.getElementsBy(Class|Tag)Name, if you want a DOM comparison.

When dealing with an ID (#testElement), you're about sure there's only one element like this, so you can access it directly with $('#testElement')[0] (ie, the first element in the array). After that, you're good to go and treat it just the way you'd do it in plain JS.

于 2012-11-25T05:25:11.983 回答