以前没注意过，认为jquery 中的 $("#air") 与 document.getElementById("air") 是一回事，指的是同一个东西。在今天写一个canvas的小程序时，才发现这两者是不一样的。

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>air</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="air"></canvas>
</div>
<script>
var canvas_air=$("#air");
        alert(canvas_air);
        alert(document.getElementById("air"));
var air_2d=canvas_air.getContext("2d");
var air_img=new Image();
    air_img.src="data:images/Boston-III-48px.png";
    air_2d.drawImage(air_img,0,0);
</script>
</body>

</html>

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

$("#air")                         [canvas#air]

document.getElementById("air")    canvas#air

想必，看到这里，不用我说，大家也会想到结果了。

实际上，$("#air")[0]等同于 document.getElementById("air");

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

  1. function $(id) { return typeof id === "string" ? document.getElementById(id) : id; }

    function $(id) {   return typeof id === "string" ? document.getElementById(id) : id; } 这句代 ...

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

    以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...

  3. function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。

    function $(id){ return document.getElementById(id); } document.getElementById(id) 是获得id这个元素的. 相当于定义了 ...

  4. jQuery中，$('#main') 与 document.getElementById('main')是什么样的关系-转

    $('#main')[0]和document.getElementById('main')两个一模一样.解释:$('#main'):是一个jquery写法,#main是一个过滤器表示方法,表示查找一个 ...

  5. 封装document.getElementById(id)

      CreateTime--2016年12月18日11:42:45Author:Marydon封装document.getElementById(Id)方法 <script type=" ...

  6. document.getElementById("id").value与$("#id").val()之间的区别

    本文链接:https://blog.csdn.net/mottohlm/article/details/78364196....今天在项目中遇到这么一个JS报错:原因是代码中有这么一段:对,就是var ...

  7. 获得输入框的文本document.getElementById('id').value;

    <input id="demo" type="text" value="" > x=document.getElementByI ...

  8. document.getElementById(“id”)与$("#id")的区别

    document.getElementById("id")可以直接获取当前对象, jQuery利用$("#id")获取的是一个[object Object],需 ...

  9. Id.value与document.getElementById("Id").value的区别

    如果标签Id在Form表单里面的话,直接Id.value就不能用了,而是要用Form.Id.value来取值或设置值 所以最好用document.getElementById("Id&quo ...

随机推荐

  1. hdu 3724 Encoded Barcodes

    Trie模板.把所有单词都用字典树存起来,然后给每个节点赋权值表示前缀到该节点出现了几次.然后直接查询就可以了. #include <algorithm> #include <ios ...

  2. SQL Server:OA权限管理设计的实现 下

    SQL Server:OA权限管理设计的实现 下   OA系统权限管理设计方案     不同职责的人员,对于系统操作的权限应该是不同的.优秀的业务系统,这是最基本的功能.     可以对“组”进行权限 ...

  3. freemarker list (长度,遍历,下标,嵌套,排序)

    1. freemarker获取list的size : Java ArrayList<String> list = new ArrayList<String>(); Freema ...

  4. HDU 3333 & 3874 (线段树+离线询问)

    两个题目都是求区间之内,不重复的数字之和,3333需要离散化处理................. 调试了一下午........说多了都是泪........... #include <iostr ...

  5. linux ssh 中在window 传文件 下载文件 工具

    centos 安装工具 yum install lrzsz

  6. careercup-树与图 4.2

    4.2 给定有向图,设计一个算法,找出两个结点之间是否存在一条路径. 解答 根据题意,给定一个有向图和起点终点,判断从起点开始,是否存在一条路径可以到达终点. 考查的就是图的遍历,从起点开始遍历该图, ...

  7. android的activity的跳转

    1.无参数的跳转 先在layout下建立一个factivity.xml,在里面添加2个Button按钮和一个TextView,并添加属性 , 然后建立以个sactivity.xml文件, 在src下建 ...

  8. 谓词(NSPredicate)

    OC中的谓词操作是针对于数组类型的,他就好比数据库中的查询操作,数据源就是数组,这样的好处是我们不需要编写很多代码就可以去操作数组,同时也起到过滤的作用,我们可以编写简单的谓词语句,就可以从数组中过滤 ...

  9. 关于调用系统照相机Activity被销毁问题解决

    <activity                  android:name=".visitplan_finish"                  android:co ...

  10. linux中的openoffice服务终止运行

    现象: 最近的linux中的openoffice服务进程运行一段时间后会自动停止,刚开始还以为忘了启动执行自启动脚本导致的.在连续出现前述情况后,开始查找应用程序崩溃的原因,首先查看linux服务器的 ...