一、JavaScript跨平台事件

  对于跨平台事件我们一般这么写(只例举添加事件):

functionaddEventHandler(oTarget, sEventType, fnHandler){if(oTarget.addEventListener){oTarget.addEventListener(sEventType,fnHandler,false);}else if(oTarget.attachEvent){oTarget.attachEvent("on"+sEventType,fnHandler);}else{oTarget["on"+sEventType]=fnHandler;}
}

  那么下面这段代码的效果是什么样的呢?

<divid="test">Test</div>...
var oDiv=document.getElementById("test");
addEventHandler(oDiv,"mouseover",function(){alert("over "+this.id);
});

  由于IE的this问题,在IE中果断地弹出了 over undefined,所以跨平台的事件更好的写法是这样的:

functionaddEventHandler(oTarget, sEventType, fnHandler){if(oTarget.addEventListener){oTarget.addEventListener(sEventType,fnHandler,false);}else if(oTarget.attachEvent){oTarget.attachEvent("on"+sEventType,function(){returnfnHandler.call(oTarget,window.event);});}else{oTarget["on"+sEventType]=fnHandler;}
}

二、合并两个Array并去掉重复项

Array.prototype.unique = function() {var a = this.concat();for(var i=0; i<a.length; ++i) {for(var j=i+1; j<a.length; ++j) {if(a[i] ===a[j])a.splice(j,1);}}returna;
};//Demo
var array1 = ["a","b"];var array2 = ["b", "c"];var array3 =array1.concat(array2).unique();//["a","b","c"]

三、typeof === "undefined" vs. != null

if(typeof neverDeclared == "undefined") //no errorsif(neverDeclared == null) //throws ReferenceError: neverDeclared is not defined

  so,typeof === "undefined" is better!

四、setTimeout(fn, 0)的意义

  浏览器同时要做很多事,这些事情以队列的方式存在,执行JavaScript只是其中之一,setTimeout(fn, 0)表面上看是立即执行的意思,但实际上只是在浏览器事件队列中添加了一个新的事件,由于队列是先进先出,所以fn会等等到当前队列中的事件执行完后再执行。由于JavaScript的定时器回调函数是异步执行的,所以产生的效果就是等页面上同步事件(包括页面渲染与同步JS代码)执行完之后再执行。

  一个简单的示例:

<scripttype="text/javascript">//one
document.getElementById("imgTest").style.borderBottom="5px solid #000";//two
setTimeout(function(){document.getElementById("imgTest").style.borderBottom="5px solid #000";},0);</script>
<imgsrc="http://jscode.chinacxy.com/img_lib/m_400_600_01.jpg"id="imgTest"alt=""/>

  one会报错,因为页面执行到这里时还没有img,但two却可以。

五、增强版取URL中的参数

functiongetQueryString() {var result = {}, queryString = location.search.substring(1),re= /([^&=]+)=([^&]*)/g, m;while (m =re.exec(queryString)) {result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);}returnresult;
}//demo
var myParam = getQueryString()["myParam"];

六、检查一个object是否是jQuery object

if(obj instanceof jQuery)

七、检查一个数是否为整数或浮点数

functionisInt(n) {return typeof n === 'number' && n % 1 == 0;
}//or ,this support ie3
functionisInt(n) {return typeof n === 'number' && parseFloat(n) == parseInt(n, 10) && !isNaN(n);
}functionisFloat (n) {return n===+n && n!==(n|0);
}

八、用JavaScript添加style节点

