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];
}
}
}
}