怎么做同城购物网站,做网站啦代理的方法,怎么做地方门户网站,wordpress用户类型1.js 异步加载和同步加载 异步加载模式也叫非阻塞模式#xff0c;浏览器在下载js的同时#xff0c;同时还会执行后续的页面处理#xff0c; 在script标签内#xff0c;用创建一个script元素#xff0c;并插入到document中#xff0c;这样就是异步加载js文件了 //以前的一…1.js 异步加载和同步加载 异步加载模式也叫非阻塞模式浏览器在下载js的同时同时还会执行后续的页面处理 在script标签内用创建一个script元素并插入到document中这样就是异步加载js文件了 //以前的一般建议是把script放在页面末尾/body之前这样尽可能减少这种阻塞行为而先让页面展示出来。 (function (){var scriptdocument.createElement(script);script.typetext/javascript;script.asynctrue;script.srchttp://libs.baidu.com/jquery/1.9.1/jquery.min.js; //不能是file 开头的文档应为它是通过src 中的get方式去获取滴呀var nodedocument.getElementsByTagName(script)[0];node.parentNode.insertBefore(script,node); })();//这么用就会报错了滴呀$(function (){ //这里会报错了滴呀$为定义滴呀var outer$(#outer);alert(outer.length);})window.onloadfunction (){//jq是能够用滴呀//这种加载方式在加载执行完之前会阻止 onload 事件的触发//而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等//所以还是会阻塞部分页面的初始化处理//更多内容http://www.jb51.net/article/30324.htm} 同步加载模式 script srchttp://xxxxx/script.js/script 同步加载模式又阻塞模式会阻止浏览器的后续处理阻止了后续文件的解析执行如图像的渲染浏览器之所以会采用同步模式因为 记载js文件中有对dom的操作重定向输出document等默认行为所以同步才是最安全的。 通常会把要加载的js放到body结束标签之前使得js可在页面最后加载尽量减少阻塞页面的渲染。这样可以先让页面显示出来。 同步加载流程是瀑布模型异步加载流程是并发模型。 2.js对象冒充 function Person(name,age){this.namename;this.ageage;this.sayfunction (){return name:this.nameage:this.age;}}var onew 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 eev || window.event;if(e.preventDefault){e.preventDefault; }else{e.returnVaulefalse;}} 5.浏览器事件的添加和移除 function addEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);}else if(obj.attachEvent){//ieobj.attachEvent(ontype,fn);}}function removeEvent(obj,type,fn){if(obj.removeEventListener){obj.removeEventListener(type,fn,false);}else if(obj.detachEvent){//ieobj.detachEvent(ontype,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 {width:window.innerWidth,height:window.innerHeight}}else{return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight }}} 8.防止订单重复提交 function disable(){//放置订单重复提交document.getElementById(btn).disabledtrue;//方式二var flagfalse;if(flagtrue){return;}//提交flagtrue; } 9.document.body 和 document.documentElement 关键就在于是否声明DTD,符合 web 标准DTD 当然是不能少的 body是DOM对象里的body子节点即 body 标签 documentElement 是整个节点树的根节点root即html 标签 var valuedocument.body.scrollTop; //var value2document.documentElement.scrollTop;////兼容性写法;var valdocument.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 objdocument.getElementById(btn1);obj.onclickfunction (e){var eventObje; //这种方式在ie下为undefinedvar eventObje || window.event;//第二兼容性问题//在ie下用 srcElemnt 在火狐下用 targetvar eventOrieventObj.srcElement || eventObj.target;//现在我们可以取出它额console.log(thisobj); //结果返回的是true滴呀console.log(thiseventOri);//返回的也是ture滴//所以我们可以做很多操作console.log(this.value) //clickconsole.log(this.id) //属性console.log(this.parentNode); //bodyconsole.log(this.innerHTML);console.log(this.getAttribute(id));//还可以做等等一些的操作i呀} 关于target 和 currentTarget bodydiv idouter stylebackground:#099 click outer p idinner stylebackground:#9C0click inner/p br /div
/body
script typetext/javascript//先由文字描述//target在事件流的目标阶段current//target在事件流的目标阶段currentTarget在事件流的捕获目标及冒泡阶段。//只有当事件流处在目标阶段的时候两个的指向才是一样的 //而当处于捕获和冒泡阶段的时候target指向被单击的对象而currentTarget指向当前事件活动的对象一般为父级。var $function (id){typeof idstring(iddocument.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 stre.target.tagName:e.target.tagName\n e.currentTarget.tagName:e.currentTarget.tagName;alert(str);}$(inner).addEvent(click,test); //结果都是p$(outer).addEvent(click,test); //结果是 p 和 div/script 转载于:https://www.cnblogs.com/mc67/p/5435589.html
