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" ".dtd">
<html xmlns="">
<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=".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>
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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>
- 1 You have my_id1 vs my_id2 - identifiers are not the same – Nobita Commented Dec 29, 2011 at 11:39
- do you have div with "my_id2" id..! – Sudhir Bastakoti Commented Dec 29, 2011 at 11:40
- Starting your variable names with $ is a bit weird - $t, $div1 and so on - just because jQuery uses $ everywhere doesn't mean you have to. Oh, you think its PHP? – Spacedman Commented Dec 29, 2011 at 11:46
- 1 @Spacedman it's a mon convention to keep track of things that are supposed to be saved jQuery lookups. – Pointy Commented Dec 29, 2011 at 11:59
- thanks - not seen that before! – Spacedman Commented Dec 29, 2011 at 13:29
5 Answers
Reset to default 7Difference 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]
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.
$('#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
Use my_id1:
var $div2 = document.getElementById('my_id1');
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.