var css = 'h1 { background: red; }',head= document.getElementsByTagName('head')[0],style= document.createElement('style');style.type= 'text/css';if(style.styleSheet){style.styleSheet.cssText=css;
}else{style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

九、如何跳出双重循环

functionfoo ()
{dance:for(var k = 0; k < 4; k++){for(var m = 0; m < 4; m++){if(m == 2){breakdance;}}}
}

十、把一个Array追加到另一个Array上

var a=[1,2],b=[3,4,5];a.push.apply(a,b);/*a: [1, 2, 3, 4, 5]*/

十一、用jQuery把页面上的一个tag换成另一个tag

  如把页面上所有的code换为pre:

<code> A </code>
<code> B </code>
<code> C </code>//change to<pre> A </pre>
<pre> A </pre>
<pre> A </pre>

  jQuery代码:

$('code').contents().unwrap().wrap('<pre/>');//or
$('code').replaceWith(function(){return $("<pre />").append($(this).contents());
});

十二、取数组中的最小值和最大值

var arr = newArray();
arr[0] = 100;
arr[1] = 0;
arr[2] = 50;var min = Math.min.apply(null, arr),max= Math.max.apply(null, arr);

十三、取两个数组交集

/*finds the intersection of * two arrays in a simple fashion.  ** PARAMS*  a - first array, must already be sorted*  b - second array, must already be sorted** NOTES**  Should have O(n) operations, where n is *    n = MIN(a.length(), b.length())*/
functionarrayIntersection(a, b)
{var ai=0, bi=0;var result = newArray();while( ai < a.length && bi <b.length ){if      (a[ai] < b[bi] ){ ai++; }else if (a[ai] > b[bi] ){ bi++; }else /*they're equal*/{result.push(a[ai]);ai++;bi++;}}returnresult;
}console.log(arrayIntersection([1,2,3],[2,3,4,5,6]));//[2,3]

  注释中已经说明了,传入的数组要已经排过序的。

十四、统计一个字符串中某段子串出现的次数

var temp = "This is a string.";var count = temp.match(/is/g).length;

十五、方法返回多个值

//One
var mValues= function(){var a ="a";var b = "b";return[a, b];
};var values=mValues();var valOne= values[0];var valTwo = values[1];//Two
var mValues= function(){var a= "a";var b = "b";return{'a': a,'b': b};
};var values=mValues();var valOne=values.a;var valTwo = values.b;

十六、Array迭代器

functioncreateIterator(x) {var i = 0;return function(){return x[i++];};
}var iterator=createIterator(['a','b','c','d','e','f','g']);varcurrent;while(current=iterator())
{console.log(current);
}

  注意,如果数组中有0、false、""、null、NaN迭代器将会停止。

十七、根据日计算年龄

functiongetAge(dateString) {var today = newDate();var birthDate = newDate(dateString);var age = today.getFullYear() -birthDate.getFullYear();var m = today.getMonth() -birthDate.getMonth();if (m < 0 || (m === 0 && today.getDate() <birthDate.getDate())) {age--;}returnage;
}
console.log(getAge("2005,8,1"));//6

十八、判断当前页面是否被放入了iframe中

if(self==top){//not in iframe
}else{//in iframe
}

  这段代码可以用来防止网页被放入iframe中,不过如果别人定义了self和top变量覆盖了浏览器默认值可能会失效。

十九、把arguments转换为Array

var args = Array.prototype.slice.call(arguments, 0);

二十、日期格式化
  来源:javascript日期格式化函数,跟C#中的使用方法类似

Date.prototype.toString=function(format,loc){var time={};time.Year=this.getFullYear();time.TYear=(""+time.Year).substr(2);time.Month=this.getMonth()+1;time.TMonth=time.Month<10?"0"+time.Month:time.Month;time.Day=this.getDate();time.TDay=time.Day<10?"0"+time.Day:time.Day;time.Hour=this.getHours();time.THour=time.Hour<10?"0"+time.Hour:time.Hour;time.hour=time.Hour<13?time.Hour:time.Hour-12;time.Thour=time.hour<10?"0"+time.hour:time.hour;time.Minute=this.getMinutes();time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute;time.Second=this.getSeconds();time.TSecond=time.Second<10?"0"+time.Second:time.Second;time.Millisecond=this.getMilliseconds();time.Week=this.getDay();var MMMArrEn=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var MMMArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];var WeekArrEn=["Sun","Mon","Tue","Web","Thu","Fri","Sat"];var WeekArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var oNumber=time.Millisecond/1000;if(format!=undefined && format.replace(/\s/g,"").length>0){if(loc!=undefined && loc =="en"){MMMArr=MMMArrEn.slice(0);WeekArr=WeekArrEn.slice(0);}format=format.replace(/yyyy/ig,time.Year).replace(/yyy/ig,time.Year).replace(/yy/ig,time.TYear).replace(/y/ig,time.TYear).replace(/MMM/g,MMMArr[time.Month-1]).replace(/MM/g,time.TMonth).replace(/M/g,time.Month).replace(/dd/ig,time.TDay).replace(/d/ig,time.Day).replace(/HH/g,time.THour).replace(/H/g,time.Hour).replace(/hh/g,time.Thour).replace(/h/g,time.hour).replace(/mm/g,time.TMinute).replace(/m/g,time.Minute).replace(/ss/ig,time.TSecond).replace(/s/ig,time.Second).replace(/fff/ig,time.Millisecond).replace(/ff/ig,oNumber.toFixed(2)*100).replace(/f/ig,oNumber.toFixed(1)*10).replace(/EEE/g,WeekArr[time.Week]);}else{format=time.Year+"-"+time.Month+"-"+time.Day+" "+time.Hour+":"+time.Minute+":"+time.Second;}returnformat;
}var d=newDate();
console.log(d.toString());//2012-7-27 9:26:52
console.log(d.toString(""));    //2012-7-27 9:26:52
console.log(d.toString("yyyy-MM-dd HH:mm:ss"));    //2012-07-27 09:26:52
console.log(d.toString("yyyy年MM月dd日 HH:mm:ss"));    //2012年07月27日 09:26:52
console.log(d.toString("yyyy-MM-dd HH:mm:ss fff"));    //2012-07-27 09:26:52 237
console.log(d.toString("yyyy年 MMM dd EEE"));    //2012年 七月 27 星期五
console.log(d.toString("yyyy MMM dd EEE","en"));    //2012 Jul 27 Fri

