Why jQuery selector can't work but getElementById works in this scenario?

Posted by Stallman on Stack Overflow See other posts from Stack Overflow or by Stallman
Published on 2012-11-25T04:45:44Z Indexed on 2012/11/25 5:03 UTC
Read the original article Hit count: 210

Filed under:
|
|

Here is the 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>

And the access.js file is:

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

I know that if I use $, the return object is a jQuery object. It's not the same as getElementById. But why the jQuery selector can't work here?

I need the jQuery object to make more operations like "append/style"...

Thanks.

UPDATE Too much correct answers appear at almost the same time... Please give more explanations to let me decide who I should give the credit, thanks!!! Sorry for my poor understanding of your correct answer... I just want more detail.

Are all the attribute nodes(src/width/height...) not the property of jQuery object? So does the jQuery selector only select DOM Element Node like

  • ?

    Thank you! 3. List item

  • © Stack Overflow or respective owner

    Related posts about JavaScript

    Related posts about jQuery