版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
web和响应5（4班级：前端2期讲师：日期：2016730E-mail: 一、BootStrap简 BootStrap概 整体感 BootStrap使用方 二、栅格系 三、深 3.1 DOM0级绑 DOM2级绑 低版本IE的绑 经典..............................................................................................................................................................mouseenter和mouseover的区 四、对象 通用对象属性和方 IE6、7、8的兼容问 一、BootStrap简今天的主要任务就是BootStrap，如果有时间，我们补补流BootStrap概 （就是模仿Twiiter的），是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。Bootstrap的哲学：就是你做一个，能很快做完，并且它已经是响应式的了BootStrap中文网 BootStrapLessSass整体感BootStrap342。APIUILess、Sass<!DOCTYPE<!DOCTYPE<html 4<metacharset="utf-5<metahttp-patible"6<metaname="viewport"content="width=device-width,initial-78<title>基本骨架<linkhref="css/bootstrap.min.css"9<!--[ifltIE<script<script<h1><scriptsrc="js/jquery-<script用response.min.js，就是让低版本浏览器认识查询。然后就可以把手册里面的结构进来，不需要自己写一行语句，就已经成为了页面，并且还是响应式的BootStrapBoot的页面比较简单、normal、professional、fashion，也是时行的效果BootStrap使用方CSS3Boot的建站：此时我们就需 标准padding、margin5）标准阴影6）css的文件，此时就非常好用，什么都是自BootStrapBoot二、栅格系BootStrap提出了栅格系统的概念。把整个网页看成了121/12候占几列，极幕的时候占几列，此时响应式就实现了。12.container34.container-fluid大屏幕col-lg-中屏幕col-幕col- 幕col-BootStrap1123<divclass="container"><divclass="row"><divclass="gridcol-lg-2col-md-6">1</div>表明自己在某个屏幕下占几456<divclass="gridcol-lg-2col-md-6">2</div>，表明自己在某个屏幕下占几<divclass="gridcol-lg-2col-md-6">3</div>，表明自己在某个屏幕下占几<divclass="gridcol-lg-6col-md-6">4</div>，表明自己在某个屏幕下占几781<div1<div2<divclass="gridcol-lg-3<divclass="gridcol-lg-3col-lg-offset-4<divclass="gridcol-lg-4col-lg-offset-51<div1<div2<divclass="gridcol-lg-8col-lg-offset-2col-md-8col-md-offset-3row1211<div2<divclass="gridcol-lg-3<div4<divclass="gridcol-lg-9"5<divclass="gridcol-lg-3"678<divclass="gridcol-lg-9 /三、深3.1“流”描述的是页面上各个元素接收的顺序我们为了描述的顺序，特意人为规定了两个阶段：捕获阶段capturingpahse、冒泡阶段bubblingphase。点击页面上的一个元素，在哪个阶段触发，这取决于添加的方法。DOM0级绑DOM分为级别，DOM0级、1级、2级、3级，是不同的标准，标准一直在升级 oDiv.onclick=}，通过实验，我们发现，这种DOM0级添加方法，只能冒泡过程。的捕获阶段，没有成功，这这里需要注IE9、Chrome会冒window对象IE6、7、8仅仅冒泡对象也就是说在低级浏览器中 冒泡 之后，就不再继续冒泡到window对象了。 另外，用这种方法绑定 ，this指的是触发这 的元素，没有任何的浏览器兼容问题 DOM0级还有一种写法，直接 写 里面，工作中不许用 11<divid="box1"onclick="javascript:alert('23<divid="box2"onclick="javascript:alert('<divid="box3"onclick="javascript:alert('4567写在HTML里面代码耦合性很强，三层没有完全分离，工作中不用的这种写法，也是冒泡阶段。DOM0，同一个元素不能有两个同，比 box1.onclick=2 44 box1.onclick=6 以JS代码后出现的为准，它会覆盖先写的函数。所以点击box1弹出嘻嘻1）冒泡阶this指的是IE6、7、8冒泡到 高级浏览器冒泡到同名的会覆DOM2级绑DOM1级规范中，没有对进行改动DOM2级做了新的规范，不用on***来绑定了，而是使用一个方 它接受三个参数：什么、函数、是否捕获阶段 2 3个参数：布尔值(usecapture)，true2名不用写 click、mouseover、111box1.addEventListener("click",23},第三个参数是true，表示box1的捕获阶段的单击11<div2<div3<div456711box2.addEventListener("click",23},45box1.onclick=67}89 解释：box2.addEventListener(,true)box2的捕获阶段；box1.onclick冒泡box2.addEventListener(,false)box2的冒泡阶段。我们来看看this是什么？就是触发函数的这个元addEventListener可以重复添加相同名的11box1.addEventListener("click",23},455box1.addEventListener("click",67},我们给box1的绑定了两个冒泡阶段的，不会覆盖，两个的函数都会执行，按照代码执行顺序。特别注意的是对于能到的最深一个元素到了自己的身上的时候不一定先执行自己的捕获阶段，DOM2级总结this指的是低版本IE的绑IE是个奇葩，但是现在20%的用户在使用IE8，我们祝愿他们健康 没有第三个参数，也就是说，不能选择捕获、冒泡。只能冒泡也就是说，IE6、7、8只能冒泡，没有任何能够让IE6、7、8到捕获阶段11box1.attachEvent("onclick",23第二个参数，就是处理函数没有第三个参数，只能冒泡。所以和on***写法一样低版本IE的attachEvent：处理函数里面的this，不是触发的这个元素，而是window对11box1.attachEvent("onclick",2alert(this=== 3同一个名的多个，会反着执行11box1.attachEvent("onclick",2345box1.attachEvent("onclick",6789box1.attachEvent("onclick", 1）IE6、7、8addEventListener()attachEvent()2）attachEvent只有两个参数，不能选择添加到什么阶段，只能冒泡3）名有on经经典得到计算后样 putedStyle运动框架animateaddEvent绑定 function234}else5obj.attachEvent("on"+6789obj["on"+eventtype]=}11流是先下后上，先捕获后冒泡。但是不同的添加的方式，决定了能够那一部分 的这个元 仅仅冒泡 jQuery中用的就是我们的DOM2级，内部也有。jQuery同名不会被覆盖，并且修正了IE6、7、8的顺序问题。jQuery无论用何种API添加，on、bind、click()，都是添加到冒泡阶段。同名不覆盖，先执行先写的，然后执行后写的，IE没有顺序颠倒问题了。并且修正了this。跪下，叫！mouseentermouseover的区jQuery的鼠标进入有两个，mouseover、mouseenter一次大盒子的mouseover，因为从小盒子的mouseover又冒泡上来了。即：mouseenter不继续冒泡，mouseover继续冒泡再即：mouseenterevent.bubblesppp原生JS中，IE9开始也提供了onmouseenter，和jQuery一样，这个不继续冒泡四、对象任何的处理函数，我们的浏览器、JS引擎会默认往里面传一个实参，就是对象event oDiv.onclick=2 所有这次的细节，都被封装到了这个event对象里面。 Y就是这次点击的位置。通用对象属性和方event.typeevent.typeonevent.targetevent.currentTarget返回自己，thisevent.currentTarget oDiv.onmouseover=2 stopPropagation()停止流 组织了继续，能够捕获，也能够冒泡preventDefault()默认 比如touch的时候，很多默认；还有 ，有默认滚动11.onmousemove=2h1.innerHTML当前鼠标坐标为X+","+ event.X表示触发的时候，鼠标的x位置（相对于视口IE6、7、8的兼容event44.onmousemove=5h1.innerHTML当前鼠标坐标为X+","+ 1010//.onmousemove=event=event||h1.innerHTML当前鼠标坐标为X+","+14jQuery帮我们摆平了这个事情，jQuery任何，都默认有event=event||window.event;语句varx= IE中有很多方法的名字和高级浏览器不一样，比如默认 event.returnValue= ， 3 5event.retu
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论