首頁猿問 querySelector和$()區(qū)別

querySelector和$()區(qū)別

JavaScript

梵蒂岡之花 2019-03-20 17:09:23

頁面有如下元素<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有何區(qū)別？發(fā)現(xiàn)b[0]==a,為何？

查看完整描述

7 回答

桃花長相依

TA貢獻1860條經(jīng)驗獲得超8個贊

document.querySelector 是瀏覽器級別的 API，根據(jù)參數(shù)選擇第一個滿足的 DOM 節(jié)點。

jquery 腳本里面的 $ 必須在引入了 jquery 之后才能使用，也是 dom 的選擇器，選擇滿足條件的 DOM 節(jié)點數(shù)組，現(xiàn)在 jquery 貌似結(jié)果是原生的 DOM 元素了，所以 $('#aBtn')[0] 就等同于 document.querySelector('#aBtn')

反對回復(fù) 2019-03-28

倚天杖

TA貢獻1828條經(jīng)驗獲得超3個贊

a是(調(diào)用querySelector)返回的DOM原生element對象
b是(調(diào)用jQ的$/jQuery，或者可以叫做jQuery構(gòu)造器)返回的jQ包裝對象，jQ包裝對象同時包含有原生DOM對象和一些jQ自己的東西
b[0]==a是因為jQ包裝對象在存儲時會把原生DOM對象存儲在key[0]的位置（這個你console一下就很清楚了）

反對回復(fù) 2019-03-28