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

 更新时间:2011年07月26日 19:30:02   作者:   我要评论
以前没注意过,认为jquery 中的 $("#jb51") 与 document.getElementById("jb51") 是一回事,指的是同一个东西。
在今天写一个canvas的小程序时,才发现这两者是不一样的。

直接用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")

相关文章

  • Jquery遍历checkbox获取选中项value值的方法

    Jquery遍历checkbox获取选中项value值的方法

    这篇文章主要介绍了Jquery遍历checkbox获取选中项的value值,需要的朋友可以参考下
    2014-02-02
  • jQuery学习笔记 获取jQuery对象

    jQuery学习笔记 获取jQuery对象

    为了将Web的结构层和表现层、行为层彻底分离,就不应该在HTML标签上直接定义样式或事件等。这意味着要想设置页面中的某个元素,就需要先把这个元素选择出来,选择器正是解决这个问题的技术
    2012-09-09
  • jquery.masonry瀑布流效果

    jquery.masonry瀑布流效果

    这篇文章主要为大家详细介绍了jquery.masonry瀑布流效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Jquery的基本对象转换和文档加载用法实例

    Jquery的基本对象转换和文档加载用法实例

    这篇文章主要介绍了Jquery的基本对象转换和文档加载用法,实例分析了Jquery的基本对象转换及文档加载使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 使用Jquery获取带特殊符号的ID 标签的方法

    使用Jquery获取带特殊符号的ID 标签的方法

    这篇文章主要介绍了使用Jquery如何获取带特殊符号的ID 标签,该怎么写,需要的朋友可以参考下
    2014-04-04
  • JQuery ztree带筛选、异步加载实例讲解

    JQuery ztree带筛选、异步加载实例讲解

    这篇文章主要为大家详细介绍了JQuery ztree带筛选、异步加载实例,zTree支持静态 和 Ajax 异步加载节点数据,并支持极其灵活的checkbox或radio选择功能,本文为大家进行具体介绍
    2016-02-02
  • jquery中post方法用法实例

    jquery中post方法用法实例

    这篇文章主要介绍了jquery中post方法用法,以实例的形式分析了post方法的具体用法,并对相关的知识点及注意点进行了较为深入的分析,需要的朋友可以参考下
    2014-10-10
  • jquery+css3打造一款ajax分页插件(自写)

    jquery+css3打造一款ajax分页插件(自写)

    这篇文章主要介绍了自己写的一款ajax分页插件,用jquery+css3打造支持IE6+,但没有动画效果,需要的朋友可以参考下
    2014-06-06
  • 一款基jquery超炫的动画导航菜单可响应单击事件

    一款基jquery超炫的动画导航菜单可响应单击事件

    。这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中。再次单击按钮,导航飞入左侧消息
    2014-11-11
  • 使用jQuery制作基础的Web图片轮播效果

    使用jQuery制作基础的Web图片轮播效果

    这篇文章主要介绍了使用jQuery制作基础的Web图片轮播效果的实例,鼠标悬停时可停止而离开时可自动轮播,文中还介绍了一种使用zslider插件来实现的方法,比较犀利,需要的朋友可以参考下
    2016-04-04

最新评论