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


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

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

复制代码 代码如下:

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

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

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

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



相关阅读:
SQL Server_8525引擎错误怎么办?
java tapestry5 布局 参数的处理
CSS代码属性分组的写法例子
高效管理Windows Server 2008的卷影副本
教程:MYSQL创建触发程序的方法
我的网络我做主--巧用活用域控制器
表单元素事件 (Form Element Events)
Oracle四大应用服务详细介绍
关于Linux系统声卡驱动的安装与配置
网页重构时在IE6中遇到png兼容性
php is_file()和is_dir()用于遍历目录时用法注意事项
Windows7 兼容性仍然存在问题
javascript布局查看器效果代码
F#异步及并行模式中如何实现轻量级代理
快速导航

Copyright © 2016 phpStudy |