通过一行代码学习javascript

标签：

[].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

标签：

原文地址：http://www.cnblogs.com/newgold/p/4894025.html