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