国庆七天收获--

1.遇到域要分两步:第一预解析,第二逐行读代码


2.变量和属性本质是一个东西,不过变量是自由的,而属性是属于某个对象的,
同理得出, 函数也是自由自在的不属于谁, 而方法也是属于某个对象的!

3.
js中,this 谁发生事件就是谁!

全局的变量和函数,默认都是window的.

object是空白对象.

var obj = new Object();

工厂方式构造对象:
1.原料: var obj = new Object()
2.加工: 添加属性和方法
3.出厂: return 对象出去.

工厂方式构造对象缺点:
1. 没有new
2.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. onmousedown
 1.2.移动:    document.onmousemove    oDiv.style.left = 鼠标左边-dealtaX即可
 1.3.到达目的地 document.onmouseup    document.onmousemove = onmouseup = 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中
 
 鼠标滚轮事件:  onmousewheel
 滚轮向上div变大,反之变小
 ie/chrome: onmousewheel ; 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();//五天后失效,注意时间必须是字符串格式
 
 //如何解决存储特殊值 
中文等? 内容最好编码存放  encodeURI()和decodeURI()
 document.cookie = 'username=
你好zhangsan;expires='+oDate.toGMTString(); //会出问题
 document.cookie = 'username='+encodeURI('
你好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 = JSON.parse(data);
			if(!data.length){
				return;
			}
			for(var i = 0; i<data.length; i++){
				//获取高度最短的li的下标
				var _minIndex = getShortLi();
				var oDiv = document.createElement('div');
				var oImg = document.createElement('img');
				oImg.src = data[i].preview;//json对象直接点访问
				oImg.style.width = '225px'//随意设置
				oImg.style.height = data[i].height * (225 / data[i].width)+'px';//高度也要按照缩放比例
				var oP = document.createElement('p');
				oP.innerHTML = data[i].title;
				oDiv.appendChild(oImg);
				oDiv.appendChild(oP);
				aLi[_minIndex].appendChild(oDiv);				
			}
		});	
	}
	
	window.onsrcoll = function(){
		var _index = getShortLi();
		var oLi = aLi[_index];
		var scrollTop = document.documentElement.scrollTop || document.boby.scrollTop;//获取滚动条的滚动距离
		var visiualHeight = document.documentElement.clientHeight;//可视区高度
		if(getTop(oLi) + oLi.offsetHeight < scrollTop + visiualHeight){
			if(isOpen){
			  isOpen = false;
			  iPage++;
			  getList();
			  isOpen = true;//或者在getList()for循环结束后设置为true
			}
		}		
	}
	
	function getShortLi(){
		var minIndex = 0;
		var ih = aLi[minIndex].offsetHeight;
		for(var i=1; i<iLen; i++){
			if(aLi[i].offsetHeight < ih){
				minIndex = i;
				ih = aLi[minIndex].offsetHeight;
			}
		}
		return minIndex;
	}
	
	function getTop(obj){
		var iTop = 0;
		while(obj){
			iTop += obj.offsetTop;
			obj = obj.offsetParent;
		}
		return iTop;
	}
	
	
 }
 
 //如何解决图片加载速度小于for循环的速度,导致图片的填充出现有的地方很长
 //有的地方很短!
 
 答案: 让图片加载完成后再去找最短的index,for循环改成递归!
 
 或者让后端传递图片高度和宽度可以
oImg.style.width = '225px'//随意设置
oImg.style.height = data[i].height * (225 / data[i].width)+'px';//高度也要按照缩放比例


