1.遇到域要分两步:第一预解析,第二逐行读代码2.变量和属性本质是一个东西,不过变量是自由的,而属性是属于某个对象的,同理得出, 函数也是自由自在的不属于谁, 而方法也是属于某个对象的!3.js中,this 谁发生事件就是谁!全局的变量和函数,默认都是window的.object是空白对象.var obj = new Object();工厂方式构造对象:1.原料: var obj = new Object()2.加工: 添加属性和方法3.出厂: return 对象出去.工厂方式构造对象缺点:1. 没有new2.alert( p1.showName == p2.showName) //false,每个对象都有自己一套资源,极其浪费资源 补充知识点var a = function(){alert("abc")} //本质是 var a = new Function("alert(‘abc‘)");var b = function(){alert("abc")}alert(a==b)//false;prototype 原型: 扩展系统或自定义类的通用的功能,所有对象公用一套! 可以添加属性或方法,一般是添加方法用class 改变一类元素的样式 Array.prototype.sum = function(){}行间样式: 改变一个元素的样式  arr1.sum = function(){...}//蛋挞和蛋挞模子类: 蛋挞模子,不具备实际功能,只能用来构造对象对象(实例) : 蛋挞 ,具备实际功能在js当中构造函数就是类,类就是构造函数!通用规则: 不同的东西放在构造函数,相同的东西放在原型中!构造函数:初始化属性prototype:方法做成通用的,所有对象都一样面向对象: 越是通用的东西,越是臃肿庞大1.前提:所有代码都必须在window.onload,window.onload作用是初始化整个程序(与构造函数一样)2.this面向对象中是极其恶心! 3.改错: this this啥时候会出问题?? 1.定时器 2.事件 setInterval(this.show,1000)//但凡被定时器调用的函数,this指的都是window对象 解决的方法: 1.再套一层 2. var _this = this; 把对象换个名字,省的与定时器或事件中this重名 setInterval(function(){_this.show();},1000)  面向过程--->面向对象 1.函数拎到window.onload外面,把局部变量改成全局变量(暂时) 2.干掉window.onload,变成构造函数 3.把全局变量变成属性,拎到外面的函数变成prototype(变成属性或方法后不要忘了加this) 4.两个地方的this要做手脚(定时器,事件),因为与window的this,矛盾. 5.解决方法: 存this, var _this = this;  事件上套一层, this.oDiv.onmousedown = fnDown;改成 this.oDiv.onmousedown = function(){	_this.fnDown(); } 测试: window.onload = function(){	new Drag(‘div1‘) }  drag限制范围:  继承 子集具备了父集的属性和方法 Person : 属性:name sex 方法:showName showSex  Worker 属性: *name *sex  job(职位) 方法: *showName *showSex showJob  Coder 程序员  属性: *name *sex  *job(职位) language(语言)   方法: *showName *showSex *showJob  showLanguage    php 中字符串连接用点.  +号就是加号 美元符号$ 等于js中的var -> 代替js或java中的点代表调用 obj.show() == obj->show()  Class Person{	function _construct($name, $sex){ //构造函数		$this->name  = $name;		$this->sex = $sex;	}		function showName(){		echo $this->name;	}	function showSex(){		echo $this->sex;	} }  $p1 = new Person(‘blue‘,‘male‘); $p1->showName();  class Worker extends Person{	function_construct($name, $sex, $job){		parent::_construct($name, $sex);//先执行父级构造函数		$this ->job = $job;	}	function showJob(){		echo $this->job;	} }  $w1 = new Worker(‘blue‘,‘female‘,‘打杂的‘); $w1.showJob();//   构造函数中的this 实际上指的就是new出来的对象 function Worker(name, sex, job){Person.call(this, name, sex);} // this 就是 new 出来的worker对象ow1 构造函数伪装:Person.call(this, name, sex);//等于java中的super.name   super.sex调用父级的属性 通过原型来继承父级的方法又叫原型链: Worker.prototype = Person.prototype; // 相当于java中的super(name,sex)    //一个房子有两把钥匙,张三拿钥匙1到房间拿走了沙发,那么李四拿钥匙2进去一看沙发是不是少了?!反之亦然 js中引用: 房子和钥匙(引用),js中所有的对象都是引用 var arr1 = [1,2,3,4]; var arr2 = arr1; arr2.push(5) alert(arr1)//1 2 3 4 5 alert(arr2)// 1 2 3 4 5  // 如果只想给arr2添加数据,arr1不变; 创建不同的引用 var arr1 = [1,2,3,4] var arr2 = [] for(var i in arr1){	arr2[i] = arr1[i]; } arr2.push(5)   //------------- Worker.prototype = Person.prototype;//风险很大!因为是引用赋值,相当于多配了一把钥匙 //一旦子类添加或删除方法会把父级的方法添加或删除!所以必须引用不同的变量for循环遍历赋值 for(var i in Person.prototype){	 Worker.prototype[i] = Person.prototype[i];}   //typeof 和 instanceof var arr = [1,2,3] alert(arr instanceof Object) //true    // function LimitDrag(id){	Drag.call(this,id);//继承父级的属性 } for(var i in Drag.prototype){	LimitDrag.prototype[i] = Drag.prototype[i];//继承父级的方法 }  //限制拖动范围就是重写方法 LimitDrag.prototype.fnmove = function(ev){	var oEvent = ev || window.event;	var l = oEvent.clientX - this.disX;	var t = oEvent.clientY - this.disY;	if(l < 0){		l = 0;	}else if(l > document.documentElement.clientWidth - this.oDiv.offsetWidth){		l = document.documentElement.clientWidth - this.oDiv.offsetWidth;	}		if(t < 0){		t = 0;	}else  if(t > document.documentElement.clientHeight - this.oDiv.offsetHeight){		t = document.documentElement.clientHeight - this.oDiv.offsetHeight	}			宿主对象:Dom === document   ;  BOM === window;	本地对象,非静态对象,用的时候需要new	内置对象,静态对象,用的时候不需要用直接用 Global MATH			eval()可以将任何形式的字符串转换成js对象	parse() 只能解析json形式的字符串转换成js对象 ;推荐 安全性高点,但是属性必须加字符串	var str = ‘{"age":18, "name":"chenk"}‘;//在使用parse转换时候age和name属性必须加双引号	var json = JSON.parse(str);	alert(json.name);			焦点:三种方式	点击	tab	js		如何默认给焦点?	focus方法给指定的元素设置焦点!		obj.focus()//获取焦点	obj.blur()//取消焦点		obj.select()//全选 点击按钮全选? btn.onclick = function(){oText.select()}	只能选中用户输入的内容,但p标签div等中的文字就选中不了		event事件对象,当事件发生的时候,所有的信息都会保存到事件对象中	飞机上的黑匣子! 注意必须用事件调用才能拿到event对象!		ie/chrome : event是内置全局的; var event;	ff:   window.event;	如果函数是被事件调用,那么函数的第一个参数就是事件对象,参数名字无所谓 e,ev,event		function fn1(ev){alert(event);}	fn1(ev);// 不是事件调用所以event没东西	document.onclick = fn1; //事件调用的函数,所以event有内容		事件流: 	事件冒泡: 点击等事件有内往外	应用:所有的事情让父级去做,自己不做		div1包含div2包含div3	三个div同时绑定同一个函数!当点击div3的时候,div2也被点击了,div1也被点击了,这就是冒泡!		阻止冒泡:event.canelBubble = true;		事件捕获: ie下没有,在绑定事件中,标准下是有的!		绑定事件的几种方式:	//第一种赋值形式,后面的函数会覆盖前面的函数	document.onclick = fn1;	document.onclick = fn2;//覆盖fn11,只有fn2		//第二种方式, 事件名称有on	ie: obj.attachEvent(事件名称,事件函数);  	obj.attachEvent(‘onclick‘,fn1);	obj.attachEvent(‘onclick‘,fn2);	this指向的是window,让人极其不能容忍		标准: obj.addEventListener(事件名称,事件函数,是否捕获)//false不捕获就是冒泡	this指向的是触发该事件的对象		如何解决this指向的问题!!!  函数下的一个方法call()中的一个参数可以改变函数执行过程中的内部this指向的问题	如果第一个传入的是null,那么传入的就是window!		封装一个通用的方法	function bind(obj, evname,fn){		if(obj.addEventListener){			obj.addEventListener(evname, fn, false);		}else{			obj.attachEvent(‘on‘+evname,function(){				fn.call(obj);			}		}	}	//实现多个绑定	bind(document,‘click‘,fn1);	bind(document,‘click‘,fn2);	bind(document,‘click‘,fn3);  如何取消事件绑定? 第一种: document.onclick = null;// 置空 第二种: ie: obj.detachEvent(事件名称,事件函数) 标准: obj.removeEventListener(事件名称,事件函数,是否捕获)  三: 键盘事件 onkeydown默认是上一次的值而不是当前的值 onkeyup 当前值 event.keyCode: ctrlKey, shiftKey, altKey 布尔值  document.onkeydown = function(ev){	var ev = ev || window.event;	alert(ev.keyCode)	}   如何键盘控制div移动?    事件默认行为阻止? return false; 右键菜单事件: oncontextmenu 又名环境菜单!不同的地方弹出的内容不同!  拖拽原理: 1.选中元素 oDiv. onm ousedown 1.2.移动:    document.onmousemove    oDiv.style.left = 鼠标左边-dealtaX即可 1.3.到达目的地 document.onmouseup    document.onmousemove = onm ouseup = null;  鼠标点到最左边最上边的距离 ev.clientX div到最左边和最上边的距离 oDiv.offsetLeft  问题: 如何解决拖动鼠标太快,div跟不上的问题? oDiv 的移动事件改成它的父级document,   disX = ev.clientX - this.offsetLeft;  document.onmousemove = function(ev){	var ev = ev || window.event;	oDiv.style.left = ev.clientX - disX + ‘px‘;	oDiv.style.top = ev.clientY - disY +‘px‘; }  问题2:如何解决拖拽的时候如果有文字或图片被选中会产生问题?  分析:当鼠标按下的时候,如果页面中文字被选中,就会触发浏览器默认拖拽文字的效果 标准下:return false;阻止默认事件的发生 非标准(ie):aInput[0].setCapture();//设置全局捕获,把所有其他元素的事件替换成自己事件 自己的事件会覆盖其他所有的事件 释放: up中,if(oDiv.releaseCapture){oDiv.releaseCapture()} 最终: if(oDiv.setCapture){oDiv.setCapture()}  拖拽的封装,限制范围,磁性吸附  限制范围:在移动中限制元素的(Left 和top值)范围   L = ev.clientX - disX;//元素距离左边的距离 左边:L < 0 设置 L = 0 右边: 可视区宽度- 元素自身的宽度 L > ll 设置成 L = ll; var ll = document.documentElement.clientWidth - obj.offsetWidth  上下同左右; var tt = document.documentElement.clientHeight - obj.offsetHeight  磁性吸附: 把L < 0 改成L <100 ,当小于100时候一拉就过去了   拖拽改成层大小 左右拖拽实现左右大小,上下拖动改变上下大小   碰撞检测: 位置是否重合! 九宫格,假如当前image 在5号位,那么在其他8个位置没关系   滚动条: 核心:滚动区域 和 滚动条 滚动条主要目的是控制其他元素比如图片文字的放大等 公式: T/MT = H/MH ;  求H var iScale = T / MT  document.title = iScale;  控制内容的滚动!设置内容的top值,文字没有top值所以要把文字放入div中  鼠标滚轮事件:  onm ousewheel 滚轮向上div变大,反之变小 ie/chrome: onm ousewheel ; event.wheelDelta//下:-120 上:120 ff: addEventListener  ;  event.detail //上:-3 下3  oDiv.addEventListener(‘DOMMouseScroll‘,fn.false)//非标准下不行 改写成:只在标准下才绑定事件 if(oDiv.addEventListener){	oDiv.addEventListener(‘DOMMouseScroll‘,fn.false) }  //如何确定滚轮的 上下判断? var b = true; if(ev.wheelDelta > 0){ //ie或chrome下	b = ev.wheelDelta > 0 ? true : false; }else{ //ff下	b = ev.detail < 0 ? true : false; }  //如何解决滚轮滚动,滚动条的事件   //return false阻止的 obj.on事件名称 = fn; 所触发的默认行为(on事件) 也能阻止attachEvent的默认绑定事件addEventListener绑定的事件需要通过event下面的preventDefault()来阻止 if(ev.preventDefault){	ev.preventDefault(); } return false;   Cookie: 存储数据用类似变量但可以设置存储时间! 变量是临时存储在内存中关闭浏览器就没了! 1. 不同浏览器存放的cookie位置不能通用 2.  cookie的存储是以域名的形式保存在硬盘中,新浪的百度的,搜狐的... 3.  存储格式 key-value  document.cookie = ‘zhangsan=26‘; 4. 读取都是通过 document.cookie document.cookie = ‘age=26‘; document.cookie = ‘username=zhangsan‘; 获取的时候每个cookie之间通过分号加空格串联起来 "age=26; username=zhangsan" 5. 一个域名下存放的cookie的个数有限制,内容大小有限制 6.cookie默认是临时存储的,当关闭浏览器后自动销毁 var oDate = new Date(); oDate.setDate(oDate.getDate() + 5);//五天后 document.cookie = ‘username=zhangsan;expires=‘+oDate.toGMTString();//五天后失效,注意时间必须是字符串格式  //如何解决存储特殊值 \n中文等? 内容最好编码存放  encodeURI()和decodeURI() document.cookie = ‘username=\n你好zhangsan;expires=‘+oDate.toGMTString(); //会出问题 document.cookie = ‘username=‘+encodeURI(‘\n你好zhangsan‘)+‘;expires=‘+oDate.toGMTString();    //如何通过key 拿到value function getCookie(key){	var arr1 = document.cookie.split(‘; ‘);//以分号加空格切割字符串	for(var i = 0 ; i < arr1.length; i++){		var arr2 = arr1[i].split(‘=‘);		if(arr2[0] == key){			return decodeURI(arr2[1]);		}	} }  function setCookie(key, value, invalidTime){	var oDate = new Date();	oDate.setDate(oDate.getDate()+invalidTime);	document.cookie = key + ‘=‘ + value + ‘;expires=‘ + oDate.toGMTString();	 }  function removeCookie(key){ 	setCookie(key,‘‘,-1); }   事件高级应用1 1.但凡能带括号的类型都是function,比如abc(),$.(); typeof($)//function  如何取到按钮上的value值  obj.attr(‘value‘); 选择器仅仅用来选择对象的方法才是真正改变!运动:1.div运动---定时器每隔50毫秒 offsetLeft 增加x(var iSpeed= 10) px问题1: 如何到指定的地方停?if(oDiv.offsetLeft >= 500 ) clearInterval(timer)问题2:到达目的地后继续点击按钮还是慢慢往前跑?清除定时器仅仅是下次不执行,本次还是要执行的?所以当到达了目的地的时候,再点击按钮,div还是会往前iSpeed个px!如何解决??把div的left值放到else中  if()else()问题3: 不断点击按钮,移动出问题!!!! 定时器唯一!分析:每点击一次按钮就会开一个定时器.解决: 每次执行定时器的时候,先把前面的定时器关了var timer = null;clearInterval(timer);//防止多次点击创建多个定时器,每次创建前把前一个删掉timer = setInterval(function(){},30);问题4:如何控制方向让步长加或减if(oDiv.offsetLeft < iTarget) iSpeed为正数反之为负数2016/10/7  AJAX一:瀑布流:固定列:统一宽度不统一高度,分批加载,浮动布局非固定列: 列数会随着页面大小改变, 定位实现今天讨论的是固定列,宽度相等高度不等列的高度是0,通过ajax分批加载,动态填充到3个li,非按照顺序上来,而是按照高度来不能让li相差太多  一个ul里面包括四个li,每个li中包含div包含img和p  1.引入自定义的ajax.js库 2. getPics.php--接口,cpage=1--参数,请求第几页的数据,data是返回过来的数据 window.onload = function(){	ajax(‘get‘,‘getPics.php‘,‘cpage=1‘,function(data){		alert(data)//乱,可以到浏览器中的network中的preview	}); }  window.onload = function(){	var oUl = document.getElementById(‘ul1‘);	var aLi = oUl.getElementById(‘li‘);	var iLen = aLi.length;	var iPage = 1;	var isOpen = true;//默认门是开的	getList();	//初始化数据	function getList(){		ajax(‘get‘,‘getPics.php‘,‘cpage=‘+iPage,function(data){//返回的data是字符串需要解析成对象			var data = http://www.mamicode.com/JSON.parse(data);"; ");		for(var i=0; i<arr1.length; i++){			var arr2 = arr1[i].split(‘=‘);			if(key == arr2[0]){				return arr2[1];			}		}	}}