05 2012 档案

事件委托技术
摘要：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-05-31 21:13 小猩猩君 阅读(198) 评论(0) 推荐(0)
鼠标滚轮事件（mousewheel、DOMMouseScroll）
摘要：1 (function() { 2 function handleMouseWheel(event) { 3 event = EventUtil.getEvent(event); 4 var delta = EventUtil.getWheelDelta(event); 5 console.log(delta); 6 } 7 8 EventUtil.addHandler(document, "mousewheel", handleMouseWheel); 9 EventUtil.addHandler(docum... 阅读全文
posted @ 2012-05-31 16:57 小猩猩君 阅读(1138) 评论(0) 推荐(0)
强制数组并且匹配Array
摘要：1 var a = [];2 alert(a.constructor == Array); 阅读全文
posted @ 2012-05-31 16:31 小猩猩君 阅读(160) 评论(0) 推荐(0)
鼠标滚轮事件（mousewheel）
摘要：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-05-31 16:23 小猩猩君 阅读(1609) 评论(0) 推荐(0)
自定义右键菜单（contextmenu）
摘要：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-05-31 14:29 小猩猩君 阅读(645) 评论(0) 推荐(0)
检测浏览器是否支持DOM2级规定的HTML事件
摘要：1 var isSupported = document.implementation.hasFeature("HTMLEvents","2.0"); 阅读全文
posted @ 2012-05-29 15:50 小猩猩君 阅读(172) 评论(0) 推荐(0)
跨浏览器的事件对象（EventUtil）
摘要：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-05-28 17:03 小猩猩君 阅读(509) 评论(0) 推荐(0)
浏览器事件归类
摘要：1 var link = document.getElementById("myLink"); 2 //only IE 3 link.onclick = function() { 4 window.event.returnValue = false; 5 }; 6 7 //DOM0 8 link.onclick = function(event) { 9 event.preventDefault();10 };11 12 //DOM事件监听13 link.addEventListener("click", function(event) {14 even 阅读全文
posted @ 2012-05-28 10:17 小猩猩君 阅读(145) 评论(0) 推荐(0)
eventPhase三个状态测试
摘要：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-05-26 17:26 小猩猩君 阅读(2375) 评论(0) 推荐(0)
click冒泡到body
摘要：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-05-25 21:46 小猩猩君 阅读(229) 评论(0) 推荐(0)
简易模板引擎
摘要：1 function t(s, data){ 2 var r = [], i = 0, len = data.length; 3 for(; i < len; i++){ 4 r.push(s.replace(/\$[\w\d]+/g, function(m){ 5 return (m = m.substr(1)) in data[i] ? data[i][m] : ''; 6 })) 7 } 8 return r.join('\r\n'); 9 }10 11 console.log(t('<li>$na... 阅读全文
posted @ 2012-05-25 15:35 小猩猩君 阅读(156) 评论(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-05-25 14:29 小猩猩君 阅读(193) 评论(0) 推荐(0)
DOM的addEventListener事件与IE的attachEvent事件的区别
摘要：首先看下addEventListener()事件代码 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" 阅读全文
posted @ 2012-05-24 14:41 小猩猩君 阅读(380) 评论(0) 推荐(0)
this替换
摘要：1 function baseObject(){2 this.shit = function(){ alert('fuck'); }3 }4 function abc(){5 baseObject.call(this);6 }7 var o = new abc();8 console.log(o.shit) 阅读全文
posted @ 2012-05-23 16:44 小猩猩君 阅读(189) 评论(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" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" co 阅读全文
posted @ 2012-05-19 20:34 小猩猩君 阅读(278) 评论(0) 推荐(0)
输出页面中指定的标签 2
摘要：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-05-19 13:36 小猩猩君 阅读(148) 评论(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-05-19 11:34 小猩猩君 阅读(167) 评论(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-05-19 10:53 小猩猩君 阅读(307) 评论(0) 推荐(0)
DOM2级遍历能力支持情况
摘要：先上代码：1 var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");2 var supportsNodeIterator = (typeof document.createNodeIterator == "function");3 var supportsTreeWalker = (typeof document.createTreeWalker == "function");4 console.log(sup 阅读全文
posted @ 2012-05-19 10:05 小猩猩君 阅读(254) 评论(0) 推荐(0)
日期算法
摘要：1 function dateFormat(optioner) {2 var a = new Date,b;3 return [a.getFullYear(), (b = (a.getMonth() + 1), b > 10 ? b : '0' + b), a.getDate()].join(optioner);4 }5 console.log(dateFormat('/')); 阅读全文
posted @ 2012-05-18 15:50 小猩猩君 阅读(172) 评论(0) 推荐(0)
offset、scroll、client区别
摘要：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-05-17 14:50 小猩猩君 阅读(247) 评论(0) 推荐(0)
客户区大小 clientWidth & clientHeight
摘要：加入了浏览器判断 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="tex 阅读全文
posted @ 2012-05-16 21:23 小猩猩君 阅读(276) 评论(0) 推荐(0)
偏移量 offsetLeft & offsetTop
摘要：内外边距一定要初始化，不然有些浏览器下取值要悲剧了 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" 阅读全文
posted @ 2012-05-16 21:00 小猩猩君 阅读(381) 评论(0) 推荐(0)
冒泡排序
摘要：算法核心是从上往下扫描数组，比较相邻两个元素，大的在数组的后面，小的在前面，如果不符合则交换二者位置。 1 function bubbleSort(arr) { 2 if (arr.length <= 1) { 3 return arr; 4 } 5 for (var i = arr.length–1; i > 0; i–) { 6 for (var j = i–1; j >= 0; j–) { 7 if (arr[j] < arr[j - 1]) { 8 var tmp = arr... 阅读全文
posted @ 2012-05-15 21:09 小猩猩君 阅读(156) 评论(0) 推荐(0)
获取css属性
摘要：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-05-15 13:07 小猩猩君 阅读(169) 评论(0) 推荐(0)
获取link链接
摘要：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-05-14 21:59 小猩猩君 阅读(280) 评论(0) 推荐(0)
DOM模块支持测试
摘要：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-05-14 09:37 小猩猩君 阅读(207) 评论(0) 推荐(0)
Nodelist
摘要：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-05-13 20:51 小猩猩君 阅读(150) 评论(0) 推荐(0)
外部动态加载css
摘要：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-05-12 22:12 小猩猩君 阅读(225) 评论(0) 推荐(0)
外部动态加载javascript
摘要：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-05-12 22:12 小猩猩君 阅读(178) 评论(0) 推荐(0)
innerText
摘要：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-05-12 21:39 小猩猩君 阅读(872) 评论(0) 推荐(0)
webstorm保存设置 翻译
摘要：Code Folding Settings,Xml Settings,CodeInsight settings,Error highlighting settings代码折叠设置，XML设置，CodeInsight设置，错误突出显示设置Code style schemes,Live templates,File templates代码风格的计划，现场模板，文件模板Color schemes配色方案Default project settings默认项目设置Deployment servers部署服务器File types文件类型General Settings常规设置Global librar 阅读全文
posted @ 2012-05-09 16:44 小猩猩君 阅读(3033) 评论(0) 推荐(0)
在webstorm启动nginx服务器
摘要：今天无意中发现webstorm里加入了nginx服务器快捷启动，熟悉eclipse的大牛们应该用过用过tomcat快捷启动功能。首先打开setting，找到Plugins然后找到nginx插件，右键“download”下载成功以后会出现nginx设置界面，点击“new”，然后选择nginx的安装目录。下面是运行nginx。打开项目，找到图上设置。新建一个nginx server最后直接点击倒数第二张图上的那个绿色小箭头，直接运行nginx即可。 阅读全文
posted @ 2012-05-09 14:25 小猩猩君 阅读(4664) 评论(0) 推荐(1)
查询、回显 基本功能
摘要：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-05-09 11:25 小猩猩君 阅读(309) 评论(0) 推荐(0)
setTimeout与setInterval
摘要：setInterval 1 var num = 0; 2 var max = 10; 3 var intervalId = null; 4 5 function incrementNumber() { 6 num++; 7 8 if (num == max) { 9 clearInterval(intervalId);10 console.log("Done");11 }12 }13 14 intervalId = setInterval(incrementNumber, 500);setTimeout 1 var num = 0; ... 阅读全文
posted @ 2012-05-09 11:23 小猩猩君 阅读(207) 评论(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-05-09 11:15 小猩猩君 阅读(438) 评论(0) 推荐(0)
添加列表项 避免浏览器反复渲染 Fragment
摘要：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-05-09 10:51 小猩猩君 阅读(207) 评论(0) 推荐(0)
分割文本节点
摘要：1 var element = document.createElement("div"); 2 element.className = "message"; 3 4 var textNode = document.createTextNode("Hello world!"); 5 element.appendChild(textNode); 6 7 document.body.appendChild(element); 8 9 var newNode = element.firstChild.splitText(5);10 cons 阅读全文
posted @ 2012-05-09 10:35 小猩猩君 阅读(202) 评论(0) 推荐(0)
获取注释
摘要：1 var div = document.getElementById("myDiv");2 var comment = div.firstChild;3 console.log(comment.data);4 console.log(comment.nodeValue == comment.data); 阅读全文
posted @ 2012-05-09 10:35 小猩猩君 阅读(156) 评论(0) 推荐(0)
合并文本节点
摘要：1 var element = document.createElement("div"); 2 element.className = "message"; 3 4 var textNode = document.createTextNode("Hello world!"); 5 element.appendChild(textNode); 6 7 var anotherTextNode = document.createTextNode("Yippee!"); 8 element.appendChild(ano 阅读全文
posted @ 2012-05-08 16:27 小猩猩君 阅读(246) 评论(0) 推荐(0)
setAttribute、getAttribute、removeAttribute
摘要：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-05-08 15:53 小猩猩君 阅读(350) 评论(0) 推荐(0)
javascript循环
摘要：1 var element = document.getElementById("myList");2 for (var i = 0, len = element.childNodes.length; i < len; i++) {3 if (element.childNodes[i].nodeType == 1) {4 console.log(element.childNodes[i].innerHTML);5 }6 } 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q 阅读全文
posted @ 2012-05-08 15:38 小猩猩君 阅读(204) 评论(0) 推荐(0)
Node(节点)的4个操作方法
摘要：1 //Example 1 2 var returnedNode = someNode.appendChild(newNode); 3 console.log(returnedNode == newNode); 4 console.log(someNode.lastChild == newNode); 5 6 //Example 2 7 var returnedNode = someNode.appendChild(someNode.firstChild); 8 console.log(returnedNode == someNode.firstChild); //false 9 cons.. 阅读全文
posted @ 2012-05-07 09:52 小猩猩君 阅读(409) 评论(0) 推荐(0)
IE6下防止抖动
摘要：body{_background: url(about:blank) fixed;} 阅读全文
posted @ 2012-05-02 16:32 小猩猩君 阅读(244) 评论(0) 推荐(0)