问题3: 何时去加载下一批数据?  最短一列li底部是否进入可视区!!!
 如果: li的底部距离到顶部的距离大于可视区底部到顶部的距离,未进入可视区不用加载
 反之:li的底部到顶部的距离小于可视区底部到顶部的距离,进入了加载 
 
 li的top值+li自身的高度 <　滚动条滚动高　+ 可视区高度  需要加载
 
 
 问题4:拉一下滚动条会加载很多页面,需求是拉一次加载一页
 答案:标识位
 设置一个flag  
 var b = true;
 到ATM的时候设置为false,取完钱(事情做完了)改成true
 
 if(b){//只有没锁门才能进去取钱
	b = false;//一旦进去立刻锁门让别的人进不来
	iPage ++;
	getList();//取钱,记得取完钱把b改成true,把门打开让别人也能取钱
 }
 
 问题5:如果数据加载完了,拖动滚动条也不能加载! 非空判断很重要
 在getList();要做判断
 if(!data.length){
	return;
 }
 
 
 
四:留言本项目
用户表 留言表
引入库: ajax.js 和 guestbook.js

1 验证用户名信息 在php中有个方法叫做 verifyUserName()
光标离开后通过ajax发送用户名到后端
window.onload = function(){
	var oUsername = document.getElementById('username');
	var oUsernameMsg = document.getElementById('msg');//验证用户名提示信息...
	var  oUser = document.getElementById('user');//欢迎某某的栏
	var  oUserInfo = document.getElementById('userInfo')//欢迎某某的栏的span标签
	var oReg = document.getElementById('reg');//注册模块
	var oLogin = document.getElementById('login');//登录模块
	
	//0 初始化
	updateUserStatus();
	function updateUserStatus(){
		var uid = getCookie('uid');
		var user = getCookie('user');
		if(uid){ //登录状态
			oUser.style.dispay = 'block';
			oUserInfo.innerHTML = user;
			oReg.style.display = 'none';
			oLogin.style.display = 'none';
		}else{
			oUser.style.display = 'none';
			oUserInfo.innerHTML = '';
			oReg.style.display = 'block';
			oLogin.style.display = 'block';			
		}
	
	}
	
	
	//1.验证用户名
	oUsername.onblur = function(){
		ajax('get','guestbook/index.php','m=index&a=verifyUserName='+this.value,function(data){
			//alert(data);或者network中找到XHR点击请求再找到preview 格式化数据
			var data = JSON.parse(data);//返回的是json字符串解析成对象
			oUsernameMsg.innerHTML = data.message;//message是json对象的key
			if(data.code){//如果是错误信息就把提示信息变成红色
				oUsernameMsg.style.color = 'red';
			}else{
				oUsernameMsg.style.color = 'green';
			}
		});
	}
	
	//2.注册 
	var oPassword = document.getElementById('password');
	var oRegBtn = document.getElementById('btnReg');
	oRegBtn.onclick = function(){
		ajax('post','guestbook/index.php','m=index&a=reg&username='+encodeURI(oUsername.value)+'&password='+oPassword.value,function(data){
			var data = JSON.parse(data); //alert(data.message);
		});
	}
	
	//3.登录
	var oUsername1 = document.getElementById('username1');
	var oPassword1 = document.getElementById('password1');
	var oLoginBtn = document.getElementById('btnLogin');
	oLoginBtn.onclick = function(){
		ajax('post','guestbook/index.php','m=index&a=reg&username='+encodeURI(oUsername1.value)+'&password='+oPassword1.value,function(data){
			var data = JSON.parse(data); //alert(data.message);
			if(!data.code){//如果登录成功
			  updateUserStatus();
			}			
		});
	}
	
	//4.用户退出  通过ajax
	var oLogoutBtn = document.getElementById('btnLogout');
	oLoginBtn.onclick = function(){
		ajax('post','guestbook/index.php','m=index&a=logout',function(data){
			var data = JSON.parse(data); //alert(data.message);
			if(!data.code){//如果退出成功
			  updateUserStatus();
			}
		});
	}	
	
	//5.获取cookie值
	function getCookie(key){
		var arr1 = document.cookie.split("; ");
		for(var i=0; i<arr1.length; i++){
			var arr2 = arr1[i].split('=');
			if(key == arr2[0]){
				return arr2[1];
			}
		}
	}
}