二十一、JavaScript正则中test小用法

var str="a12b123c1234e12345";var reg=/a(\d{2})b(\d{3})c(\d{4})/;
reg.test(str);
console.log(RegExp.$1,RegExp.$2,RegExp.$3,RegExp.$4);//output:12 123 1234

二十二、JavaScript判断浏览器类型及主版本

functiongetBrowserInfo(){var Sys ={};var ua =navigator.userAgent.toLowerCase();if(window.ActiveXObject){Sys.b="ie";Sys.v=parseInt(ua.match(/msie ([\d.]+)/)[1]);}else if(document.getBoxObjectFor){Sys.b="firefox";Sys.v=parseInt(ua.match(/firefox\/([\d.]+)/)[1]);}else if (window.MessageEvent && !document.getBoxObjectFor){Sys.b="chrome";Sys.v== parseInt(ua.match(/chrome\/([\d.]+)/)[1]);}else if(window.opera){Sys.b="opera";Sys.v== parseInt(ua.match(/opera.([\d.]+)/)[1]);}else if(window.openDatabase){Sys.b="safari";Sys.v== parseInt(ua.match(/version\/([\d.]+)/)[1]);}returnSys;
}var bi=getBrowserInfo();
document.write("Browser:"+bi.b+"    Version:"+bi.v);//Browser:ie Version:10

转载于:https://www.cnblogs.com/jscode/archive/2012/07/27/2610613.html

