鍍金池/ 問(wèn)答/HTML/ querySelector和$()區(qū)別

querySelector和$()區(qū)別

頁(yè)面有如下元素

<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,為何？

回答
編輯回答
做不到
  1. a是(調(diào)用querySelector)返回的DOM原生element對(duì)象
  2. b是(調(diào)用jQ的$/jQuery，或者可以叫做jQuery構(gòu)造器)返回的jQ包裝對(duì)象，jQ包裝對(duì)象同時(shí)包含有原生DOM對(duì)象和一些jQ自己的東西
  3. b[0]==a是因?yàn)閖Q包裝對(duì)象在存儲(chǔ)時(shí)會(huì)把原生DOM對(duì)象存儲(chǔ)在key[0]的位置（這個(gè)你console一下就很清楚了）
2017年7月6日 10:33
編輯回答
安淺陌

三等也ok， $('#dom')[0]確實(shí)變成了完全的dom對(duì)象

2018年4月13日 20:46
編輯回答
練命

a是js對(duì)象， b是jquery對(duì)象

2017年3月16日 04:56
編輯回答
骨殘心

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

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

2017年4月29日 12:41
編輯回答
囍槑

建議樓主看下DOM對(duì)象和jQuery對(duì)象及如何轉(zhuǎn)換

2017年9月19日 18:43
編輯回答
心夠野

首先 $() 函數(shù)是JQuery類庫(kù)里的，querySelector() 是html5里自帶的。

$() 的行為是查找所有匹配的元素，并封裝成jQuery對(duì)象以方便使用。
querySelector() 的行為是查找匹配的第一個(gè)元素，返回的值為原生DOM對(duì)象。

而對(duì)jQuery對(duì)象使用方括號(hào)操作符會(huì)返回原生的DOM對(duì)象，所以 b[0] 返回的是匹配該選擇器的第一個(gè)原生DOM對(duì)象，所以會(huì)和 querySelector() 返回的值 a 相等。

然后html5里還有一個(gè) querySelectorAll() 方法，該方法返回的值為一個(gè)可迭代的 NodeList 對(duì)象。這個(gè)方法的行為可能和jQuery的 $() 更相似。

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

a[0] === b[0];  //未測(cè)試，原則上來(lái)說(shuō)應(yīng)該是相等的
2018年2月27日 18:24
編輯回答
枕邊人
  • document.querySelector() 瀏覽器提供，查詢出來(lái)為DOM對(duì)象
  • $()為jQuery提供的API，查詢出來(lái)為jQuery對(duì)象,jQuery對(duì)象[0]等于對(duì)應(yīng)的DOM對(duì)象
2018年5月29日 21:12