JavaScript高级特效

你的名字 2024-04-03 10:02 90阅读 0赞

## Javascript高级技术 ##

元素偏移量offset

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

style和offset的区别

> offset tyle  
> 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系列

<table> 
 <thead> 
  <tr> 
   <th>scroll系列属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element.scrollTop</td> 
   <td>返回元素卷上去的大小</td> 
  </tr> 
  <tr> 
   <td>element.scrollLeft</td> 
   <td>返回元素卷到左边的大小</td> 
  </tr> 
  <tr> 
   <td>element.scrollWidth</td> 
   <td>返回盒子的实际宽度</td> 
  </tr> 
  <tr> 
   <td>element.scrollHeight</td> 
   <td>返回盒子的实际高度</td> 
  </tr> 
 </tbody> 
</table>

> 页面被卷上去的距离获取：`window.pageYOffset`

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

mouseover和mouseenter的区别

> <table> 
>  <thead> 
>   <tr> 
>    <th>-</th> 
>    <th>区别</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>mouseover</td> 
>    <td>进入自身盒子会触发，进入子盒子也会触发</td> 
>   </tr> 
>   <tr> 
>    <td>mouseenter</td> 
>    <td>进入自身盒子会触发（禁止了冒泡）</td> 
>   </tr> 
>  </tbody> 
> </table>

手动调用事件

element.click();  		//在方法中手动调用点击事件

节流阀

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

> **滚动到页面的某个距离**：`window.scroll(x,y)` —x和y不带单位
> 
> 事件，可以通过一个flag来标记是否可以使用