神马是JSONP
matamune.com?jsonp=xxxx
后台会接受这个XXXX作为返回数据的函数名： xxxx(返回的数据)
前端代码定义这个function xxxx(data){ 在这里ooxx data}
在成功获取xxxx(返回的数据)后执行
绝对位置获取
document.documentElement和document.body
document.documentElement即页面中的<html>
document.body即页面中的<body>
document.documentElement.scrollTop ，chrome支持，其他浏览器该值是0.
document.body.scrollTop ，非chrome浏览器支持，其他chrome该值是0.
那么document.documentElement.scrollTop+document.body.scrollTop 即是竖向滚动条的绝对坐标；
其他的scrollLef等都以此类推。
getBoundingClientRect
getBoundingClientRect是相对浏览器坐标的对象，兼容的属性主要有left,top等4个。如果是点击事件的getBoundingClientRect，那么4上下左右很好理解。如果是点击有宽高大小的dom比如一个<input type=’text’ /> 则上下左右是以四个边为起点开始计算的。比如document.getElementsByTagName(‘input’)[0].getBoundingClientRect().left是input左边距离浏览器左边的距离。以此类推。
那么看看getBoundingClientRect，document.documentElement和document.body在一起能干些什么大事吧！
demo1 计算鼠标点击的坐标
demo2 输入框的自定义下拉菜单定位
一个checkbox全选组件
一个全选组件，每次写貌似很麻烦，特地整理出来，以后备用。
分为两个部分，一是勾选全选之后其他checkbox的选中/取消选中的操作；二是全选功能的checkbox项随着其他checkbox项被选中/取消选中时的状态改变；
其中一和二功能分别独立，可以通过控制构造函数中第三个参数是否为空而对第二个功能进行取舍；
分为jquery和yui两版。
请看 DEMO
需要注意的是放到domready中是为了解决IE的BUG。在IE中DOM未加载完使用JS去清空表单保存的状态是不会得逞的。
clearTimeout
经常遇到这样的需求，一段延时执行的代码在短时间内多次执行时，延时时间并不会重置。例如几秒后消失的弹窗。
通过在闭包里定义的变量来clearTimeout
用闭包是为了避免全局变量的出现
(function(){
var timer = null;
var timeSet = function(){
timer = setTimeout(function(){
//code
},3000);
}
var timeClear = function(){
timer && clearTimeout(timer);
}
timeClear();
timeSet();
})()
此demo来自LRain
浮动层点击空白处关闭的一个思路
利用冒泡，在body上绑定click，点击页面冒泡到body，使之关闭显示的浮动层。 当点击浮动层的区域时，阻止冒泡，并不关闭浮动层。 是浮动层点击空白处关闭的一个思路，也是冒泡事件和阻止冒泡的一个练习<style> *{margin:0;padding:0;} html,body{height:100%;} </style> <div id="myid" >点我</div> <div style="display:none;" id="myshow">点其他地方隐藏我</div>//绑定事件函数 function addEvent(obj,type,fn){ if(obj.addEventListener) obj.addEventListener(type,fn,false); else if(obj.attachEvent){ obj["e"+type+fn]=fn; obj[type+fn]=function(){obj["e"+type+fn](window.event);} obj.attachEvent("on"+type,obj[type+fn]); } } //解除绑定函数 function removeEvent(obj,type,fn){ if(obj.removeEventListener) obj.removeEventListener(type,fn,false); else if(obj.detachEvent){ obj.detachEvent("on"+type,obj[type+fn]); obj[type+fn]=null; obj["e"+type+fn]=null; } } var myid = document.getElementById('myid'); var myshow = document.getElementById('myshow'); var mybody = document.getElementsByTagName('body')[0]; addEvent(myid,"click",newAlert); function newAlert(e){ if(e && e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;} //阻止冒泡，避免点击“点我”时冒泡到body触发newAlertClose() myshow.style.display="block"; addEvent(myshow,"click",function(e){ if(e && e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;} //阻止myshow的冒泡，即点击内容区域不会触发 body的newAlertClose() }); addEvent(mybody,"click",newAlertClose); //为body绑定newAlertClose() } function newAlertClose(){ myshow.style.display="none"; removeEvent(mybody,"click",newAlertClose); //为body解除绑定newAlertClose() }
避免重复执行的逻辑
通过设置私有属性来判断是否存在，不存在则创建;
if (typeof obj._init == undefined){
//code
obj._init = true;
}
只是一种逻辑，避免重复执行或是加载
typeof obj._init 当obj._init不存在时返回undefinedobj._init = true 可以为任意变量，用私有属性避免冲突
instanceof 一则
/*
* @constructor
*/
function myObj(width,height){
this.width=width;
this.height= height;
return this.width*this.height;
}
var mo = new myObj(20,30);
var anotherMo = new myObj(1,2);
alert(mo instanceof myObj); //true
alert(anotherMo instanceof myObj); //false
Independence Day
Good morning.
In less than an hour, aircraft from here will join others from around the world. And you will be launching the largest aerial battle in this history of mankind.
Mankind — that word should have new meaning for all of us today.
We can’t be consumed by our petty differences anymore.
We will be united in our common interests.
Perhaps its fate that today is the 4th of July,and you will once again be fighting for our freedom,
not from tyranny, oppression, or persecution — but from annihilation.
We’re fighting for our right to live, to exist.
And should we win the day, the 4th of July will no longer be known as an American holiday,
but as the day when the world declared in one voice:
” We will not go quietly into the night! We will not vanish without a fight! We’re going to live on! We’re going to survive!”
Today, we celebrate our Independence Day!
Hello world！
欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！