JavaScript 小技巧

  1. 若当前环境支持DOM2.0,可以用如下代码获取StyleSheet文件

var supportDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");
    if(supportDOM2StyleSheets){
        var sheet = null;
	for(var i=0; i<document.styleSheets.length; i++){
	    sheet = document.styleSheets[i];
	    console.log(sheet.href);
	}
}


    2. 表单提交时如何不提交指定元素: 使用元素的 disabled 属性(此方法同时在表单验证中有效)

//HTML结构
<body>
    <form method="post" action="submit">
        <input type="text" id="input1" name="input1" value="123" />
        <input type="text" id="input2" name="input2" value="234"/>
    </form>
</body>

//对比组: 提交所有的数据
console.log($("form").serialize());//input1=123&input2=234

//使用disabled属性禁用元素
$("#input1").attr("disabled", "disabled");
console.log($("form").serialize());//input2=234


    3. 富文本编辑器实现的基本原理

//1. 创建一个 iframe 选区
<body >
    <iframe name="richedit" style="height: 100px; width: 100px;" src="blank.html"></iframe>
</body>
//2. 设置 iframe 的 designMode = "on"
frames["richedit"].document.designMode = "on";


4. HTML5 可以使用 PostMessage() 方法进行跨文档消息传递


5. 定义一个防篡改对象: 使用freeze()

var obj = {
    name : 'name'
}
Object.freeze(obj);
obj.name = "halo";
console.log(obj.name);//name


6. HTML5 拥有自己的数据库 IndexedDB 


7. 函数节流. 当窗口大小发生改变时,事件会被执行很多次,但是我们只需要调用一次函数。 如果是目的是为了减少函数调用的次数,那么我们就可以使用函数节流的写法。

//定义一个节流函数
function lessCost(fn, delay){
    var mytimer;
    return function(){
        var context = this;
        var arg = arguments;
        clearTimeout(mytimer);
        mytimer = setTimeout(function(){
            fn.apply(context, arg);
        }, delay);
    }
}

//获取节流函数的引用
var lessCostRef = lessCost(function(){ console.log("resized"); }, 500);	

//事件发生时执行该函数
$(window).on("resize", function(){
    lessCostRef();
});//500ms内,函数只被执行了一次


转载于:https://my.oschina.net/u/2308424/blog/636815

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值