Javascript高级技术 特效系列

Javascript高级技术

元素偏移量offset

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素 如果父级没有定位则返回body
element.offsetTop	返回元素相对带有定位都元素上方的偏移
element.offsetLeft	返回元素相对带有定位都元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区域的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区域的高度，返回数值不带单位

style和offset的区别

offset	style
offset可以得到任意样式表中的值	style只能获得行内样式表的样式值
offset获取到的值是没有单位的	style.width拿到的值有单位
offset Width包含padding+border+width	style.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 )
})(2，3)   //输出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来标记是否可以使用