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 元素了，所以&nbsp;$('#aBtn')[0]&nbsp;就等同于&nbsp;document.querySelector('#aBtn')

Answer 2

a是(调用querySelector)返回的DOM原生element对象b是(调用jQ的$/jQuery，或者可以叫做jQuery构造器)返回的jQ包装对象，jQ包装对象同时包含有原生DOM对象和一些jQ自己的东西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];&nbsp; //未测试，原则上来说应该是相等的