已解決430363個問題，去搜搜看，總會有你想問的

querySelector和$()區別

首頁猿問 querySelector和$()區別

querySelector和$()區別

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有何區別？發現b[0]==a,為何？

查看完整描述

7 回答

桃花長相依

TA貢獻1860條經驗獲得超8個贊

document.querySelector 是瀏覽器級別的 API，根據參數選擇第一個滿足的 DOM 節點。

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

反對回復 2019-03-28

倚天杖

TA貢獻1828條經驗獲得超3個贊

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

反對回復 2019-03-28

揚帆大魚

TA貢獻1799條經驗獲得超9個贊

a是js對象， b是jquery對象

反對回復 2019-03-28

慕桂英3389331

TA貢獻2036條經驗獲得超8個贊

首先 $() 函數是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]; //未測試，原則上來說應該是相等的

反對回復 2019-03-28

7 回答
0 關注
2587 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

querySelector和$()區別

querySelector和$()區別

7 回答

添加回答