以前没注意过，认为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 1754 I Hate It (splay tree伸展树)

    hdu 1754 I Hate It 其实我只是来存一下我的splay模板的..请大牛们多多指教 #include<stdio.h> #include<string.h> #i ...

  2. 电脑无法识别U盘（usb类外接设备）的解决办法

    首先分析USB无法识别的硬件原因: 1.BIOS禁用了USB设备.(进入BIOS,将"Enable USB Device"修改为"Enable") 2.USB接 ...

  3. Centos下安装FTP并进行虚拟用户访问方式配置

    1. 安装认证所需包 [root@localhost]#yum install pam* [root@localhost]#yum install db4* 首先安装PAM(用于用户认证)和DB4(用 ...

  4. 误删/tmp导致hadoop无法启停, jsp无法查看的解决方法

    问题描述 我的hadoop版本是hadoop-cdh4.2.0,由于误删了/tmp目录(不是hadoop.tmp.dir设定的那个目录),在Namenode,SecondaryNamenode和Dat ...

  5. GNOME3启动时出错：Oh no! Something has gone wrong.Logout！

    今天用虚拟机安装debian7.1,在启动的时候遇到登录失败的问题,用GNOME Classic可以登录,特地记录如下: 原文出处:http://r3dux.org/2011/11/how-to-fi ...

  6. [Javascript] Create an Array concatAll method

    In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we ...

  7. Monitoring and Tuning the Linux Networking Stack: Receiving Data

    http://blog.packagecloud.io/eng/2016/06/22/monitoring-tuning-linux-networking-stack-receiving-data/ ...

  8. C# Attribute（中）——Attribute本质论

      小序:                   上篇里,我们把Attribute“粘”在类的成员方法上show了一把,让Attribute跟大家混了个脸儿熟.中篇里,我们将探讨“究竟什么是Attrib ...

  9. MySQL 权限？

    一．权限表 mysql数据库中的3个权限表:user .db. host 权限表的存取过程是: 1)先从user表中的host. user. password这3个字段中判断连接的IP.用户名.密码是 ...

  10. google DNS

    DNS 8.8.8.8 然后 C:\Windows\System32\drivers\etc\hosts 108.111.1.1  www.s.com