console 篇 - console 中的 '$'

2024-04-23 19:55:44

# 前言

$ 作为 jQuery 的选择器，承载了一代前端的太多记忆，但是你可能没有想到的是，在我们使用 Dev Tools 进行调试的时候，$ 也有大放异彩的一天呢？

# 1. `$0`

在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。

理所当然，$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4

你可以尝试一些相关操作(例如: $1.appendChild($0))

# 1. `$` 和 `$$`

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话，它在 console 中就是对这一大串函数 document.querySelector 的别名。

如果是 $$ 就更加厉害了，还能节省更多的时间，因为它不仅执行 document.QuerySelectorAll 并且它返回的是：一个节点的数组，而不是一个 Node list

本质上来说 Array.from(document.querySelectorAll('div')) === $$('div') ，但是document.querySelectorAll('div') 和 $$('div') 哪一种方式更加优雅呢？

# 2. `$_`

调试的过程中，你经常会通过打印查看一些变量的值，但如果你想看一下上次执行的结果呢？再输一遍表达式吗？

这时候 $_ 就派上了用场，$_ 是对上次执行的结果的引用：

# 3. `$i`

现在的前端开发过程，离不开各种 npm 插件，但你可能没有想过，有一天我们竟然可以在 Dev Tools 里面来使用 npm 插件！

有时你只是想玩玩新出的 npm 包，现在不用再大费周章去建一个项目测试了，只需要在 Chrome插件:Console Importer 的帮助之下，快速的在 console 中引入和测试一些 npm 库。

运行 $i('lodash') 或者 $i('moment') 几秒钟后，你就可以获取到 lodash / momentjs 了:

console 篇 - console 中的 '$'相关推荐

Chrome 调试技巧（二） console 篇
目录 1. console 中的 '$' 1.1 $0 1.2 $ 和 $$ 1.3 $_ 1.4 $i 2 console.log 的 "bug" 3. 异步的 conso ...
数据库应用程序开发基础篇—— .NET中SQL Server数据库的操作C#篇之一
数据库应用程序开发基础篇-- .NET中SQL Server数据库的操作C#篇之一写在前面:前面介绍了数据库系统的基本概念,SQl语句基本使用方法,接下来通过学习具体语言和具体数据库结合的应用开发来 ...
python3 console input_Python console.colorize方法代码示例
本文整理汇总了Python中pygments.console.colorize方法的典型用法代码示例.如果您正苦于以下问题:Python console.colorize方法的具体用法?Python ...
js 系统教程-15-js 语法之命令行-console.log,console.info,console.error,console.warn,debugger
目录目录 console 对象与控制台 console console 对象的静态方法格式占位符 console.warn(),console.error() console.table() co ...
console.log(console.log) = ?
在开始今天的内容之前,先想一下 console.log(console.log) 的结果是啥. 前面有一篇文章别担心把 console 带到线上介绍了关于 console 在线上不打印的操作,今天 ...
区块链研习 | 区块链里所说的“智能合约”是什么？本文作者：敖萌编辑：温晓桦 2017-10-11 20:31 导语：谈到区块链，必然离不开“智能合约”这个词。我们在本系列的第一篇文章中提到“智能
区块链研习 | 区块链里所说的"智能合约"是什么? 本文作者:敖萌编辑:温晓桦 2017-10-11 20:31 导语:谈到区块链,必然离不开"智能合约"这个 ...
Spring整合Struts2框架的第一种方式（Action由Struts2框架来创建）。在我的上一篇博文中介绍的通过web工厂的方式获取servcie的方法因为太麻烦，所以开发的时候不会使用。...
1. spring整合struts的基本操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10140588.html,这里面将spring与struts2 ...
.net ajax 怎么写,.NET学习篇--Ajax中Url的写法
.NET学习篇--Ajax中Url的写法什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的 ...
CCIE-LAB-SDN-第二篇-DNAC中完成VN配置
CCIE-LAB-SDN-第二篇-DNAC中完成VN配置实际中,思科只会给你5个小时去做下面的全部配置这个是CCIE-LAB的拓扑图题目第2.2节:在DNA中心完成VN配置使用DNA中心GU ...

最新文章

热门文章