1.js 异步加载和同步加载
异步加载模式也叫非阻塞模式，浏览器在下载js的同时，同时还会执行后续的页面处理， 在script标签内，用创建一个script元素，并插入到document中，这样就是异步加载js文件了
//以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。 (function (){ var script=document.createElement('script'); script.type='text/javascript'; script.async=true; script.src='http://libs.baidu.com/jquery/1.9.1/jquery.min.js'; //不能是file 开头的文档，应为，它是通过src 中的get方式去获取滴呀 var node=document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(script,node); })(); //这么用就会报错了滴呀 $(function (){ //这里会报错了，滴呀$为定义滴呀 var outer=$('#outer'); alert(outer.length); }) window.onload=function (){ //jq是能够用滴呀 //这种加载方式在加载执行完之前会阻止 onload 事件的触发， //而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等， //所以还是会阻塞部分页面的初始化处理 //更多内容：http://www.jb51.net/article/30324.htm }
同步加载模式
<script src="http://xxxxx/script.js"></script>
同步加载模式又阻塞模式，会阻止浏览器的后续处理，阻止了后续文件的解析，执行，如图像的渲染，浏览器之所以会采用同步模式，因为
记载js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。
通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。
同步加载流程是瀑布模型，异步加载流程是并发模型。
2.js对象冒充
function Person(name,age){ this.name=name; this.age=age; this.say=function (){ return "name:"+this.name+"age:"+this.age; } } var o=new Object(); Person.call(o,"jack",18); console.log(o.say());
3.获取浏览器滚动条的位置（被卷曲的页面）
function getPostion(){ return { top: document.documentElement.srollTop || document.body.scrollTop, left:document.documentElement.srollLeft || document.body.scrollLeft } }
4.阻止默认行为
function preDef(ev){ var e=ev || window.event; if(e.preventDefault){ e.preventDefault; }else{ e.returnVaule=false; } }
5.浏览器事件的添加和移除
function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){ //ie obj.attachEvent('on'+type,fn); } } function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){ //ie obj.detachEvent('on'+type,fn); } }
6.目标对象
function getTarget(ev){ if(ev.target){ return ev.target; }else if(window.event.srcElement){ return window.event.srcElement; //ie } }
7.获取可视窗口的大小
function getWindow(){ if (typeof window.innerWidth !='undefined'){ return { window.innerWidth, height:window.innerHeight } }else{ return { document.documentElement.clientWidth, height:document.documentElement.clientHeight } } }
8.防止订单重复提交
function disable(){ //放置订单重复提交 document.getElementById("btn").disabled=true; //方式二 var flag=false; if(flag==true){return;} //提交 flag=true; }
9.document.body 和 document.documentElement
关键就在于是否声明DTD,符合 web 标准，DTD 当然是不能少的
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
var value=document.body.scrollTop; // var value2=document.documentElement.scrollTop;// //兼容性写法; var val=document.body.scrollTop || document.documentElement.scrollTop;
这里再补充一点
1、各浏览器下 scrollTop的差异
IE6/7/8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
2、获取scrollTop值
完美的获取scrollTop 赋值短语 ：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值，你发现啥了没？？
没错， 就是 window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行 或运算时，系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端，即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ，此时将 window.pageYOffset (Safari) 放在或运算最后面时， scrollTop 返回 undefine , undefine 用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚，不知道有没有表达清楚。
不过最后总结出来这句实验过OK，大家放心使用；
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
10关于事件源
var obj=document.getElementById('btn1'); obj.onclick=function (e){ var eventObj=e; //这种方式在ie下为undefined var eventObj=e || window.event; //第二兼容性问题 //在ie下用 srcElemnt 在火狐下用 target var eventOri=eventObj.srcElement || eventObj.target; //现在我们可以取出它额 console.log(this===obj); //结果返回的是true滴呀 console.log(this===eventOri);//返回的也是ture滴 //所以我们可以做很多操作 console.log(this.value) //click console.log(this.id) //属性； console.log(this.parentNode); //body console.log(this.innerHTML); console.log(this.getAttribute('id')); //还可以做等等一些的操作i呀 }
关于target 和 currentTarget
<body> <div id="outer" style="background:#099"> click outer <p id="inner" style="background:#9C0">click inner</p> <br> </div> </body> <script type="text/javascript"> //先由文字描述 //target在事件流的目标阶段，current //target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。 //只有当事件流处在目标阶段的时候，两个的指向才是一样的， //而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。 var $=function (id){ typeof id=='string'&&(id=document.getElementById(id)); return $.fn.call(id) } $.fn = function (){//附加2个方法 this.addEvent = function (sEventType,fnHandler){ if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} else {this["on" + sEventType] = fnHandler;} } this.removeEvent = function (sEventType,fnHandler){ if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} else { this["on" + sEventType] = null;} } return this; }; function test(e){ var str='e.target.tagName:'+e.target.tagName+' e.currentTarget.tagName:'+e.currentTarget.tagName; alert(str); } $('inner').addEvent('click',test); //结果都是p $('outer').addEvent('click',test); //结果是 p 和 div </script>