事件、Window对象与正则表达式

YQi
111 阅读5分钟

滚动事件和加载事件

滚动事件

  • 元素大小和位置

  • 事件名：scroll

  • 监听整个页面滚动：

    <script>
    // 页面滚动事件
   scrollDom.addEventListener('scroll', function () {
   
 });
</script>

加载事件

  • 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

  • 事件名：load

  • 监听页面DOM加载完毕：

    <script>
document.addEventListener('DOMContentLoaded',function(){
   console.log('DOMContentLoaded 标签加载完毕就触发了');
 })
</script>

元素大小和位置

scroll家族

  1. 获取元素滚动的距离：dom.scrollTop dom.scrollLeft
  2. 页面的滚动距离 document.documentElement.scrollTop
  3. 整个可以滚动的区间的宽度：scrollWidth
  4. 整个可以滚动的区域的高度：scrollHeight
  5. scrollWidth和scrollHeight得到的是元素的内容宽高，不包含滚动条。

offset家族

  1. 获取元素的宽度 包含这滚动条 ： offsetWidth
  2. 获取元素的高度 包含这滚动条 ：offsetHeight
  3. 获取定位了的父元素的水平距离 左 ： offsetLeft
  4. 获取定位了的父元素的垂直距离 上 ： offsetTop

client家族

  1. 获取元素自身大小：包括自身设置的宽高、padding、border
  2. 获取容器的宽度（包含滚动的区域）： scollWidth
  3. 获取可视区域的宽度（包含滚动条）：offsetWidth
  4. 获取可视区域的宽度（不包含滚动条）： clientWidth
  5. 获取左侧滚动的距离 ：scrollLeft
  6. 获取和已经定位了的父级元素的左距离 ：offsetLeft
  7. 获取左边框的大小 ： clientLeft

Window对象

定时器-延时函数

  • JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

    语法：setTimeout(回调函数, 等待的毫秒数)

  • setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

    清除延时函数：

    let timer = setTimeout(回调函数, 等待的毫秒数)

    clearTimeout(timer)

  • 结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能。

  • 两种定时器对比：

    • setInterval 的特征是重复执行，首次执行会延时

    • setTimeout 的特征是延时执行，只执行 1 次

    • setTimeout 结合递归函数，能模拟 setInterval 重复执行

    • clearTimeout 清除由 setTimeout 创建的定时任务

    • 创建的定时器应该由clearInterval来清除

      创建的延迟器应该由clrearTimeout来清除

location对象

  • location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分。
  • 常用属性和方法：
    • href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转。
    • search 属性获取地址中携带的参数，符号 ？后面一串字符location.html?a=1&b=2
    • hash 属性获取地址中的啥希值，符号 # 后面一串字符 location.html#/index
    • reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

navigator对象

  • navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息。
  • 常用属性和方法：通过 userAgent 检测浏览器的版本及平台。

histroy对象

  • history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
  • 常用方法和属性：
    • 后退功能：back( )
    • 前进功能：forward( )
    • 前进后退功能：go(参数) 参数如果是1 前进1个页面，如果是-1 后退1个页面。

swiper 插件

插件

本地存储

  1. 数据存储在用户浏览器中。
  2. 设置、读取方便、甚至页面刷新不丢失数据。
  3. 容量较大，sessionStorage和localStorage约 5M 左右。

localStorage

  • 存储数据：localStorage.setItem(key, value)

  • 获取数据：localStorage.getItem(key)

  • 删除数据：localStorage.removeItem(key)

  • 清空数据：localStorage.clear()

    存储复杂数据类型存储

    • JSON.stringify(复杂数据类型)：将复杂数据转换成JSON字符串 存储本地存储中
    • JSON.parse(JSON字符串)：将JSON字符串转换成对象，取出时候使用

    字符串方法

    • 转大写：toUpperCase()
    • 转小写：toLowerCase()
    • 转数组：str.split('') 按照什么来分割你的字符串变成数组

sessionStorage

  • 以键值对的形式存储使用

  • 在同一个窗口(页面)下数据可以共享

  • 区别:

    sessionStorage 关闭页面后 数据就丢失 。

    localStorage 除非是用户主动删除 否则一直存在。

自定义属性

  • 获取自定义属性：getAttribute('属性名')

  • 设置自定义属性：setAttribute('属性名', '属性值')

  • 删除自定义属性：removeAttribute('属性名')

  • data-自定义属性：在DOM对象上一律以dataset对象方式获取

    h5建议 data- xxx

固有属性

  • 点语法的方式获取和设置 方便

  • 固有属性 比如 id href src

  • 获取固有属性

    console.log(a.href);

    console.log(a.id);

正则表达式

语法

  • 定义正则表达式语法：let 变量名 = /表达式/

  • 判断是否有符合规则的字符串：regObj.test(被检测的字符串)

    <script>
    const str = `外边距合并指的是，当两个垂直外边距相遇时`;
    //判断
    const reg = /合并/;
    console.log(reg.test(str)); // 有 返回true 没有返回false
</script>

元字符

  1. 边界符

    用来提示字符所处的位置，主要有两个字符。

1650014576151.png

  1. 量词

    用来设定某个模式出现的次数。

1650014720582.png

  1. 元字符

    • [ ] 里面加上 - 连字符， 表示一个范围。
    • [ ] 里面加上 ^ 取反符号 ，匹配除了范围以外的字符。
    • 字符类 . (点) 匹配除换行符之外的任何单个字符。

    后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

1650015837025.png

avatar
文章
阅读
粉丝