$("#test") 与 document.getElementById("test') 不一样！_document.getelementbyid("test").text-优快云博客

本文链接：https://blog.youkuaiyun.com/lx_zheng/article/details/51312984

$("#test") 与 document.getElementById("test') 是不是等价？？？？

原来一直以为$("#test") 与 document.getElementById("test') 是等价的。遇到了scrollTop 后发现，自己的想法，知识如此的局限，像井底之蛙。

先说scrollTop，这个属性，置匹配元素的滚动条的垂直位置。当scrollTop=0的时候，滚动条的最上部。

相应的还有scrollHeight，scrollLeft，scrollLeftMax，scrollTop，scrollTopMax，scrollWidth 等。

目的：本来想自动的跳到滚动条的最后，避免每次都移动滚动条。

问题：发现$("#test").scrollTop = $("#test").scrollHeight 不管用, document.getElementById("test').scrollTop = document.getElementById("test').scrollHeight 就好使，哎我这暴脾气，受不了，查证.....

解决：

代码测试部分：

<!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="content-type" content="text/html; charset=gb2312" />
<script src="jquery.js"></script>
</head>
<body>
<div id="box"></div>
<button οnclick="ck1()">点击窗口1</button>
<button οnclick="ck2()">点击窗口2</button>
<button οnclick="ck3()">点击窗口3</button>
<script type="text/javascript">
function ck1()
{
	var a=$("#box");
	console.log(a);
}
function ck2()
{
	var b=document.getElementById("box");
	console.log(b);
}
function ck3()
{
	var c=$("#box")[0];
	var d=$("#box")[1];
	console.log($("#box").length);
	console.log($("#box"));

	//alert(c);
	//alert(d);
}
</script>
</body>
</html>

打印信息：

console.log(a); -> [object object ]

console.log(b); -> [object HTMLDivElement]

console.log(c); -> [object HTMLDivElement]

console.log(d); -> undefined

对于$ 来说，是个对象，对象里面装的是具体的元素。所以，实际上，$ 与 doucument 包含的，

不知道理解的对不对。