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

在今天写一个canvas的小程序时，才发现这两者是不一样的。

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


代码如下:

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

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


代码如下:

$("#jb51") [canvas#jb51]
document.getElementById("jb51") canvas#jb51

想必，看到这里，不用我说，大家也会想到结果了。
实际上，$("#jb51")[0]等同于 document.getElementById("jb51")

赞 (0)

相关推荐

  • document.getElementById的简写方式(获取id对象的简略写法)

    比如用_$(id)代替document.getElementById(id). 如果是纯粹的代替可以使用下面的代码 复制代码 代码如下: function $(id){document.getElementById(id)} 个人比较推荐用prototype中对document.getElementById的定义: 复制代码 代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length;

  • 各浏览器对document.getElementById等方法的实现差异解析

    所有Web前端同仁对 document.getElementById 都非常熟悉了.开发过程中经常需要用其获取页面id为xx的元素,自从元老级JS库Prototype流行后,都喜欢这么简写它 复制代码 代码如下: // 方式1 function $(id){ return document.getElementById(id); } 有没有人想过为什么要这么写,而不用下面的方式写呢? 复制代码 代码如下: // 方式2 var $ = document.getElementById; 这么写的$

  • js中document.getElementByid、document.all和document.layers区分介绍

    document.all是IE 4.0及以上版本的专有属性,是一个表示当前文档的所有对象的娄组,不仅包括页面上可见的实体对象,还包括一些不可见的对象,比如html注释等等.在document.all数组里面,元素不分层次,是按照其在文档中出现的先后顺序,平行地罗列的.所以可以用数字索引来引用到任何一个元素.但比较常用的是用对象id来引用一个特定的对象,比如document.all["element"]这样. document.layers是Netscape 4.x专有的属性,是一个代表

  • document.getElementById介绍

    把你的大脑当做浏览器执行下面的代码两次,分别是IE6和IE9: 复制代码 代码如下: function testFunc(){ alert('test') } $(function(){ var g = document.getElementById , w = window.testFunc ; //g alert(typeof(g)); alert(String(g)); alert(g instanceof Object); alert(g instanceof Function); //

  • document.getElementById方法在Firefox与IE中的区别

    [要点]document.getElementById方法在Firefox与IE中的区别. 如下,有一name="txtVersion"的text控件: 复制代码 代码如下: <div> <input type="text" name="txtVersion" size="15" value="Version" maxlength="25"> </div&g

  • document.getElementById为空或不是对象的解决方法

    1. 'null'为空或不是对象: <script type="text/javascript"> 里面加个defer=true属性试试看, 即:<script type="text/javascript" defer=true> 2. document.getElementById为null 原因: var titab=document.getElementById("titletab");没有取到对象 解决办法: 1.

  • document.getElementById获取控件对象为空的解决方法

    1.下面是一个简单的例子,页面加载时显示一段信息 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <

  • jquery中的 $("#jb51")与document.getElementById("jb51") 的区别

    在今天写一个canvas的小程序时,才发现这两者是不一样的. 直接用alert()来显示这两个方法倒底获得的是什么.代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jb51</title> <link href="css/index.css" rel="stylesheet&

  • jQuery中的$是什么意思及 $. 和 $().的区别

    像我这种没有经过系统学习的人总是有这样的问题:( $就是jQuery的别称 而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数, 因为还有 $.ajax(options) 这样的使用,等同 jQuery.ajax(options)) 这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素, 函数作用之一就是GetElementByID的代替,但()内不仅可以是ID,还可以是各类选择器 比如: $(document)就是 选取整个文档对象 那是不是只可以用$来代

  • jQuery中的for循环var与let的区别

    今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.ajax({ type: "get", url: "//////////////////////////", success: function (result) { rs = JSON.parse(result).data; for (var i = 0; i <

  • 全面解析jQuery中的$(window)与$(document)的用法区别

    [window对象] 它是一个顶层对象,而不是另一个对象的属性,即表示浏览器中打开的窗口.   1.属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象) frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个 对象) history 窗口的历史列表(该属性本身也是一个对象) length 窗口内的框架数 locat

  • jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); 复制代码 代码如下: $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 复制代码 代码如下: $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的.return

  • jQuery中使用了document和window哪些属性和方法小结

    document.activeElement获取文档当前获得焦点的元素 document.head在jQuery中使用方式如下document.head || document.getElementsByTagName( "head" )[0] ,可见并非所有浏览器支持 document.body获得当前文档的HTMLBodyElement元素 document.compatMode 获取当前文档的渲染方式.返回值:BackCompat(怪癖模式)和CSS1Compat(标准模式).

  • jquery中ajax学习笔记一

    jquery中ajax学习笔记一

    AJAX简单介绍: AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),是指一种创建交互式网页应用的网页开发技术.通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象,您JavaScript 可在不重载页面的情况与 Web 服务器交换数据. jQuery是一种javascript框架,是对javascript的一种轻量级的封装,容易理解. A

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

  • 详解jQuery中的empty、remove和detach

    详解jQuery中的empty、remove和detach

    通过一张对比表来解释几个方法之间的不同 三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同. 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取. 一.empty: This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according

随机推荐