Javascript高级技术 特效系列

Javascript高级技术

元素偏移量offset
offset系列属性作用
element.offsetParent返回作为该元素带有定位的父级元素 如果父级没有定位则返回body
element.offsetTop返回元素相对带有定位都元素上方的偏移
element.offsetLeft返回元素相对带有定位都元素左边框的偏移
element.offsetWidth返回自身包括padding、边框、内容区域的宽度,返回数值不带单位
element.offsetHeight返回自身包括padding、边框、内容区域的高度,返回数值不带单位
style和offset的区别
offsetstyle
offset可以得到任意样式表中的值style只能获得行内样式表的样式值
offset获取到的值是没有单位的style.width拿到的值有单位
offset Width包含padding+border+widthstyle.width活得不包含padding和border的值
如果获取元素的大小,用offset合适修改元素的值,使用style合适
元素可视区域client
client系列属性作用
element.clientTop返回元素上边框的大小
element.clientLeft返回元素左边框的大小
element.clientWidth返回自身包括padding、内容区域不包含边框的宽度,返回数值不带单位
element.clientHeight返回自身包括padding、内容区域不包含边框的高度,返回数值不带单位
立即执行函数(不需要调用,立即执行)
//第一种写法
(function(){})()

(function(){
    console.log("你好i")
})()

//参数传递
(function(a,b){
    console.log( a + b )
})(23)   //输出5


//第二种写法
(function(){}())

作用:创建了一个独立的作用域,避免了命名冲突的问题

scroll系列
scroll系列属性作用
element.scrollTop返回元素卷上去的大小
element.scrollLeft返回元素卷到左边的大小
element.scrollWidth返回盒子的实际宽度
element.scrollHeight返回盒子的实际高度

页面被卷上去的距离获取:window.pageYOffset

//页面滚动事件
document.addEventListener("scroll",function(){
    //事件处理
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdVAvxCD-1590312120788)(C:\Users\小胡同学\AppData\Roaming\Typora\typora-user-images\image-20200524150804697.png)]

mouseover和mouseenter的区别
-区别
mouseover进入自身盒子会触发,进入子盒子也会触发
mouseenter进入自身盒子会触发(禁止了冒泡)
手动调用事件
element.click();  		//在方法中手动调用点击事件
节流阀

作用:方式连续点击,连续触发事件,可以通过一个flag来标记是否可以使用

滚动到页面的某个距离window.scroll(x,y) —x和y不带单位

事件,可以通过一个flag来标记是否可以使用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值