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的$到的是原生的元素对象,这点是需要注意的。

Chrome控制台选择器简介的更多相关文章

  1. Chrome 控制台不完全指南

    Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「 ...

  2. Chrome 控制台实用指南

    前言 个人博客:Damonare的个人主页 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大 ...

  3. 转发:Chrome 控制台console的用法

    大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对co ...

  4. Chrome 控制台console的用法(转)

    下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir" ...

  5. 【转】Chrome 控制台不完全指南

    原文出处: 刘哇勇的博客(@刘哇勇)   欢迎分享原创到伯乐头条 Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快 ...

  6. Chrome 控制台使用大全

    Chrome的开发者工具已经强大到没朋友的地步了,特别是功能丰富界面友好的console 一.console.log 将输出到控制台的信息进行分类会更好: console.log();    普通信息 ...

  7. Chrome 控制台指南

    转自:http://blog.jobbole.com/76985/ Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更 ...

  8. Chrome 控制台console的用法

    下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir" ...

  9. Chrome控制台 JS调试的一些小技巧

    $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择过的DOM节点.在页面右击选择审查元素,然 ...

随机推荐

  1. HBRUSH to RGB value

    GetObject函数返回一个LOGBRUSH结构体,包含了COLORREF结构. LOGBRUSH lgbrush; COLORREF color; GetObject((HBRUSH)GetSto ...

  2. “最美天气”版本II

    抓取实时天气前需要首先获得所有地区的cityCode,因为在最后queryWeather的时候需要传递这个参数. 最美天气获取全部cityCode及cityName的方法: 1.获取34个省及直辖市的 ...

  3. Linux常用命令简单总结

    Liunx常用命令 1. 文件及目录管理 1.1. ls:显示目录 参数及说明 空:补显示隐含文件 -a:显示所有文件 -l:显示详细列表 1.2. chgrp:设置文件组(root权限) 用法示例 ...

  4. 支付宝小程序PHP全栈开发--前端样式的设计.acss样式详解

    关于.acss文件 在视频中已经说过了,小程序的设计思想和原生app的设计思想颇为相似,基本的应用单元为页面.当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由样式来决定的.我们 ...

  5. informatica9 安装下载,安装教程 介质(文章和视频教程)(csdn讲师:Array)

    Informatica学习:  参考文献:视频参考地址:http://edu.csdn.net/course/detail/5034,ETL之informatica9通关班(第二期) 1.安装介质的获 ...

  6. 工具类:将其他编码类型转换成UTF-8或者其他类型的工具类

    将其他编码类型转换成UTF-8或者其他类型的工具类 public static String changeUTF(String str) { String newStr = null; try { n ...

  7. CAS 单点登陆

    一.Tomcat配置SSL 1. 生成 server key 以命令方式换到目录%TOMCAT_HOME%,在command命令行输入如下命令: keytool -genkey -alias tomc ...

  8. LINUX下C语言编程调用函数、链接头文件以及库文件

    LINUX下C语言编程经常需要链接其他函数,而其他函数一般都放在另外.c文件中,或者打包放在一个库文件里面,我需要在main函数中调用这些函数,主要有如下几种方法: 1.当需要调用函数的个数比较少时, ...

  9. poj3463 最短路和比最短路长1的路径数

    这题需要很好的理解Dij. 在Dij的基础上,每个点多一个次短路的长度和数量进行控制. 那么在队列中,最短路控制时出现n次,次短路控制出现n次.注意松弛条件中val值和最短路.次短路的关系. 这题需要 ...

  10. 别只用hive写sql -- hive的更多技能

    hive是Apache的一个顶级项目,由facebook团队开发,基于java开发出面向分析师或BI等人员的数据工具(常用作出具仓库),它将文件系统映射为表,使用SQL实现mapreduce任务完成分 ...