querySelector和$()区别

Question

页面有如下元素

<div class="list-box">
    <div class="buttonrideo">
        <input id="aBtn" type="checkbox" class="default-1"/>
    </div>
</div>

<div class="list-box">
    <div class="buttonrideo">
        <input id="bBtn" type="checkbox" class="default-1"/>
    </div>
</div>

jquery脚本里：

var a = document.querySelector("#aBtn");
var b = $("#aBtn");

a和b有何区别？发现b[0]==a,为何？

Answer 1

document.querySelector 是浏览器级别的 API，根据参数选择第一个满足的 DOM 节点。

jquery 脚本里面的 $ 必须在引入了 jquery 之后才能使用，也是 dom 的选择器，选择满足条件的 DOM 节点数组，现在 jquery 貌似结果是原生的 DOM 元素了，所以 $('#aBtn')[0] 就等同于 document.querySelector('#aBtn')

Answer 2

1. a是(调用querySelector)返回的DOM原生element对象
2. b是(调用jQ的$/jQuery，或者可以叫做jQuery构造器)返回的jQ包装对象，jQ包装对象同时包含有原生DOM对象和一些jQ自己的东西
3. b[0]==a是因为jQ包装对象在存储时会把原生DOM对象存储在key[0]的位置（这个你console一下就很清楚了）

Answer 3

a是js对象， b是jquery对象

Answer 4

三等也ok， $('#dom')[0]确实变成了完全的dom对象

Answer 5

建议楼主看下DOM对象和jQuery对象及如何转换

Answer 6

• document.querySelector() 浏览器提供，查询出来为DOM对象
• $()为jQuery提供的API，查询出来为jQuery对象,jQuery对象[0]等于对应的DOM对象

Answer 7

首先 $() 函数是JQuery类库里的，querySelector() 是html5里自带的。

$() 的行为是查找所有匹配的元素，并封装成jQuery对象以方便使用。
querySelector() 的行为是查找匹配的第一个元素，返回的值为原生DOM对象。

而对jQuery对象使用方括号操作符会返回原生的DOM对象，所以 b[0] 返回的是匹配该选择器的第一个原生DOM对象，所以会和 querySelector() 返回的值 a 相等。

然后html5里还有一个 querySelectorAll() 方法，该方法返回的值为一个可迭代的 NodeList 对象。这个方法的行为可能和jQuery的 $() 更相似。

let a = document.querySelectorAll('#aBtn');
let b = $('#aBtn');

a[0] === b[0];  //未测试，原则上来说应该是相等的