以前没注意过，认为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. sql server 分布式事务

    使用分布式事务刚好可以解决集群同时更新多台SQL SERVER数据库,要么全部成功,要么全部回滚的需要. 原来微软早考虑到此方面的问题了. 下面背书,贴出微软官网上面的帮助文档: 分布式事务跨越两个或 ...

  2. IBOutlet & IBAction

    IBOutlet UILabel *label; 这个label在Interface Builder里被连接到一个UILabel.此时,这个label的retainCount为2. 所以,只要使用了I ...

  3. lettCode-Array

    1   Remove Element    lintcode-172 描述: 删相同元素,反现有长度 记忆:标不同元素,反标记值 public int removeElement(int[] a, i ...

  4. Unity3D 导入贴图、模型等资源文件时自动设置参数

    脚本继承至AssetPostprocessor, 存放在Editor目录下! using UnityEngine; using System.Collections; using UnityEdito ...

  5. wechat客户端修改

    1. src/ui/adapter/FriendCardAdapter.java @Override     public View getView(int position, View conver ...

  6. [HTTPS] MAN IN THE MIDDLE (MITM)

    If you go a public caffee shop, they have free wifi. How could you make sure your infomration cannot ...

  7. Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解（二）

    在上一篇文章中我详细的介绍了如何搭建maven环境以及生成一个maven骨架的web项目,那么这章中我将讲述Spring MVC的流程结构,Spring MVC与Struts2的区别,以及例子中的一些 ...

  8. git设计哲学

    刚开始使用git的时候,总想拿git来和cvs或者svn来作对比,但不久后发现这个想法本身就是错的,git完全就是另外一种物种,一种本属于未来的物种.它的对象存储方式,快照,分支等,都是完全不同的. ...

  9. 组合模式(Composite Pattern)

    组合模式定义:组合模式允许你将对象组合成树形结构来表现"整体/局部"层次结构,组合能让客户以一致的方式处理个别对象以及对象组合. 当涉及到如:菜单,子菜单之类的问题时,会自然而然的 ...

  10. linux网卡混杂模式打开

    有时候为嗅探到网络上的数据,需要将网卡设置到混杂模式.进入该模式将网络上的数据一并抓获,为此在设置nic的混杂模式的时候有诸多方法? 通过shell命令来实现:ifconfig eth1 promis ...