Doesn't jQuery('#id') do the same thing as document.getElementById('#id') in javascript?

Question

Possible Duplicate:
document.getElementById vs jQuery

I have a function that will take all the spans with a certain class ("jobStatus") and remove an additional class from it ("orange"). I call the function from a SELECT onchange (onchange="chgJobstatus(this);"). It's working great.

However, I'm trying to get it to run on page load, based upon the selected value (this is server-side dynamically generated.)

This will work:

     $(document).ready(function(){
          chgJobstatus(document.getElementById("chgStatus"));
     });

This will NOT work:

     $(document).ready(function(){
          chgJobstatus(jQuery('#chgStatus'));
     });

Doesn't jQuery('#id') do the same thing as document.getElementById('#id') ??

check this: http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery — Ta Duy Anh, Oct 14 '12 at 12:32
you said that the elements are selected by a class "jobStatus", why are you selecting on ID at all? — jbabey, Oct 14 '12 at 12:32

score 9 · Accepted Answer · answered Oct 14 '12 at 12:33

9

Regarding selecting the element, yes, but jQuery selectors return jQuery objects and getElementById returns a DOM Element object, you can get the DOM Element using [index] or get(index) method:

chgJobstatus(jQuery('#chgStatus')[0]);

answered Oct 14 '12 at 12:33

Ram

143,282
16
168
197

Jan · Answer 2 · 2012-10-14T15:00:45.083

0

No, jQuery('#id') returns a jquery object, with additional functions and properties attached to it.

I'm not entirely sure what you're trying to do, but something like this could substitute all the javascript you've described.

$("#chgStatus")
  .bind("change", function() {
    $(".jobStatus").removeClass("orange");
  }).trigger("change");

edited Oct 14 '12 at 15:00

answered Oct 14 '12 at 12:32

Jan

5,688
3
27
44

Anoop · Answer 3 · 2012-10-14T12:39:53.663

0

This will surely work. jQuery(selector) always return a jQuery object (jQuery(selector) instanceof jQuery is true ) . but you can get native dom element using .get or simply using array like syntax as below.

$(document).ready(function(){
          chgJobstatus(jQuery('#chgStatus')[0]);
     });

edited Oct 14 '12 at 12:39

answered Oct 14 '12 at 12:33

Anoop

23,044
10
62
76

score 0 · Answer 4 · edited May 23 '17 at 12:27

jQuery('#id') - returns a jQuery Object

document.getElementById('#id') - returns a HTML DOM Object

jQuery('#id').get(0); OR jQuery('#id')[0]; - returns a HTML DOM Object

By using jquery it will allows you to access jquery functions. if you read below links you will get an good idea.

document.getElementById vs jQuery

jQuery $() vs. document.getElementByID — differences

getelementbyid-vs-jquery-id

jquery-sharp-vs-getelementbyid

getelementbyid-vs-jquery-id