[].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. mvc 数据验证金钱格式decimal格式验证

    mvc 数据验证金钱格式decimal格式验证 首先看下代码 /// <summary> /// 产品单价 /// </summary> [Display(Name = &qu ...

  2. java读取记事本文件的部分数据添加到mysql

    package com.tideway.readtxt; import java.io.BufferedReader; import java.io.FileInputStream; import j ...

  3. C#窗体WinForm 文件操作

    文件及文件夹操作 C/S:WinForm可以操作客户端文件 Client ServerB/S:浏览器服务 Brower Server 命名空间:using system .IO; 1. File类:文 ...

  4. zTree插件之单选下拉菜单代码

    <!--ztree树结构--> <link rel="stylesheet" type="text/css" href="asset ...

  5. jQuery 操作html元素

    1. 添加元素 动态添加html 元素是一个非常重要的功能. jQuery可以非常方便的做这样的事情: $h1 = $('<h1>Hello</h1>') $(".i ...

  6. 【笔记】jquery append,appendTo,prepend,prependTo 介绍

    在jquery权威指南里面学习到这一章,很有必要介绍一下里面的内容: 首先是append(content)这个函数: 意思是将内容content加入到所选择的对象内容的后面 例如:$("di ...

  7. samba的rpm包,只有tar.gz文件安装

    tar.gz包是源代码的包,不能直接运行,需要安装tar xvf samba-3.5.1.tar.gz cd samba-3.5.1 &&cd source3 &&./ ...

  8. Asp.net 之Application

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  9. Java堆和栈详解

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  10. 基于cmake编译安装MySQL-5.5

    cmake的重要特性之一是其独立于源码(out-of-source)的编译功能,即编译工作可以在另一个指定的目录中而非源码目录中进行,这可以保证源码目录不受任何一次编译的影响,因此在同一个源码树上可以 ...