4.16-4.17 WebAPI编程

作者： 作者的头像   bubboo123 ,  2022-04-16 19:35:40 ,  所有人可见 ,  阅读 247

2


2

如何获取页面元素

传统方式

  1. document.getElementById('XX')
  2. document.getElementsByTagName('XX')

H5新增方式

  1. document.getElementsByClassName('XX')
  2. document.querySelector('选择器')
  3. document.querySelectorAll('选择器')

获取特殊元素

  1. body元素：document.body
  2. html元素：document.documentElement

注册事件(绑定事件)

  1. 传统注册方式:div.onclick =function(){};具有唯一性，最后注册的处理函数会覆盖前面的处理函数
  2. 方法监听注册方式:eventTarget.addEventListener(type,listener[,useCapture])没有唯一性，同一元素同一事件可以注册多个处理函数，按照注册顺序依次执行
    • type:事件类型字符串。注意这里不带on
    • listener:事件处理函数
    • useCapture:可选参数,是一个布尔值

删除事件(解绑事件)

  1. 传统注册方式:div.onclick = null;
  2. 方法监听注册方式:eventTarget.removeEventListener(type,listener[,useCapture])所以绑定时的函数不能是匿名函数

操作元素

改变元素内容

  1. element.innerText
  2. element.innerHTML 识别html标签同时保留空格和换行

常用元素的属性操作

  1. innerText、innerHTML改变元素内容
  2. src、href
  3. id、alt、title
  4. 表单元素的属性操作 type、value、checked、selected、disabled
  5. 样式属性操作：JS里面的样式采取驼峰命名法,比如backgroundColor
    element.style 设置行内样式
    element.className 给标签添加css样式类名

href和src区别

  1. 用途不同：href属性用于指定链接地址，通常用于超链接（例如<a>标签），而src属性用于指定资源路径，通常用于引入外部资源（例如<img>、<script>等标签）。
  2. 加载时机不同：使用href加载的资源是在页面渲染过程中同时加载并显示的，而使用src加载的资源则是在浏览器渲染到该资源位置时才会开始加载。
  3. 影响范围不同：href属性影响整个文档，因为它用于指定链接地址，可能导致浏览器跳转到另一个页面；而src属性仅影响包含该属性的元素，因为它只是用于指定该元素需要加载的外部资源。
    4.浏览器处理方式不同：当浏览器遇到href属性时，会发送一个HTTP请求，然后解析返回的数据，并在当前页面中打开新页面或者跳转到其他网站；而当浏览器遇到src属性时，会发送HTTP请求获取指定资源，并在相应的元素上显示这个资源。

自定义属性的操作

  1. 获取属性值
    element.属性 获取内置属性值
    element.getAttribute('属性') 主要获取自定义属性
  2. 设置属性值
    element.属性='值' 设置内置属性值
    element.setAttribute('属性','值') 主要设置自定义属性
  3. H5自定义属性
    H5规定自定义属性data-开头作为属性名并且赋值
    1. element.setAttribute(‘data-index’,2)
    2. element.getAttribute(‘data-index’)
    3. H5新增element.dataset.index方法获取属性(自定义的时候属性以data-开头才行)
  4. 删除属性element.removeAttribute('属性')

节点操作

获取元素通常使用两种方式:

1.利用DOM提供的方法获取 逻辑性不强,繁琐
2.利用结点层级关系获取 逻辑性强,但是兼容性较差

  1. 返回最近的一个父节点 node.parentNode
  2. 获取所有的子元素节点 node.children
  3. 没有兼容性问题又返回第一个子元素节点 node.children[0]
  4. 获取下一个兄弟元素节点 node.nextElementSibling
  5. 获取上一个兄弟元素节点 node.previousElementSibling

创建节点元素节点

  1. var li= document.createElement('li')
  2. 后面追加元素
    var ul= document.querySelector(‘ul’)
    ul.appendChild(li)
  3. 在指定元素前面添加元素
    ul.insertBefore(li , ul.children[0])
    (Element.prepend(XX) 方法是在父节点的第一个子节点之前插入)

备注:动态创建元素区别

  1. element.innerHTML 采用数组形式拼接创建多个元素效率更高
  2. document.createElement('li')创建多个元素效率稍微低一点

删除元素节点

node.removeChildren(ul.children[0])

让a标签的href为javascript:;可以阻止链接跳转。否则如果是#，点击之后链接后面会加多一个#

