以前没注意过，认为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. nyoj 540 奇怪的排序

    奇怪的排序 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 最近,Dr. Kong 新设计一个机器人Bill.这台机器人很聪明,会做许多事情.惟独对自然数的理解与人类 ...

  2. localstorage本地存储

    前段时间项目上用到了本地存储,所以研究看了下,在这做下笔记. 本地存储是一个window的一个属性,分别是localStorage和sessionStorage,两者用法完全相同,只不过一个是sess ...

  3. python 语句，条件，循环

    #coding:utf-8__author__ = 'Administrator'#想要在同一行打印,print后面加','print 12,print 34'''从模块导入函数import some ...

  4. maven 通过nexus创建工厂的配置

    访问中央工厂的地址:http://localhost:8081/nexus/index.html#welcome   admin.admin123 查找到自己配置的maven仓库的位置,编辑setti ...

  5. ThinkPHP3.1新特性：Action参数绑定

    Action参数绑定功能提供了URL变量和操作方法的参数绑定支持,这一功能可以使得你的操作方法定义和参数获取更加清晰,也便于跨模块调用操作方法了.这一新特性对以往的操作方法使用没有任何影响,你也可以用 ...

  6. 机器学习算法-K-means聚类

    引文: k均值算法是一种聚类算法.所谓聚类.他是一种无监督学习,将类似的对象归到同一个蔟中.蔟内的对象越类似,聚类的效果越好. 聚类和分类最大的不同在于.分类的目标事先已知.而聚类则不一样. 由于其产 ...

  7. careercup-数学与概率 7.6

    7.6 在二维平面上,有一些点,请找出经过点数最多的那条线. 解法: 类似于leetcode:Max Points on a Line 我们只需在任意两点之间“画”一条无限长的直线(也即不是线段),并 ...

  8. MantisBT

    官方网站:http://www.mantisbt.org/ MantisBT is a free popular web-based bugtracking system (feature list) ...

  9. Network Load Balancing Technical Overview--reference

    http://technet.microsoft.com/en-us/library/bb742455.aspx Abstract Network Load Balancing, a clusteri ...

  10. Linux运维工程师成长必经之路

    本路线图是从0基础开始,全方位由浅入深,按照多年Linux培训经验和优秀教学方法制定的学习思路和学习方法,路线图包括初级入门.中级进阶.高级提升和资深冲刺四个阶段,每阶段对应着不同优秀的课程和学习方法 ...