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){
//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 {
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下为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+'\n e.currentTarget.tagName:'+e.currentTarget.tagName;
alert(str);
} $('inner').addEvent('click',test); //结果都是p
$('outer').addEvent('click',test); //结果是 p 和 div </script>
javascript知识点记录（2）的更多相关文章
- Javascript知识点记录（三）设计模式
Javascript设计模式记录,这个方面确实是没写过,工作中也没有用到js设计模式的地方. prototype与面向对象取舍 使用prototype原型继承和使用面向对象,都可以实现闭包的效果.那么 ...
- javascript知识点记录（1）
javascript一些知识点记录 1.substring,slice,substr的用法 substring 和slice 都有startIndex 和 endIndex(不包括endInex),区 ...
- Javascript知识点记录（二）
Javascript入门易,精通难,基本上是共识的一个观点.在这个篇幅里,主要对一些难点进行记录. 鸭子类型 Javascript属于动态类型语言的一种.对变量类型的宽容,给了很大的灵活性.由于无需类 ...
- JavaScript算法与数据结构知识点记录
JavaScript算法与数据结构知识点记录 zhanweifu
- 【千纸诗书】—— PHP/MySQL二手书网站后台开发之知识点记录
前言:使用PHP和MySQL开发后台管理系统的过程中,发现有一些通用的[套路小Tip],这里集中记录一下.结合工作中ing的后台业务,我逐渐体会到:除了技术知识外.能使用户体验好的“使用流程设计”积累 ...
- C#知识点记录
用于记录C#知识要点. 参考:CLR via C#.C#并发编程.MSDN.百度 记录方式:读每本书,先看一遍,然后第二遍的时候,写笔记. CLR:公共语言运行时(Common Language Ru ...
- spring mvc开发过程知识点记录
给一个客户做的一个小项目,需求就是输入类似一个短网址http://dd.yy/xxxx然后跳转到另外一个域名下的图书文件.(实际很多短网址站都提供API供调用吧,不过客户需求是他自己建立一个短网址服务 ...
- JavaScript知识点整理（一）
JavaScript知识点(一)包括 数据类型.表达式和运算符.语句.对象.数组. 一.数据类型 1) js中6种数据类型:弱类型特性 5种原始类型:number(数字).string(字符串).bo ...
- javascript知识点积累
8年javascript知识点积累 08年毕业就开始接触javascript,当时是做asp.net发现很多功能用asp.net控件解决不了,比如checkbox单选,全选问题,自动计算总价问题, ...
随机推荐
- ubuntu14.04美化
首先我美化grub启动菜单背景和开关机背景,还有自动换壁纸.其它的美化日后再写博文. Grub启动菜单背景更换: 这个很简单,比以前的ubuntu和grub版本简单多了,直接将图片文件放到/boot/ ...
- HTML5怎样在网页中使用摄像头功能
怎样在网页中使用摄像头,html5越来越多的使用到实际工作中,那么他怎样调用摄像头呢进行视频聊天,视频监控等活动呢,今天为大家抛砖引玉,教大家怎样实现怎样利用html5实现摄像头视频监控功能.废话不多 ...
- ReLU
预训练的用处:规则化,防止过拟合:压缩数据,去除冗余:强化特征,减小误差:加快收敛速度. 标准的sigmoid输出不具备稀疏性,需要用一些惩罚因子来训练出一大堆接近0的冗余数据来,从而产生稀疏数据,例 ...
- HP StorageWorks MSL2024 Tape Libraries - Tape library Error Codes
Main error codes Error Code Description Details and Solution 80 Can not initialize bar code reader P ...
- 在Windows2003上安装Active Directory Management Gateway Service
为了让基于Windows2003的域控能够被Powershell管理,必须安装KB968934,但是直接安装会报以下的错误,必须先安装NDP35SP1-KB969166.但是"因为基于 Wi ...
- 使用Eclipse自带Web Service插件(Axis1.4)生成Web Service服务端/客户端
创建一个名字为math的Java web工程,并将WSDL文件拷入该工程中 将Axis所需的jar包拷贝至WebRoot\WEB-INF\lib目录下,这些jar包会自动导入math工程中 一,生成W ...
- 《Pro Git》笔记3：分支基本操作
<Pro Git>笔记3:Git分支基本操作 分支使多线开发和合并非常容易.Git的分支就是一个指向提交对象的可变指针,极其轻量.Git的默认分支为master. 1.Git数据存储结构和 ...
- Nginx 笔记与总结（11）Nginx + php-fpm + MySQL 安装 ecshop
下载 ecshop (ECShop_V2.7.3_UTF8_release1106)安装包,解压之后把 upload 文件夹使用 ftp 传到服务器的 /usr/local/html 目录下,同时改名 ...
- PHP 错误与异常 笔记与总结（1）错误（Deprecated，Notice，Warning）
[常见的错误类型] ① 语法错误 [例1]程序语句结尾少了';' <?php $username = "dee" //少了分号; echo $username; 输出: ( ...
- jquery.cookie.js 的使用
jquery.cookie.js 对cookie的操作 $.cookie('the_cookie'); //读取Cookie值 $.cookie('the_cookie', 'the_value'); ...