06 2012 档案

赋值取值+arguments
摘要：等项目上线，写点简单的东西练练手 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Cont 阅读全文
posted @ 2012-06-29 15:17 小猩猩君 阅读(421) 评论(0) 推荐(0)
使用定时器处理数组
摘要：简单的例子:1 for (var i = 0, len = item.length; i < len; i++) {2 process(item[i]);3 }优化条件：1、处理过程是否必须同步？2、数据是否必须按顺序处理？都是否，就看下面的代码： 1 function processArray(items, process, callback) { 2 var todo = items.concat(); 3 4 setTimeout(function() { 5 process(todo.shift()); 6 7 if (todo.length > 0) { 8 setTim 阅读全文
posted @ 2012-06-28 13:45 小猩猩君 阅读(848) 评论(0) 推荐(0)
appendChild和insertBefore的区别
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" co 阅读全文
posted @ 2012-06-27 15:09 小猩猩君 阅读(667) 评论(0) 推荐(0)
图片滚动
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; ch 阅读全文
posted @ 2012-06-27 10:51 小猩猩君 阅读(149) 评论(0) 推荐(0)
正则表达式 删除string首尾的空白
摘要：1 if (!String.prototype.trim) {2 String.prototype.trim = function() {3 return this.replace(/^\s+/, "").replace(/\s+$/, "");4 };5 }67 var str = " \t\n test string ".trim();8 console.log(str == "test string");//true混合解决方案：用正则表达式方法过滤头部空白，用非正则表达式的方法过滤尾部字符。 1 Strin 阅读全文
posted @ 2012-06-26 13:52 小猩猩君 阅读(2111) 评论(0) 推荐(0)
数组合并法（IE7性能优化）
摘要：1 var str = "I'm a thirty-five character string.", 2 strs = [], 3 newStr, 4 appends = 5000; 5 6 while (appends--) { 7 strs[strs.length] = str; 8 } 9 10 newStr = strs.join("");以上代码为了让IE7或者更低版本的浏览器性能更优。其他浏览器使用以下代码：1 var str = "I'm a thirty-five character string.", 阅读全文
posted @ 2012-06-25 21:09 小猩猩君 阅读(309) 评论(0) 推荐(0)
迭代合并排序算法
摘要：1 function merge(left, right) { 2 var result = []; 3 4 while (left.length > 0 && right.length > 0) { 5 if (left[0] < right[0]) { 6 result.push(left.shift()); 7 } else { 8 result.push(right.shift()); 9 }10 }11 return result.concat(left... 阅读全文
posted @ 2012-06-24 19:22 小猩猩君 阅读(549) 评论(0) 推荐(0)
JavaScript二分法
摘要：1 if (value < 6) { 2 if (value < 3) { 3 if (value == 0) { 4 return result0; 5 } else if (value == 1) { 6 return result1; 7 } else { 8 return result2; 9 }10 } else {11 if (value == 3) {12 return result3;1... 阅读全文
posted @ 2012-06-24 17:18 小猩猩君 阅读(339) 评论(0) 推荐(0)
事件委托
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-23 21:17 小猩猩君 阅读(197) 评论(0) 推荐(0)
最小化重绘和重排
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-23 20:02 小猩猩君 阅读(299) 评论(0) 推荐(0)
选择器API
摘要：1 //DOM原生 选择器API，IE8、FF3.5、safari3.1、chrome1、opera10支持 2 var errs = document.querySelectorAll('div.warning,div.notice'); 3 4 //使用getElementsByTagName() 5 var errs = [], 6 divs = document.getElementsByTagName('div'), 7 classname = ''; 8 for (var i = 0, len = divs.length; i < 阅读全文
posted @ 2012-06-23 10:40 小猩猩君 阅读(267) 评论(0) 推荐(0)
集合转数组函数
摘要：1 function toArray(coll) { 2 for (var i = 0, a = [], len = coll.length; i < len; i++) { 3 a[i] = coll[i]; 4 } 5 return a; 6 } 7 8 //用法 9 var coll = document.getElementsByTagName('div');10 var arr = toArray(coll); 阅读全文
posted @ 2012-06-22 15:26 小猩猩君 阅读(168) 评论(0) 推荐(0)
innerHTML对比DOM方法
摘要：innerHTML： 1 function tableInnerHTML() { 2 var i, h = ['<table border="1" width="100%">']; 3 h.push('<thead>'); 4 h.push('<tr><th>id<\/th><th>yes?<\/th><th>name<\/th><th>url<\/th><th>actio 阅读全文
posted @ 2012-06-20 15:12 小猩猩君 阅读(1449) 评论(0) 推荐(0)
嵌套越深搜索速度越慢
摘要：举例：location.href > window.location.href > window.location.href.toString()对象成员嵌套得越深，访问速度就会越慢。 阅读全文
posted @ 2012-06-20 13:23 小猩猩君 阅读(257) 评论(0) 推荐(0)
动态加载脚本
摘要：1 function loadScript(url, callback) { 2 var script = document.createElement("script"); 3 script.type = "text/javascript"; 4 5 if (script.readyState) { //IE 6 script.onreadystatechange = function() { 7 if (script.readyState == "loaded" || script.readyState == "comp 阅读全文
posted @ 2012-06-19 16:17 小猩猩君 阅读(197) 评论(0) 推荐(0)
使用jQuery来预加载图像
摘要：1 jQuery.preloadImages = function() {2 for(var i = 0; i < arguments.length; i++) {3 $("<img />").attr('src', arguments[i]);4 }5 };6 //用法7 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 阅读全文
posted @ 2012-06-19 12:50 小猩猩君 阅读(136) 评论(0) 推荐(0)
把arguments转化成数组
摘要：1 (function(){2 console.log(arguments instanceof Array); // false 3 var argsArray = Array.prototype.slice.call(arguments);4 console.log(argsArray instanceof Array); // true 5 }());getElementsByTagName返回的NodeList也可以转化成数组1 Array.prototype.slice.call(nodes) 阅读全文
posted @ 2012-06-19 11:10 小猩猩君 阅读(5781) 评论(1) 推荐(0)
文档碎片(fragment)
摘要：原始代码：1 var list = document.getElementById("myList");2 for (var i = 0; i < 10; i++) {3 var item = document.createElement("li");4 list.appendChild(item);5 item.appendChild(document.createTextNode("Item" + i));6 }使用文档碎片(fragment)后的代码1 var list = document.getElementById( 阅读全文
posted @ 2012-06-18 16:51 小猩猩君 阅读(313) 评论(0) 推荐(0)
Duff装置
摘要：1 //credit: Speed Up Your Site (New Riders, 2003) 2 var iterations = Math.floor(value.length / 8); 3 var leftover = value.length % 8; 4 var i = 0; 5 6 if (leftover > 0) { 7 do { 8 process(values[i++]); 9 } while (--leftover > 0);10 }11 do {12 process(value[i++]);13 process(... 阅读全文
posted @ 2012-06-18 16:33 小猩猩君 阅读(356) 评论(0) 推荐(0)
解耦应用逻辑/事件处理程序
摘要：原生函数1 function handleKeyPress(event) {2 if (event.KeyCode == 13) {3 var target = EventUtil.getTarget(event);4 var value = 5 * parseInt(target.value);5 if (value > 10) {6 document.getElementById("error-msg").style.display = "block";7 }8 }9 }解耦后的函数 1... 阅读全文
posted @ 2012-06-17 22:29 小猩猩君 阅读(245) 评论(0) 推荐(0)
cookie操作
摘要：1 var CookieUtil = { 2 get: function(name) { 3 var cookieName = encodeURIComponent(name) + "=", 4 cookieStart = document.cookie.indexOf(cookieName), 5 cookieValue = null; 6 7 if (cookieStart > -1) { 8 var cookieEnd = document.cookie.indexOf("... 阅读全文
posted @ 2012-06-17 19:22 小猩猩君 阅读(187) 评论(0) 推荐(0)
dragdrop + 自定义事件
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-15 16:10 小猩猩君 阅读(1139) 评论(0) 推荐(0)
自定义事件
摘要：1 //自定义事件 2 function EventTarget() { 3 this.handlers = {}; 4 } 5 EventTarget.prototype = { 6 constructor: EventTarget, 7 //注册 8 addHandler: function(type, handler) { 9 if (typeof this.handlers[type] == "undefined") {10 this.handlers[type] = [];11 ... 阅读全文
posted @ 2012-06-13 15:03 小猩猩君 阅读(179) 评论(0) 推荐(0)
Yielding Processes(数组分块)
摘要：1 function chunk(array, process, context) { 2 setTimeout(function() { 3 var item = array.shift(); 4 process.call(context, item); 5 6 if (array.length > 0) { 7 setTimeout(arguments.callee, 100); 8 } 9 }, 100);10 }11 12 var data = [12, 123, 1234, 4... 阅读全文
posted @ 2012-06-12 11:26 小猩猩君 阅读(405) 评论(0) 推荐(0)
加入函数绑定的函数柯里化
摘要：1 function curry(fn, context) { 2 var args = Array.prototype.slice.call(arguments, 2); 3 return function() { 4 var innerArgs = Array.prototype.slice.call(arguments); 5 var finalArgs = args.concat(innerArgs); 6 return fn.apply(context, finalArgs); 7 }; 8 } 9 funct... 阅读全文
posted @ 2012-06-10 20:07 小猩猩君 阅读(228) 评论(0) 推荐(0)
简单的函数柯里化
摘要：1 function curry(fn) { 2 var args = Array.prototype.slice.call(arguments, 1); 3 return function() { 4 var innerArgs = Array.prototype.slice.call(arguments); 5 var finalArgs = args.concat(innerArgs); 6 return fn.apply(null, finalArgs); 7 }; 8 } 9 10 //使用方法11 funct... 阅读全文
posted @ 2012-06-10 18:00 小猩猩君 阅读(317) 评论(0) 推荐(0)
函数绑定(bind)
摘要：1 function bind(fn, context) { 2 return function() { 3 return fn.apply(context, arguments); 4 }; 5 } 6 7 //使用方法 8 var handler = { 9 message: "Event handler",10 handleClick: function() {11 console.log(this.message + ":" + event.type);12 }13 };14 var btn = documen... 阅读全文
posted @ 2012-06-10 14:42 小猩猩君 阅读(377) 评论(0) 推荐(0)
在窃取函数中用作用域安全的构造函数
摘要：1 function Polygon(sides) { 2 if (this instanceof Polygon) { 3 this.sides = sides; 4 this.getArea = function() { 5 return 0; 6 }; 7 } else { 8 return new Polygon(sides); 9 }10 }11 12 function Rectangle(width, height) {13 Polygon.call(this,... 阅读全文
posted @ 2012-06-08 16:20 小猩猩君 阅读(207) 评论(0) 推荐(0)
作用域安全的构造函数
摘要：1 function Person(name, age, job) { 2 if (this instanceof Person) { 3 this.name = name; 4 this.age = age; 5 this.job = job; 6 } else { 7 return new Person(name, age, job); 8 } 9 }10 11 var person1 = Person("Nicholas", 29, "Software Engineer");12 console.l... 阅读全文
posted @ 2012-06-08 15:59 小猩猩君 阅读(151) 评论(0) 推荐(0)
stringify()用法
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-08 11:19 小猩猩君 阅读(830) 评论(0) 推荐(0)
parse()用法
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-07 14:48 小猩猩君 阅读(427) 评论(0) 推荐(0)
简单的Ajax请求
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-06 10:05 小猩猩君 阅读(137) 评论(0) 推荐(0)
XHR对象
摘要：1 function createXHR(){ 2 if(typeof XMLHttpRequest != "undefined"){ 3 createXHR = function(){ 4 return new XMLHttpRequest(); 5 }; 6 }else if(typeof ActiveXObject != "undefined"){ 7 createXHR = function(){ 8 if(typeof arguments.callee.active... 阅读全文
posted @ 2012-06-05 20:29 小猩猩君 阅读(511) 评论(0) 推荐(0)
表单序列化
摘要：1 /* 2 *对表单字段的名称和值进行URL编码，使用和号(&)分割。 3 *不发送禁用的表单字段。 4 *只发送勾选的复选框和单选按钮。 5 *不发送type为"reset"和"button"的按钮。 6 *多选选择框中的每个选中的值单独一个条目。 7 *在单击提交表单的情况下，也会发送提交按钮;否则，不发送提交按钮。也包括type为"image"的<input>元素。 8 *<select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元 阅读全文
posted @ 2012-06-04 20:34 小猩猩君 阅读(427) 评论(0) 推荐(0)
select移动选项
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-04 20:01 小猩猩君 阅读(206) 评论(0) 推荐(0)
添加option选项
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-04 17:21 小猩猩君 阅读(244) 评论(0) 推荐(0)
select单选
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-04 16:43 小猩猩君 阅读(179) 评论(0) 推荐(0)
自动切换焦点
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-04 15:34 小猩猩君 阅读(160) 评论(0) 推荐(0)
paste事件，只能paste数字
摘要：1 //getClipboardText2 EventUtil.addHandler(textbox, "paste", function(event) {3 event = EventUtil.getEvent(event);4 var text = EventUtil.getClipboardText(event);5 6 if (!/^\d*$/.test(text)) {7 EventUtil.preventDefault(event);8 }9 }); 阅读全文
posted @ 2012-06-04 11:42 小猩猩君 阅读(340) 评论(0) 推荐(0)
keypress事件
摘要：1 var textbox = document.forms[0].elements["textbox1"]; 2 3 //文本框忽略所有输入的非数值 4 EventUtil.addHandler(textbox, "keypress", function(event) { 5 event = EventUtil.getEvent(event); 6 var target = EventUtil.getTarget(event); 7 var charCode = EventUtil.getCharCode(event); 8 9 if (!/\d/.t 阅读全文
posted @ 2012-06-03 23:10 小猩猩君 阅读(233) 评论(0) 推荐(0)
选择文本 兼容所有浏览器
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-03 17:01 小猩猩君 阅读(221) 评论(0) 推荐(0)
input输入框(blur,change,focus)
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-03 15:44 小猩猩君 阅读(4042) 评论(0) 推荐(0)
简单的form操作
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-03 12:45 小猩猩君 阅读(187) 评论(0) 推荐(0)
click点击以后添加新class，删除其余同名class
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;ch 阅读全文
posted @ 2012-06-01 15:07 小猩猩君 阅读(1336) 评论(0) 推荐(0)
模拟鼠标事件
摘要：DOM 1 var btn = document.getElementById("myBtn"); 2 3 //创建事件对象 4 var event = document.createEvent("MouseEvents"); 5 6 //初始化事件对象 7 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 8 9 //触发事件10 btn.dispat 阅读全文
posted @ 2012-06-01 10:53 小猩猩君 阅读(175) 评论(0) 推荐(0)