关于jQuery中$ （’ ‘）和$（’ ‘）.get(0)的坑/为什么 $(’ ')后面要加get（0）（新手要看!）
傻傻分不清$ （’ ‘）和$（’ '）.get(0)
javascript一直用的原生敲的，最近出去实习，公司要求用jquery来写，这样兼容性更好点。然后我就踩到了坑，为什么有的地方用$ （’ ‘）就能进行节点操作有的地方只能用$（’ '）.get(0)才能获取节点并进行节点操作？
查看案例
首先我们用click点击事件为例，看个小例子了解一下：
<body>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$('#btn1').onclick=function () {
console.log("按钮一被点击到了！")
}
$('#btn2').click(function () {
console.log("按钮二被点击到了！")
})
</script>
</body>
</html>
现在我们对两个按钮依次进行点击，并查看控制台，发现只有按钮二的js执行了，这是为什么呢？
现在我们尝试对按钮一的js代码做修改
$('#btn1').get(0).onclick=function () {
console.log("按钮一被点击到了！")
}
然后我们再到浏览器看效果
这下两个按钮都被点击到了，写多了原生js的我充满了疑问，这是为啥？？？（当然菜是原罪）
我上网搜了一下，发现对这个的解释模棱两可，可能很多人直接学的jquery没有遇到这个问题吧。然后我研究了起来…
追根溯源
首先在控制台打印一下$ （’ ‘）和$（’ '）.get(0)各得到的是什么吧！！！
在这里看到第一个红框框返回的是jquery筛选出来的符合要求的对象数组，第二个返回的是我们想要的dom节点！
仔细研究不难想象，获取到$ （’ ‘）数组的第一个元素不就是===$（’ '）.get(0)吗？？？
然后我又百度了一下，找到了原因：
$（' '）.get(0) .onclick这里对元素的事件绑定是采用**js普通（原生）**的方式，所以要获取其数组中真正对象后，才能进行click事件。
说明白点就是，jquery本来就是封装好的js库，里面已经规定好了操作DOM方法，我们用jquery的方法来写才能实现。而$（’ '）.get(0) 后面其实是自己写的jquery错误了！那其实是半jquery半原生js的四不像写法！！！
回顾
再看一个例子体会一下
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0px;
}
.box2{
width: 100px;
height: 100px;
background-color:olivedrab;
position: absolute;
top: 100px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
先看一下初始效果
下面看下js部分对比
<script>
//正确的jquery的写法
//能运行
$('.box1').css('left','20px')
//四不像写法 前面jquery 后面原生写法
//能运行
$('.box2').get(0).style.left='40px';
//错误的jquery的写法
//不能运行
$('.box2').style.left='40px';
</script>
结束语
看完这个，是否你跟我一样对于为什么 $(’ ')后面要加get(0)多少有点明白了呢？
keleinclude_原创，如转载请标明来处！！！
2392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
