javascript知识点记录(2)

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){//ieobj.attachEvent('on'+type,fn);}}function removeEvent(obj,type,fn){if(obj.removeEventListener){obj.removeEventListener(type,fn,false);}else if(obj.detachEvent){//ieobj.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 {width:window.innerWidth,height:window.innerHeight}}else{return {width: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下为undefinedvar eventObj=e || window.event;//第二兼容性问题//在ie下用 srcElemnt 在火狐下用 targetvar eventOri=eventObj.srcElement || eventObj.target;//现在我们可以取出它额console.log(this===obj); //结果返回的是true滴呀console.log(this===eventOri);//返回的也是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

<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+'\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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430597.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java form的时间格式_SpringMvc接收日期表单提交,自动转换成Date类型方法

User中有birthday(Date)属性&#xff0c;用户注册的时候&#xff0c;选择日期即可&#xff0c;然后提交表单&#xff0c;可spring mvc 报错&#xff0c;400 Bad Request意思是不能把字符串转为Date类型的。实体类中加日期格式化注解DateTimeFormat(pattern "yyyy-MM-dd&q…

Groovy安装与入门实例

Groovy安装与入门实例 摘自: http://blog.csdn.net/dc_726/article/details/8576205 1 Groovy是什么&#xff1f; 来看下官网的介绍&#xff1a;http://groovy.codehaus.org Groovy... is an agile and dynamic language for the Java Virtual Machine builds upon the stren…

Ubuntu设置为命令行登录

rootubuntu:~# vi /etc/default/grub 改: 11 #GRUB_CMDLINE_LINUX_DEFAULT"quiet splash"12 GRUB_CMDLINE_LINUX_DEFAULT"quiet splash text" rootubuntu:~# update-grub rootubuntu:~# reboot 转载于:https://www.cnblogs.com/mylinux/p/5437543.html

java开发平台普元_java开发平台的两种实现模式

从目前国内主流的java开发平台看&#xff0c;主要有两种实现模式&#xff1a;引擎模式及生成源代码模式。引擎模式比较有代表性的是华丹平台(https://www.huadaninfo.com)&#xff0c;生成源代码模式比较有名是的普元平台(http://www.primeton.com)首先说一下引擎模式&#xff…

sde用户下使用sqlplus登录错误ORA-12547: TNS:lost contact

环境&#xff1a;linux oracle arcsde 解决&#xff1a;root用户下增加$ORACLE_HOME/bin/oracle文件的s权限[oraclelocalhost bin]$ chmod s oracle查看权限[oraclelocalhost bin]$ ls -al oracles权限参考 chmod s 可以给文件/目录 设置 suid和sgid转载于:https://www.cnblo…

java版本streamgobbler_java调用本地命令 Runtime class's exec() method

一个简单的定时调用dos命令的例子2,ExecJavac.java 带有异常处理的命令调用例子3,GoodWindowsExec.java 执行windows下的命令&#xff0c;命令作为参数输入StreamGobbler.java4,GoodWinRedirect.java 一个调用命令相对复杂的例子&#xff0c;复合命令StreamRedirectGobbler.jav…

Linux定时任务

最近在做一个SHELL脚本&#xff0c;要求每月1号执行一次。 不管是SHELL脚本&#xff0c;还是定时任务&#xff0c;都是刚接触。今天先记录下定时任务的解决过程&#xff0c;shell脚本的总结等测试无误后写出来。 root以及其他用户可以使用 crontab -e 命令添加定时任务 crontab…

java长连接转短连接_java原生程序redis连接(连接池/长连接和短连接)选择问题...

原标题&#xff1a;java原生程序redis连接(连接池/长连接和短连接)选择问题最近遇到的连接问题我准备从重构的几个程序(redis和mysql)长连接和短连接&#xff0c;以及连接池和单连接等问题用几篇博客来总结下。这个问题的具体发生在java原生程序和redis的交互中。这个问题对我最…

CCTF部分赛题分析

这次算是跟着师傅们全程打完了CCTF的线上赛&#xff0c;一些强队的WriteUp也放了出来。这篇文章主要是想跟着大牛的思路把那些题重新再过一遍。 PWN3 这个是格式化字符串漏洞的题。printf的格式化串直接来自用户输入。 操作流程 用格式化字符串"%7$x"泄漏libc的地址。…

mediawiki mysql_MediaWiki

MediaWiki 最初是由科隆大学的学生及Magnus Manske这位程式开发员设计来编写维基百科的。50而当时是使用以Perl基础的UseModWiki(被维基社群加上外号为”Phase I”)&#xff0c;但後来於2002年1月25日转换至以PHP编写的新版本(”Phase Ⅱ”)。这个维基社群中是十分有名的&#…

20159206 《网络攻防实践》第九周学习总结

20159206《网络攻防实践》第九周学习总结 教材学习内容总结 本周我们学习了教材的第九章和第十章。 第九章介绍了恶意代码安全攻防。首先教材介绍了恶意代码的基础知识&#xff0c;恶意代码指的是使计算机按照攻击者的意图执行以达到恶意目的的指令集。恶意代码包括计算机病毒、…

mysql 操作xm_mysql基本命令使用

启动mysql>net start mysql连接mysql>mysql -u root -h 127.0.0.1 -p password断开mysql连接>qult;查看mysql服务器所有数据库列表>show databases;选择mysql数据库>use database_name;创建数据库>create database database_name;删除数据库>drop databas…

Android深度探索(卷一)第四章读书笔记

通过对git使用方法的学习&#xff0c; 第四章就介绍了源代码的下载和编译。 4.1 下载、编译和测试Android源代码 4.1.1 配置Android源代码下载环境&#xff1a;1创建一个用于存放下载脚本文件的目录。2下载repo脚本文件。3创建用于存放Android源代码的目录。4初始化。5开始下载…

mysql集群重启报错lock_CentOS7.2 下 MySQL 之 PXC 集群部署【Docker+单机多节点】

背景【注意】: 鄙人认为本篇适合做入门测试/学习之用&#xff0c;选择的 "单机多节点配置"&#xff0c;后面再整理 "多机配置"文章.近期正突击学习数据库知识想着对 PXC 集群部署实际操作一番&#xff0c;提高技能点&#xff0c;为后续的升职加薪做充足的准…

十二:内存简单介绍和OC的内存管理

一、内存简单介绍 内存结构 1、运行时分配 &#xff08;1&#xff09;栈&#xff1a;用户存放程序临时创建的局部变量&#xff08;先进后出&#xff09;。 &#xff08;2&#xff09;堆&#xff1a;动态分配内存段。 2、编译器分配 &#xff08;1&#xff09;BSS段&#xff1a;…

java上传组件_java上传组件FileUpload

如果表单中有文件要上传&#xff0c;也就是有就需要在form标签中添加enctype"multipart/form-data"属性 如果添加此属性&#xff0c;在操作页面servlet中&#xff0c;用request.getParameter("name")获取普通表单数据就会出错java.lang.NullPointerExcepti…

第九周学习进度

第九周所花时间&#xff08;包括上课&#xff09;上课4小时&#xff0c;课后4小时代码量&#xff08;行&#xff09;      300博客量1了解到的知识点安卓开发环境的应用、服务器的连接转载于:https://www.cnblogs.com/wangzongze/p/5449535.html

百度推送java_关于百度推送,请教一下大家

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼2015-10-23 14:38:01,734 ERROR [main] - Context initialization failedorg.springframework.beans.factory.BeanCreationException: Error creating bean with name org.springframework.web.servlet.mvc.method.annotation.Requ…

java一般做什么_java开发一般做什么

4java怎么样学习编程的时候&#xff0c;一定要独立思考现在网络很发达&#xff0c;我见很多程序员总爱百度&#xff0c;包括我带的许多人都是这样&#xff0c;一个jdbc这么初级的东东&#xff0c;他们编程几年了&#xff0c;每次用还总是百度查。这个东西应该是熟记于心的&…

echarts饼状图mysql_echarts饼状图位置设置

ReactNative环境配置参考链接 Windows系统安装React Native环境 windows下React Native Android 环境搭建 在Windows下搭建React Native Android开发环境 ...(转载)PHP获取客户端、PHP获取服务器相关信息(转载)http://www.php100.com/html/webkaifa/PHP/PHP/2009/1027/3446.htm…