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();//五天后失效,注意时间必须是字符串格式 //如何解决存储特殊值 \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 = 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]; } } } }
时间: 2024-10-04 15:25:11