[].forEach.call($$("*"), function (a){
a.style.outline = "1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

在控制台运行这段代码,可以给页面中所有元素加上1px、颜色随机的边框。下面来分析这段代码:

$$只能在控制台中使用,作用跟document.querySelectorAll一样,所以在控制台以外的地方想选中页面中所有元素,可以用document.querySelectorAll("*")代替$$("*")。当然选中页面中所有元素的方法有很多,比如document.all,一样可以代替$$("*")。

存储有所有元素的NodeList看起来像Array,可以用中括号去访问节点,拥有length属性。但它并没有Array的所有接口。是不是想起了函数里的Arguments变量。所以需要用call或apply调用Array的函数,并将第一个参数作为函数里面的this对象。

单行代码中用[]代替了Array.prototype,节省了一些字节。这相当于在$$("*").forEach中,把$$("*")当成Array来使用。

outline是CSS属性用于在元素外围增加轮廓,显示的边框在CSS区块模型外(不会占据空间,也不会对元素本身的布局和位置产生任何影响),语法和border一样。

toString(16)可转换成16进制,Math.random()可生成0~1随机数。

1<<24是位运算符,意思是将1转换成二进制数字再往左移24位,等同于十进制的2^24,这样随机数范围即为0~16777215.而parseInt("ffffff",16)=16777215正好是2^24.

~表示按位取反,位运算的操作值要求是整数,所以经过位运算的都会变成整数。这里~~取反两次,表示去掉小数部分。除了~~n,还可以使用n<<0,n>>0,n|0,这种取整方式无论正负都不会改变整数部分。

通过一行代码学习javascript的更多相关文章

  1. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  2. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  3. 从一行代码里面学点JavaScript

    从一行代码里面学点JavaScript 现如今,JavaScript无处不在,因此关于JavaScript的新知识也是层出不穷.JavaScript的特点在于,要学习它的语法入门简简单,但是要精通使用 ...

  4. [转]从一行代码里面学点JavaScript

    现如今,JavaScript无处不在,因此关于JavaScript的新知识也是层出不穷.JavaScript的特点在于,要学习它的语法入门简简单,但是要精通使用它的方式却是一件不容易的事. 来看看下面 ...

  5. 前端读者 | 从一行代码里面学点JavaScript

    本文来自 @张小俊128:链接:http://www.html-js.com/article/A-day-to-learn-from-a-line-of-code-inside-the-JavaScr ...

  6. 33个非常实用的JavaScript一行代码

    33个非常实用的JavaScript一行代码 一.日期处理 1. 检察日期是否有效 该方法用于检测给出的日期是否有效: const isDateValid = (...val) => !Numb ...

  7. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...

  8. 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

    上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...

  9. 更快学习 JavaScript 的 6 个思维技巧

    更快学习 JavaScript 的 6 个思维技巧 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候 ...

随机推荐

  1. 12月07日《奥威Power-BI智能分析报告制作方法 》腾讯课堂开课啦

            前几天跟我一个做报表的哥们聊天,听着他一茬一茬地诉苦:“每天做报表做到想吐,老板看报表时还是不给一个好脸色.”我也只能搬出那一套“过程大于结果”的内心疗程赠与他,没想到他反而怒了:“做 ...

  2. vue.js入门(3)——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  3. 一个安邦逻辑漏洞爆破密码的py脚本

    漏洞地址: 安邦保险集团存在逻辑漏洞可遍历用户ID暴力破解用户原始密码进而重置用户密码(附脚本) http://www.wooyun.org/bugs/wooyun-2010-0119851 脚本PO ...

  4. 关于qt的集成开发环境

    事情是这样的,在archlinux中安装好qt5之后,只发现了一个 qt designer,这个只能用来写界面.其它的几个程序(qt assistant)算是查文档的这类辅助的程序. 记得在windo ...

  5. 智能家居常用WiFi模块

    WiFi模块 WiFi模块就是整个系统的控制中心,控制很简单,就是输出一个开关信号控制继电器,而这个模块的核心是WiFi的连接,手机连接WiFi时需要扫描,输入密码,而这类本身没有屏幕和键盘的硬件设备 ...

  6. URL编码与解码

    在项目中碰到了ajax传来的参数,后台接收值乱码(如下图)的问题 在此记录一下 前台: 后台: 解决问题 为什么需要编码 怎样编码 实际出现的问题解决方法 1.为什么需要编码? URL 只能使用 AS ...

  7. Linux C Programing - Arguments(2)

    #include <iostream> #include <stdlib.h> #include <stdio.h> //printf #include <u ...

  8. python : HTML+CSS (左侧菜单)

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  9. 一、Docker之旅

    刚刚接触到docker的同事可能会一头雾水,docker到底是一个什么东西,先看看官方的定义. Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔 ...

  10. [转]http://m635674608.iteye.com/blog/1750833

    转载地址:http://m635674608.iteye.com/blog/1750833 在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个 ...