13前端基本功网页特效301前端基本功js第十天

《13前端基本功网页特效301前端基本功js第十天》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、前端基本功—javascript第十天目录目录21.2复习31.3client家族31.3.1检测屏幕宽度(可视区域)41.3.2window.onresize改变窗口事件51.4检测屏幕宽度(分辨率)51.5简单冒泡机制61.5.1阻止冒泡的方法71.5.2小案例点击空白处隐藏盒子71.5.3判断当前对象81.5.4选中之后，弹出层111.5.5获得用户选择内容11复习1.window-document2.document.titledocument.headdocument.body3.document.documentElement(约等于doc

2、ument.html)4.scrollTop被卷去的头部scrollLeft封装自己的函数5.scrollTo(x,y)去往页面的x和y坐标的位置6.window.scrollTo(x,y)7.window.onscroll=fucntion(){fun();}fun()function(){iffss}8.JSONjs对象表示法数据传输9.varjson={}对象vararr=[];数组varnum;变量10.varjson={width:“100px”,height:100}声明的方法11.json.height100使用1.1client家族cl

3、ient可视区域offsetWidth:width+padding+borderclientWidth：width+padding不包含borderscrollWidth:大小是内容的大小1.1.1检测屏幕宽度(可视区域)ie9及其以上的版本window.innerWidth标准模式document.documentElement.clientWidth怪异模式document.body.clientWidth自己封装一个返回可视区宽度和高度的函数。1.1.1window.onresize改变窗口事件昨天window.onscroll=function

4、(){}屏幕滚动事件今天window.onresize=function(){}窗口改变事件onresize事件会在窗口或框架被调整大小时发生要求：当我们的页面宽度大于960像素的时候页面颜色是红色当我们的页面宽度大于640小于960页面的颜色是绿色剩下的颜色是蓝色functionfun(){语句}fun是函数体的意思fun()调用函数的意思functionfun(){return3;}console.log(fun);//返回函数体functionfun(){retrun3}console.log(fun());//调用函数3返回的是结果fun();

5、window.onresize=3window.onresize=functionfun(){retrun3}1.2检测屏幕宽度(分辨率)clientWidth返回的是可视区大小浏览器内部的大小window.screen.width返回的是我们电脑的分辨率跟浏览器没有关系1.1简单冒泡机制事件冒泡:当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。顺序E6.0:div->body->html->document其他浏览器:d

6、iv->body->html->document->window不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload1.1.1阻止冒泡的方法标准浏览器和ie浏览器w3c的方法是event.stopPropagation()proPagation传播传递IE则是使用event.cancelBubble=truebubble冒泡泡泡cancel取消兼容的写法：1if(event&&event.stopPropagation)2{3event.stopPropagation();//w3c标准4}5else6{7event.c

7、ancelBubble=true;//ie678ie浏览器8}1.1.2小案例点击空白处隐藏盒子这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。原理：点击自己不算(怎么证明我是我点击的这个对象id正好和自己一样)点击空白处就是点击document1.1.1判断当前对象火狐谷歌等event.target.idie678event.srcElement.id兼容性写法：vartargetId=event.target?event.target.id:event.srcElement.id;targetId!="show"代码：1

8、CTYPEhtml>234