jquery 中的 $(“#”) 与 js中的document.getElementById(“”) 的区别

阳光穿透心脏的1/2处 2022-08-27 07:53 125阅读 0赞

以前没注意过，认为jquery 中的 $("\#") 与 document.getElementById("") 是一回事，指的是同一个东西。

这次项目开发在使用验证码生成的时候，发现两者不同，使用时需要注意！  
  
通过以下测试：  
js中代码

function reloadValidCode(o) \{

alert(o);

o.src = "$\{pageContext.request.contextPath \}/validCodeServlet?timed=" \+ new Date().getMilliseconds();

function refresh() \{

alert($("\#imageYZ"));

document.getElementById("imageYZ").src = "$\{pageContext.request.contextPath \}/validCodeServlet?timed=" + new Date().getMilliseconds();

jsp中代码

<img src="$\{pageContext.request.contextPath \}/validCodeServlet" id="imageYZ" alt="换一张" onclick="reloadValidCode(this)"/>

看不清?<a href="\#this" onclick="refresh();"> 换一张</a>

我很打算在refresh()函数中使用

$("\#imageYz").src = "$\{pageContext.request.contextPath \}/validCodeServlet?timed=" \+ new Date().getMilliseconds();   
进行设置，但是发现不行；原来alert(o)的结果是：

\[object HTMLCanvasElement\]

而 alert($("\#imageYZ"))的结果是：

\[objec Object\]  
从这里不难看出两者真的不一样；

再用firebug调试看一下，  
$("\#imageYZ")和document.getElementById("imageYZ")倒底是什么内容。调试结果如下：  
  
$("\#imageYZ")                         \[img\#imageYZ\]  
      
document.getElementById("imageYZ")    img\#imageYZ  
  
想必，看到这里，不用我说，大家也会想到结果了。  
  
实际上，$("\#imageYZ")\[0\]等同于 document.getElementById("imageYZ")

原文地址： [http://www.blogjava.net/tyjava/articles/372007.html][http_www.blogjava.net_tyjava_articles_372007.html]

[http_www.blogjava.net_tyjava_articles_372007.html]: http://www.blogjava.net/tyjava/articles/372007.html