Chrome控制檯選擇器簡介

Chrome的控制檯是支持用$來獲取元素的，這點多是不少人不知道的。本篇文章將會簡單介紹怎樣更好的來使用這種快捷方式來獲取元素。

判斷當前窗口的$是來自誰的

咱們知道jQ裏面常常使用$來進行元素選擇，Chrome也提供$來進行元素選擇，而不少頁面都會引入jQ，可是因爲這兩種方式返回的結果是不同的。因此咱們要區分一下這個$是由誰提供的，以便進行下一步操做。
作區分的方式很簡單，在console中輸入$，而後經過輸出的信息來判斷這個$來自那裏。通常作以下區分：

來自Chrome提供的$

若是這個$是由Chrome提供的，那麼會有以下提示：

ƒ $(selector, [startNode]) { [Command Line API] }

來自jQ的$

而若是這個$是由jQ提供的則返回以下信息

ƒ (e,t){return new s.fn.init(e,t,r)}

或者是

ƒ ( selector, context ) {

        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery…

Chrome提供的$的用法

上面咱們已經對Chrome提供的$與jQ提供的$作出了區分。jQ的$你們很熟悉，不用多說，咱們主要介紹Chrome提供的$的用法，以及與jQ提供的$的區別。
Chrome的$其實調用的是querySelector()。因此$的使用很簡單

$('#query'); // 獲取id爲query的一個元素
$('.nav'); // 獲取class包含nav的一個元素
$('div'); // 獲取tagName爲div的一個元素

除了可使用$,咱們還可使用$$`。`$$其實調用的是querySelectorAll()，因此經過$$咱們能夠獲取到一個NodeList

$('.nav'); // 獲取calss包含nav的全部元素
$('div'); // 獲取tagName爲div的全部元素

除了上面提到的，咱們可使用$x來經過xPath選擇元素。

$x('html/body/div') // 獲取html下的直接子元素body下的直接子元素div

此外，咱們須要注意的是:

經過jQ的$獲取到的是一個jQ對象。這點咱們能夠經過在支持的jQ的頁面中打開Console輸入下面的語句來確認。

$('a') instanceof document // true

而因爲Chrome提供的$是調用的querySelector，因此經過Chrome的$到的是原生的元素對象，這點是須要注意的。

---

本文發佈地址: segmentfault