克隆节点

  1. node.cloneNode();浅拷贝,只复制标签不复制里面内容
  2. node.cloneNode(true);深拷贝,复制标签且赋值里面内容

DOM事件流

  1. onclick、attachEvent只能得到冒泡阶段
  2. eventTarget.addEventListener(type,listener[,useCapture])的第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(默认值),表示在事件冒泡阶段调用事件处理程序。

事件对象

  • 事件处理函数里传入的event
  • event.target 谁触发就指向谁
  • this指向谁绑定了事件

事件对象阻止默认行为
a.onclick=function(e){

`普通浏览器e.preventDefault();`
`低版本e.returnValue`
`没有兼容问题也能阻止默认行为,但会使得后面如果有代码就执行不到了`
    `return false;`

}

阻止事件冒泡的两种方式

  1. 标准写法:e.stopPropagation()
  2. 非标准ie6-8:e.cancelBubble= true;

事件委托:给父节点注册事件,事件触发时e.target就可以得到我们点击的对象

常见键盘事件

  1. onkeyup 事件触发时,文字已经落入文本框了
  2. onkeydown
  3. onkeypress 不识别功能键,区分大小写

三个事件的执行顺序:keydown–keypress–keyup

定时器

  1. window.setTimeout(回调函数,[延迟的毫秒数])
  2. window.clearTimeout(timeoutID)
  3. window.setInterval(回调函数,[间隔的毫秒数])
  4. window.clearInterval(intervalID)

同步和异步

异步任务一般有以下三种类型:

  1. 普通事件,如click、resize等
  2. 资源加载,如load、error等
  3. 定时器,包括setInterval、setTimeout等

offset系列

经常用于获取元素位置

  • 获得元素距离带有定位父亲的位置，否则以body为准。返回的数值不带单位
    element.offsetTop
    element.offsetLeft
  • 获得元素自身的大小（宽度高度），包含padding + border + width。不包括margin
    element.offsetWidth
    element.offsetHeight
  • element.offsetParent返回带有定位的父级元素（不一定要亲爸爸）

offset与style

  1. offset 只读，offsetWidth包含padding + border + width。获得数值无单位。可获得任意样式表中的样式值。

  2. style 可读写, style.width不包含padding + border。获得带有单位的字符串。只能得到行内样式表中的样式值。

    • 案例：模态框的移动
      666.png

    • 仿京东放大镜效果
      子绝父相，元素有定位才可以赋值left，top。其次子元素的left，top是相对于定位父亲来说的。
      3.jpg
      111.jpg
      7.png

client系列

元素可视区相关信息，**经常用于获取元素大小**
  1. element.clientTop :上边框大小
  2. element.clientLeft:左边框大小
  3. element.clientWidth:边框内部的宽度（即padding+content，不包括边框），返回数值不带单位。比较少用
  4. element.clientHeight:边框内部的高度

scroll系列

经常用于获取元素滚动距离
1. element.scrollTop: 返回元素被卷去的上侧距离,返回数值不带单位
2. element.scrollLeft: 返回元素被卷去的左侧距离, 返回数值不带单位
3. element.scrollHeight: 返回自身实际的高度, 不含边框, 返回数值不带单位
4. element.scrollWidth: 返回自身实际的宽度, 不含边框, 返回数值不带单位

页面滚动事件：document.addEventListener('scroll',function(){})

注意页面滚动距离是用👇：
页面被卷去的头部window.pageYOffset或 页面被卷去的左侧window.pageXOffset

滚动窗口至文档中的特定位置
window.scroll(x,y) 注意是window，不跟单位，只写数字（比如返回实现顶部功能）

mouseover和mouseenter区别，经典面试题

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
mouseenter 只会经过自身盒子触发。因为它没有冒泡概念。

动画原理

通过定时器setInterval()不断移动盒子位置

实现步骤：

  1. 获得盒子当前位置 div.OffsetLeft
  2. 让盒子在当前位置加上1个移动距离var timer= setInterval(fucntion(){ if(判断){ clearInterval(timer) }else 操作距离 },30)
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位，才能使用element.style.left

简单动画函数封装（obj目标对象，target目标位置，[回调函数]）

  • 如果有回调函数，那就在定时器结束的时候调用
  • 动画函数封装后放进js文件里比较好,js记得用load事件（即等元素都显示完了再执行js代码）
    456.jpg

