CODEWITHSUNDEEP
javascriptjquery
Hakan
Hakan

Reputation: 3885

Difference between jquery $('#my_id') and document.getElementById('my_id')?

I tought $('#my_id1') was the same thing as document.getElementById('my_id1'). But it is parently not. What is the difference?

(function( $ ) {
  $.fn.simple_hide_function = function() {
  var $t = this;
  $t.hide();
  };
})( jQuery );

$(window).load(function () {
var $div1 = $('#my_id1');
var $div2 = document.getElementById('my_id2');
$div1.simple_hide_function(); // this is working
$div2.simple_hide_function(); // but this is not working
});

Adding example to make it more clear:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="my_id1" style="height:100px;background:#f00">div1</div>
<div id="my_id2" style="height:100px;background:#f00">div2</div>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

(function( $ ) {
  $.fn.simple_hide_function = function() {
  var $t = this;
  $t.hide();
  };
})( jQuery );

$(window).load(function () {
var $div1 = $('#my_id1');
var $div2 = document.getElementById('my_id2');
$div1.simple_hide_function();
$div2.simple_hide_function();
});

</script>
</body>
</html>

Upvotes: 2

Views: 2352

Answers (5)

Capricon
Capricon

Reputation: 1

According to me, there is difference in its rendering in Browsers.

As if we do not use document. This will not work in IE browsers.

But only work in other browsers.

Upvotes: 0

Pradeep Singh
Pradeep Singh

Reputation: 3634

Use my_id1:

var $div2 = document.getElementById('my_id1');

Upvotes: 0

Larry Williamson
Larry Williamson

Reputation: 1143

$('#my_id1') // Returns a jQuery object

And

getElementById('my_id1') // Returns a DOM object.

To get the DOM object of a jQuery object, you can call:

$('#my_id1').get()

jQuery can match more than one object with a selector, so to get the second matching DOM element:

$('#my_id1').get(1) // 1 = item #2 (zero-based index)

And to get matching DOM elements from the END of the collection, you can use a negative number, the distance from the end of the matched elements you want to retrieve, so -1 gets the last item.

$('#my_id1').get(-1) // gets the last item of the matched elements

Upvotes: 1

Interrobang
Interrobang

Reputation: 17434

The first returns a jQuery object with that div as its only member. You can use jQuery functions on the object to manipulate it.

The second returns a DOMElement using the browser's built-in methods.

Upvotes: 4

Aliostad
Aliostad

Reputation: 81680

Difference is that first one returns a jquery object while the second returns a DOM element.

But these statements are equivalent:

document.getElementById('my_id2') <->  $('#my_id1').get(0)

or

document.getElementById('my_id2') <->  $('#my_id1')[0]

Upvotes: 7

Related Questions