技术文章 | Technical articles

JavaScript进阶课堂笔记 第三天(下午)

下午复习:

快捷尺寸:

原生:

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()

返回的是一个对象, 对象中包含domleft定位值 和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, 键盘上的上下按键

 

绑定方式:

// docuemnt.body添加scroll事件

document.body.onscroll = function() {

console.log(123);

}

 

当鼠标滚轮滚动的时候:

1.png

 

七、节流

onscroll事件是一个高频率的事件,如果将代码放入事件中,代码将会将会被执行很多次,很浪费,

为了避免代码执行多次,我们定义一个延时器,将要执行的代码放入延时器中,在频繁执行该事件的时候,先清除之前的延时器,再开启一个新的延时器,从而保证代码只执行一次。

 

// 获取元素

var $box = $("#box");

// 定义一个定时器

var timer = null;

// document添加scroll事件

document.onscroll = function() {

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,领取 前端资料、学费优惠 !



上一篇文章: JavaScript进阶课堂笔记 第三天(上午)
下一篇文章: JavaScript进阶课堂笔记 第四天(上午)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>