缓动动画

  • 如果是往前走，那就向上取整
  • 如果是往回走，那就向下取整
    var step=(目标位置-现在位置) /10
    step>0 ? Math.ceil( step ): Math.floor( step )

PC端网页轮播图的实现

  1. 结构：ul里面放小li，li左浮动，且ul宽度要设置得足够大(比如600%)，否则小li放不进去就掉下来了。
  2. 动态生成小圆圈：小圆圈个数和图片张数一致
    先得到ul里面图片的张数ul.children.length（图片是放进li里的，所以就是li的个数），然后利用循环动态生成小圆圈（小圆圈放进ol里）。创建节点var li=createElement('li')，插入节点ol.appendChild(li)
  3. 右侧按钮无缝滚动：把ul的第一个li克隆一份，放到ul的最后面，当图片滚动到克隆的最后一张图片时，让ul快速地、不做动画地跳到最左侧left为0
    888.jpg
  4. 自动播放（定时器）：可以直接手动调用右侧按钮点击事件 element.click()，且记得mouseenter时停止定时器，mouseleave时开启定时器

节流阀以及逻辑中断应用

目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数以及一个变量来控制，锁住和解锁函数
  • if(flag){flag=false;do something} 关闭水龙头
  • 利用回调函数 动画执行完毕 flag=true;

触屏touch事件

  1. touchstart 当手指触摸到一个DOM元素时触发
  2. touchmove 当手指在一个DOM元素上滑动时触发
  3. touchend 当手指从一个DOM元素上移开时触发

触摸事件对象

  1. touches–所有的触摸点（所有的手指信息）
  2. targetTouches–目标触摸点（手指在目标物体上的信息，比如有几根…）
  3. changedTouches–发生变化的触摸点(发生变化的手指信息，比如几根手指发生了变化)
targetTouches[0]代表第一根，targetTouches[0].pageX和pageY可以得到手指的坐标值
移动端拖动元素 要阻止默认行为e.preventDefault();

移动端轮播图的实现

  1. 无缝滚动：第一张前面复制一份最后一张，最后一张后面复制一份第一张。
  2. 移动：
    var translatex= -index *w
    ul.style.transform= 'translateX('+ translatex+ 'px)'
  3. 滑动过渡：ul.style.transition='all .3s'

classList属性

HTML新增属性，返回元素的类名。用于在元素中添加，移除及切换CSS类。
  1. 添加类：后面追加，不是覆盖
    element.classList.add(’类名’)
  2. 删除类：
    element.classList.remove(’类名’)
  3. 切换类：自动判断有没有某个类，没有就加上，有就去掉。比如实现开关灯功能
    element.classList.toggle(’类名’)
    案例：跟以前干掉别人留下自己做法不同
    999.jpg

利用fastclick插件解决移动端点击延迟问题

引用lib/fatclick.js文件，按照提示复制介绍那段代码进来

Swiper插件 触摸滑动插件

官方网站有教程

  1. 引用css，js文件
  2. 打开对应你想要的demo网页，复制html结构（不要更改类名）和相关css样式进来
  3. 把网页源代码里的script标签内的js代码写到你的index.js内

常用开发框架

Bootstrap,Vue,React,Angular等

本地存储 H5

本地存储的特性：

  • 数据存储在用户浏览器中
  • 设置、读取方便、甚至页面刷新不会丢失数据
  • 容量较大，sessionStorage约5M、localStorage约20M
  • 只能存储字符串，可以将对象JSON.stringify()编码后再存储

window.sessionStorage

  1. 生命周期为关闭浏览器时失效
  2. 在同一个窗口（页面）下数据可以分享
  3. 以键值对的形式存储使用

用法：

  1. 存储数据：
    sessionStorage.setItem(key,value);
  2. 获取数据：
    sessionStorage.getItem(key);
  3. 删除数据：
    sessionStorage.removeItem(key);
  4. 删除所有数据：
    sessionStorage.clear();

window.localStorage

  1. 生命周期永久生效，除非手动删除，否则关闭页面也会存在
  2. 可以多窗口(页面)共享(同一个浏览器的情况下)
  3. 以键值对的形式存储使用(和sessionStorage一样)

用法：

  1. 存储数据：
    localStorage.setItem(key,value);
  2. 获取数据：
    localStorage.getItem(key);
  3. 删除数据：
    localStorage.removeItem(key);
  4. 删除所有数据：
    localStorage.clear();
记住用户名案例：

168.jpg

0 评论