专栏首页Super 前端鲜为人知的前端知识

鲜为人知的前端知识

浏览器相关

下述采用的Chrome浏览器

浏览器地址栏运行JavaScript代码

javascript:alert('hello from address bar');

需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码

浏览器当编辑器

方式一:地址栏输入下述内容

data:text/html, <html contenteditable>

方式二:控制台输入下述内容

document.body.contentEditable=true

选取DOM元素

但当你在DOM中无法使用 jQuery 时,你依然可以在开发者控制台中做同样的事情。$$等价于jQuery选择器,返回一个数组$$(selector)等价于jQuery中的$(selector)

查找DOM中元素关联的事件

// 存在jQuery
getEventListeners($("selector"))
// 无jQuery
getEventListeners($$("selector"))

监听事件

在控制台进行相关事件监听

  • 监听指定DOM元素的全部事件:monitorEvents($("selector"))
  • 监听指定DOM元素的指定事件:monitorEvents($("selector"), "eventName")
  • 监听指定DOM元素的部分事件:monitorEvents($("selector"), ["eventName1","eventName2",…])
  • 取消监听指定DOM元素的事件:unmonitorEvents($("selector"))

检查DOM中的元素

inspect($("selector")) 会检查与选择器匹配的元素,并切换 Chrome 开发者工具到元素标签页。

列举元素的属性

dir($("selector"))

检索最近一个结果的值

你可以把控制台当做计算器,通过$_ 来获取上次结果。

2 + 2
$_         //4
$_ * $_ //16
$_     //16

清楚控制台和内存

clear() 刚存在内存中的$_结果也被清空了!

页面相关

页面拥有ID的元素会创建全局变量

<div id="sample"></div>
<script type="text/javascript">
    console.log(sample);
</script>

控制台输出:<div id="sample"></div>

利用script标签保存任意信息

<script type="text" id="template">
    <h1>This won't display</h1>
</script>
var text1 = document.getElementById('template').innerHTML;
var text2 = template.innerHTML; // 依赖上述特性

禁止别人以iframe方式加载你的页面

if (window.location != window.parent.location) window.parent.location = window.location;

JavaScript相关

利用toString生成随机字符串

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

补充:获取指定范围内的随机数

function generateRandomNum(max, min) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

整数的操作

var int1 = (10 / 3) | 0;
var int2 = ~~(10 / 3);
var int3 = parseInt(10 / 3);

补充:保留指定小数位

var num = 1.23456;
num.toFixed(3);     // 1.235

不声明第三个变量的值交换

方式一:赋值

var a = 1,
    b = 2;
a = [b, b = a][0];

方式二:异或

var a = 1,
    b = 2;
a = a ^ b;
b = a ^ b;
a = a ^ b;

方式三:加减

var a = 1,
    b = 2;
a = a + b;
b = a - b;
a = a - b;

方式四: ES6结构

[a, b] = [b, a]

字符串去除空格

String.prototype.trim = function(){
    return this.replace(/^\s+|\s+$/g, "");
};

数组操作

类数组转为数组

Array.prototype.slice.call(arguments);

获取数组中的最大、最小值

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

删除数组元素

var ary = [1, 2, 3];
delete ary[1];      // [1, undefined × 1, 3]
ary.splice(1, 1);   // [1, 3]

删除对象的属性使用delete,删除数组的元素使用splice

使用XMLHttpRequests时注意设置超时

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () {  
    if (this.readyState == 4) {  
        clearTimeout(timeout);  
        // do something with response data 
    }  
}  
var timeout = setTimeout( function () {  
    xhr.abort(); // call error callback  
}, 60*1000 /* timeout after a minute */ ); 
xhr.open('GET', url, true);  
xhr.send();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS数组&两值交换不使用第三变量

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 现代前端技术解析:现代前端交互框架

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Web浏览器中的JavaScript

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 《福布斯》评史上最差5款Android手机,你中了吗?

    近日,美国《福布斯》杂志评出了史上最差的五款Android手机,其中不乏“老爷机”,可能还有曾被你视若珍宝的机型呦!(欢迎您参与文末的投票选出你认为最差的手机,...

    昱良
  • 从零开始学 Web 之 JavaScript(二)变量

    基础数据类型: String,Number,Boolean,unsigned、null

    Daotin
  • js常用方法和一些封装(1)1.字符串相关2.数组相关

    剽悍一小兔
  • 教程 | 初学者如何学习机器学习中的L1和L2正则化

    选自Medium 作者:Prashant Gupta 机器之心编译 参与:陈韵竹、刘晓坤 训练机器学习模型的要点之一是避免过拟合。如果发生过拟合,模型的精确度会...

    机器之心
  • 绚丽的javascript拾色器(不兼容IE8及以下)

    一切尽在注释中 html节点 <div id="colorpicker" style="display:inline-block;"> <input clas...

    lonelydawn
  • 笔记——Window与WindowManager(十七)

    >1.Android中所有的视图都是通过Window来呈现的,不管是Activity、Dialog还是Toast,它们的视图都对应着附加在一个Window上的,...

    紫兮木溪
  • Ruby(3):基本语法中

    字符串分割成数组: 可以使用先scan再join的方法,当然其实有更好的 split方法,专门用来分割字符串 1 # 在Ruby中,如果不使用inspect...

    SecondWorld

扫码关注云+社区

领取腾讯云代金券