jquery中的 $("#**")与document.getElementById("**") 的区别

原文网址:http://www.jb51.net/article/27800.htm

直接用alert()来显示这两个方法倒底获得的是什么。代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jb51</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<div class="warp">
<canvas id="jb51"></canvas>
</div>
<script>
var canvas_jb51=$("#jb51");
alert(canvas_jb51);
alert(document.getElementById("jb51"));
var jb51_2d=canvas_jb51.getContext("2d");
var jb51_img=new Image();
jb51_img.src="images/Boston-III-48px.png";
jb51_2d.drawImage(jb51_img,0,0);
</script>
</body>
</html> 

两个alert()分别显示为:[object Object]和[object HTMLCanvasElement]。从这里,不难看出,$("#jb51")并没有像我预想的那样。再用firebug调试看一下,
$("#jb51")和document.getElementById("jb51")倒底是什么内容。调试结果如下:

$("#jb51") [canvas#jb51]
document.getElementById("jb51") canvas#jb51 

想必,看到这里,不用我说,大家也会想到结果了。
实际上,$("#jb51")[0]等同于 document.getElementById("jb51")

时间: 2024-10-13 00:02:24

jquery中的 $("#**")与document.getElementById("**") 的区别的相关文章

jQuery的$(‘#id’)与document.getElementByID(&#39;id&#39;)的区别

用jQuery选择的包装集返回的是jQuery对象,用document.getElementByID返回的是DOM对象. jQuery对象 --> DOM对象 /* Convert a jQuery object to a DOM object.*/var jquery = $('#id');alert(jquery.html()); var dom = jquery[0];// or var dom = jquery.get(0);alert(dom.innerHTML); DOM对象 -->

jQuery中的bind() live() delegate()之间区别分析

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$

jQuery中的closest()和parents()的区别

jQuery中的closest()和parents()的区别 jQuery中closest()和parents()的作用非常相似,都是向上寻找符合选择器条件的元素,但是他们之间有一些细微的差别,官网也给出了说明: .closest() .parents() Begins with the current element Begins with the parent element Travels up the DOM tree until it finds a match for the sup

jquery中html 与 text方法的区别

jquery中html 与 text方法的区别 24 May 2012/in 网站设计和开发 /by Bruce 接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别. 通常在用jquery写ajax时,都会用到html()这个方法,而不用text()这个方法,他们之间有什么区别呢?

jQuery中 .bind() .live(). delegate() . on() 的区别

jQuery中   .bind()    .live().   delegate() .   on()  的区别 这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href="#"><li>1111111</li></a> <a href="#"><li>22222</

jQuery 中的children()和 find() 的区别

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <ul class="level-1"> <li class="item-i">I</li>

jquery 中 on 和普通绑定的区别

都说on是用于动态添加的元素的事件.但是你不觉得奇怪嘛,难道动态添加的元素就不能用普通的事件绑定,这样说不通啊! 其实是on可以在元素添加到dom之前绑定,而对于普通绑定,只要元素已经出现在了dom中,不论是否动态添加  事件当然也是生效的 $('body').on('click', '.d1', function(event) { //event.preventDefault(); console.log('on0');//ok }); console.log($('.d1')); $('.d

jquery中this与$(this)的用法区别

jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的. 但是如果将this换成$(this)就不是那回事了,就会报错了. 以下写法是错误的

jQuery中attr和prop方法的区别

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes.prop应运而生了. 之前看网上对比两者的文章,更是列出一个表来区分什么标签下使用prop,什么标签下使用attr,原谅我是懒惰的人,最害怕要背的东西,所以只有自己想想办法了. 既然我们想知道他们两的