下午复习：
快捷尺寸：
原生:
clientWidth clientHeight: 包含的是content + padding区域
offsetWidth offsetHeight: 包含的是content + padding + border区域
clientLeft clientTop : 包含的元素的左边框宽度， 上边框的宽度
jquery:
content: $(dom).width() $(dom).height()
content + padding: $(dom).innerWidth() $(dom).innerHeight()
content + padding + border: $(dom).outerWidth() $(dom).outerHeight()
content + padding + border + margin: $(dom).outerWidth(true) $(dom).outerHeight(true)
元素的位置和距离：
定位父元素：dom.offsetParent
定位值：
dom.offsetLeft: 表示距离自己定位父元素的左边距离
dom.offsetTop: 表示距离自己定位父元素的上边距离
jquery中的定位值：
$(dom).position()
返回的是一个对象， 对象中包含dom的left定位值 和top定位值
jquery中的offset:
$(dom).offset()
返回一个对象， 对象中包含元素到页面的左边距离和上边距离
四、页面卷动值
页面卷动值指的是 在页面中，视口上面看不到的部分， （被卷起来的部分）
获取页面卷动的方式：
document.documentElement.scrollTop 新版本的chrome 火狐 IE 支持
document.body.scrollTop 老版本的chrome或者一些其他的浏览器支持的
五、IE中的透明度
高就浏览器中：
设置透明度： opacity[0-1]
IE中：
filter: alpha(opacity=[0~100])
六、onscroll事件
当页面卷动的时候会触发该事件
在一个页面中，视口是一定的，当页面的高度比视口高的时候，此时页面将出现滚动条，这个时候当我们改变滚动条位置的时候，会触发onscroll事件。
触发该事件的条件: 改变页面卷动值
触发该事件的条件有很多：
比如：鼠标滚轮滚动的时候，键盘上空格键， 键盘上的PgUp 和 PgDn， 键盘上的上下按键
绑定方式：
1 // 给docuemnt.body添加scroll事件 2 document.body.onscroll = function() { 3 console.log(123); 4 } |
当鼠标滚轮滚动的时候：
1 |
七、节流
onscroll事件是一个高频率的事件，如果将代码放入事件中，代码将会将会被执行很多次，很浪费，
为了避免代码执行多次，我们定义一个延时器，将要执行的代码放入延时器中，在频繁执行该事件的时候，先清除之前的延时器，再开启一个新的延时器，从而保证代码只执行一次。
1 // 获取元素 2 var $box = $("#box"); 3 4 // 定义一个定时器 5 var timer = null; 6 7 // 给document添加scroll事件 8 document.onscroll = function() { 9 console.log(123); 10 // console.log("页面滚动了"); 11 12 // 如果页面卷动值大于或者等于2000 让box出现 13 if (document.documentElement.scrollTop >= 2000) { 14 // console.log("box该出现了"); 15 16 17 // 清除之前的定时器 18 clearTimeout(timer); 19 20 // 赋值定时器 21 timer = setTimeout(function() { 22 $box.animate({opacity: 1}, 2000, function() { 23 console.log("出现了"); 24 }) 25 }, 200) 26 } 27 28 } |
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
从小白到就业，我们全权负责！
爱创课堂 言行一致、从不忽悠！
请把自己放心的交给我们吧！
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信：haomei0452，领取 前端资料、学费优惠 ！
