【JavaScript】JavaScript开篇基础（7）

1.❤️❤️前言~🥳🎉🎉🎉

2.元素偏移量（offset） 

offset系列相关属性可以动态获取元素的位置、大小等属性

注：获取元素是距离带有定位的父级元素的位置；获取元素大小返回值不带单位！

element.offsetParent    //返回该元素带有定位的父级；若无定位父级返回body
element.offsetTop/Left  //返回该元素距离带定位父级的上/左距离；不带单位
element.offsetWidth/Height  //返回包括padding、boder以及内容区的宽度；不带单位

注意我们只能用offsetTop/Left得到距离，不能用它改变距离。

改变距离我们用style样式表

3.元素可视区域（client） 

client系列来获取元素可视区的相关信息，可以动态得到改元素边框与元素大小；

注：返回值不带单位！

element.clientTop/Left                //返回元素上边框或左边框
element.clientWidth/Height            //返回包括自身宽/高度以及padding的值，不含边框

注意其也是只能得到距离，不能改变。 

 4.元素滚动（scroll）

scroll系列来动态获取元素大小，滚动距离

注：返回值不带单位！

element.scrollTop/Left        //返回被卷去的上/左侧距离
element.scrollWidth/Height    //返回自身实际宽/高度（不含边框），如果里面的内容超出本身元素的宽度或高度，得出的是里面内容的宽度或高度。
window.pageYOffset            //获取页面被卷去的头部高度
window.pageXOffset            //获取页面被卷去的左侧高度

5.立即执行函数

 //第一种
(function(实参) {函数体})   (形参);
//第二种
(function(实参){函数体}(形参))

作用：创建一个的作用域，避免了命名冲突问题

立即执行函数：不需要调用，立马能够自己执行函数

里面所有变量为局部变量

6.click直接调用

对于一般的click我们是要鼠标点击才能触发，除此之外我们还能直接代码调用函数

window.click()就能直接触发鼠标事件

其他事件如mouseover等也类似差不多的逻辑

7.滚动窗口至文档的特定位置 

window.scroll(x,y)可以实现该功能，一般我们把x都设置为0，y依照我们想要的去设置不同数值。

8.本地存储

特点：

（1）数据存储在用户浏览器中

（2）设置、读取方便，甚至页面刷新不丢失数据

分为sessionStorage和localStorage

sessionStorage

特点：

        （1）生命周期为关闭浏览器窗口，关闭该窗口时数据就被销毁了，刷新不会销毁

        （2）该数据只能在该窗口用

        （3）以键值对形式存储 

​
//存储
sessionStorage.setItem(key,value);
//key:键；自定义
//value:值；输入的值

//获取对应的key
sessionStorage.getItem(key);
//删除对应的key
sessionStorage.removeItem(key);
//删除全部
sessionStorage.clear()

​

  localStorage

特点：

        （1）生命周期永久生效；除非主动删除；即使关闭页面也存在；

        （2）只要是在同一个游览器内，就都可以使用，游览器中各个窗口都可以使用它

        （3）以键值对的形式存储

注：语法与sessionStorage一致