Chrome的控制台是支持用
来获取元素的,这点可能是很多人不知道的。本篇文章将会简单介绍怎样更好的来使用这种快捷方式来获取元素。
- $
我们知道
里面经常使用
- jQ
来进行元素选择,Chrome也提供
- $
来进行元素选择,而很多页面都会引入
- $
,但是由于这两种方式返回的结果是不一样的。所以我们要区分一下这个
- jQ
是由谁提供的,以便进行下一步操作。
- $
中输入
- console
,然后通过输出的信息来判断这个
- $
来自那里。一般做如下区分:
- $
如果这个
是由Chrome提供的,那么会有如下提示:
- $
- ƒ $(selector, [startNode]) { [Command Line API] }
而如果这个
是由
- $
提供的则返回如下信息
- 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提供的
与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提供的
是调用的
- $
,所以通过Chrome的
- querySelector
到的是原生的元素对象,这点是需要注意的。
- $
来源: http://www.cnblogs.com/aqiongbei/p/7577755.html