以前没注意过，认为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. 让BOOTSTRAP默认SLIDER支持触屏设备

    var isTouch=('ontouchstart' in window); if(isTouch){ $(".carousel").on('touchstart', funct ...

  2. 多点触控之MotionEvent.ACTION_MASK作用

    ACTION_MASK在Android中是应用于多点触摸操作,字面上的意思大概是动作掩码的意思吧. 在onTouchEvent(MotionEvent event)中,使用switch (event. ...

  3. ios 工程配置统一增加类的前缀（知识点也只能算知识点）

    在前边的代码规范中提及:团队开发或者个人开发为了打包或者自己工程中避免创建新的类核第三方系统的重复增加类的统一前缀!!又很多人问我这种开发小技巧.下面我就普及一下: 1.首先选中你的工程配置 2.然后 ...

  4. 【Android - 进阶】之自定义视图浅析

    1       概述 Android自定义View / ViewGroup的步骤大致如下: 1) 自定义属性: 2) 选择和设置构造方法: 3) 重写onMeasure()方法: 4) 重写onDra ...

  5. 菜鸟学习-C语言函数参数传递详解-结构体与数组 分类： C/C++ Nginx 2015-07-14 10:24 89人阅读 评论(0) 收藏

    C语言中结构体作为函数参数,有两种方式:传值和传址. 1．传值时结构体参数会被拷贝一份,在函数体内修改结构体参数成员的值实际上是修改调用参数的一个临时拷贝的成员的值,这不会影响到调用参数.在这种情况下 ...

  6. [AngularJS] angular-formly: expressionProperties

    angular-formly provides a very simple API to dynamically change properties of your field (like disab ...

  7. jsp中的包含 include标签和ejb的小知识点

    <!-- 用inclue指令导入安全登录防护代码(静态包含) --> <!-- 静态包含:把被包含代码拷到当前类中形成一个新的类,执行.包含与被包含代码是合写在同一个类(servic ...

  8. HDU1010(bfs)

    #include <stdio.h>#include <iostream>#include <string.h>#include <stdlib.h>u ...

  9. Magento 中的多个类别的筛选产品集合

    通过在 Magento 中的多个类别的筛选产品集合. 按只 1 类别筛选 Magento 提供筛选器,可以使用直接从该集合的类型: $_category = Mage::getModel('catal ...

  10. 一个月的时间--java从一无所有到能用框架做点东西出来

    四月20号到六月2号 因为顺利完成了Struts在线考试系统的学习,基本掌握了struts框架的原理和他众多复杂的标签.趁着下一件事情还没到时间,也顾不上写昨天研习的student部分和今天stude ...