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")

时间: 2011-07-25

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获取控件对象为空的解决方法

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

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等方法的实现差异解析

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

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

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的简写方式(获取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;

javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法 原创

ie8中对于声明文档类型更加严格如下面的代码. 运行环境: function osdo(str){ document.getElementById("os").value=str; } 清空 Windows平台 S60v2 S60v3 CHM PDF PPT WORD EXCEL asp asp+access asp+sqlserver asp+sql/access php源码 php php+mysqljsp asp.net源码 asp.net asp.net+access asp.

三种方式获取XMLHttpRequest对象

获取XmlHttpRequest对象 复制代码 代码如下: //1 function getXMLHttpRequest() { var xmlHttpReq; try { // Firefox, Opera 8.0+, Safari xmlHttpReq = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); }

js中获取事件对象的方法小结

复制代码 代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在html的属性中写JS代码 复制代码 代码如下: <div onclick="alert(4);">Div1 Element</div> 大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的

一行代码告别document.getElementById

所以绝大多数的脚本里,都是直接通过元素的id来访问DOM的. 后来随着各种浏览器接踵而至,逐渐的替代了ie.为了保证各路门派统一规则,标准化越来越被重视.当初那种直接访问id的方法,逐渐被document.getElementById所替代.如果这年头还在用id访问元素,要么就是做程序里的内嵌网页,要么就是像铁道部那样的超境界仿古网站:) 当然只要保证你的用户都是用ie访问,这样的非标准也但用无妨. 然而,很多第三方浏览器刚出来的时候,为了保证能与当时大量的非标准页面兼容,都保留了用id访问DO

javascript typeof id==='string'?document.getElementById(id):id解释 原创

一般来说想要理解这段代码,需要掌握如下两个函数 一个是 typeof一个就是三元运算符 看完了上面的文章再看下面的就比较好理解了 一般来说常用的函数代码 function $(id){ return typeof id==='string'?document.getElementById(id):id;} var GetBy = function (id) { return "string" == typeof id ? document.getElementById(id) : id

JavaScript中访问id对象 属性的方式访问属性(实例代码)

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

JS获取html对象的几种方式介绍

document.getElementById("zx"); 通过ID获取html元素对象,ID号在html文档当中应该是唯一的.返回的是唯一element对象.并且所有浏览器都兼容. document.getElementsByTagName("span")[0]; 通过标签查找html对象,由于html标签在一个页面中可能重复很多次,所以当前页面返回的是一个数组.可以根据标签出现的位置定位元素的对象.所有浏览器都兼容. document.getElementsB