这些年,我收集的JavaScript代码(二)相关推荐

  1. 收集 48 个 JavaScript 代码片段,仅需 30 秒就可理解(值得收藏)

    该项目来自于 Github 用户 Chalarangelo,目前已在 Github 上获得了 5000 多Star,精心收集了多达 48 个有用的 JavaScript 代码片段,该用户的代码可以让程 ...

  2. 如何对Javascript代码进行二次压缩(混淆)

    如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法) ...

  3. 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!

    点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 该项目来自于 Github 用户 Chalarangelo,目前已在 Github 上获得了 ...

  4. 精心收集的95个超实用的JavaScript代码片段(ES6 +编写)

    Array 数组 Array concatenation (数组拼接) 使用Array.concat(),通过在args中附加任何副本和/或值来拆分一个数组. JavaScript代码: const ...

  5. 提高你的javascript代码逼格系列之函数与数组

    不知道大家有没有一种感觉,那就是自己写的javascript代码虽然能完全解决工作上的需要,但是,一眼望去,too simple!!!简直就是一个傻子都能看懂的水平,于是,在工作之余,我开始去收集一些 ...

  6. 加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】

    作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...

  7. JavaScript高级 浏览器的渲染原理与JavaScript代码执行原理

    浏览器的渲染原理 1. 网页的解析过程 2. 浏览器内核 1. V8引擎 3. 浏览器渲染过程 1. HTML解析 2. 生成CSS规则 3. 构建Render Tree 4. 布局(layout) ...

  8. 解读Google Analytics(分析)客户端javascript代码

    /** * 代码翻译:周培公 * 电子邮件:peigong@foxmail.com * 腾讯微博:http://t.qq.com/lanxmail * 新浪微博:http://weibo.com/17 ...

  9. 史上最昂贵的 Javascript 代码(转)

    Opera 公司在大规模采购服务器的过程中,发现了史上最昂贵的 Javascript 代码.由于这行代码,此服务器供应商成功丢掉了百万订单. 缘起: 前一段时间,Opera 浏览器公司需要越来越多的服 ...

最新文章

  1. (C++)1046 Shortest Distance
  2. GPIO模拟I2C程序实现
  3. linux python pip卸载,Python pip的安装及卸载
  4. mongodb python 存文件_Python保存MongoDB上的文件到本地的方法介绍
  5. 计算机完成逻辑运算的原理,计算机组成原理2.5.1逻辑运算.ppt
  6. 桌面版docker操作_10分钟快速掌握Docker必备基础知识
  7. oracle-关于分组函数的小细节
  8. rm -f .... 恢复
  9. 【Stimulsoft Reports.WPF教程】在代码中使用报表变量
  10. 视频教程-js+ajax+jquery+easyui从入门到精通(项目实战)-JavaScript
  11. 世界上最早的手动计算机,世界上第一台电子计算机诞生于多少年,名字叫做什么...
  12. Computer:编程入门的简介相关的一些概念解释之详细攻略
  13. Android Sensor感应器简单使用(1)
  14. Linux T恤设计大赛 “飞企鹅”获奖
  15. IDEA中maven仓库依赖报错:Cannot resolve com.example:product-server:0.0.1-SNAPSHOT
  16. 多个PDF怎么一起打印?教你两种打印方法
  17. 2020北京邮电大学计算机学院803初试经验分享
  18. pytoch 安装为Gpu版本
  19. 学校更换门窗计算机桌椅,学校机房建设中需要注意的细节
  20. 今天面完了聚成网络的php研发,面经一枚,为自己攒人品。

热门文章

  1. 怎么查看服务器是多少位系统,查看服务器是多少位的
  2. docker php伪静态无效,docker 安装 thinkphp+nginx
  3. oracle dbms lob,如何使用DBMS_LOB从文件中加载CLOB数据
  4. python xml解析dom_如何解析python中表示xml.dom.minidom节点的字符串?
  5. python 断点重传_性能调优-python SDK 调优
  6. 006_logback体系结构
  7. 009_JavaScript语句、表达式和代码块
  8. Android面试题集合
  9. html 背景设为透明背景图片,Three.js中通过透明渲染设置默认背景图片
  10. 论坛高级签名_2020行走的酒窖首届中国(华北)定制白酒高峰论坛在天津盘山举行...