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

首先 $() 函数是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];  //未测试，原则上来说应该是相等的