webAPI介绍

最新推荐文章于 2023-03-11 17:04:32 发布

哈虎a

最新推荐文章于 2023-03-11 17:04:32 发布

阅读量2.8k

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_58626552/article/details/123529943

版权

API和webAPI

API（Application Programming Interface）应用程序编程接口（暴露出来的工具）。
webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM）
DOM：操作页面元素的方法 document object model
BOM：操作浏览器的

DOM介绍

DOM的概念

概念：文档对象模型。

文档：html文件
对象：属性和方法
模型：（树）

文档树

文档树：浏览器在加载html文件时，会把文档、文档中的标签、属性、文本、注释转换成对象，然后按照标签的关系（父子、兄弟、祖孙）以树状结构存储到内存中。

文档树中的对象，也被称为节点对象 。

节点对象的分类：文档（document） 、元素（标签转换的对象） 、文本、属性、注释

学DOM要干什么

操作页面元素

获取，注册事件，操作

获取元素【DOM提供方法】
给元素注册事件
操作元素的属性
动态操作元素（创建、追加、删除、克隆等）

获取元素

根据id值获取单个元素

语法： document.getElementById(‘id值’);

代码：

  <button id="btn">按钮1</button>
  <button id="btn">按钮2</button>
  <script>
    // 根据id获取单个元素，返回一个元素
    var btn = document.getElementById('btn');
    // dir可以打印出对象中的属性和方法
    console.dir(btn);
    console.log(btn);
    // 细节：若页面上有相同的id值的标签时，在获取时，获取的是id值第一次出现的标签。
  </script>

根据标签名获取一组元素

语法：document.getElementsByTagName(‘标签名’);

代码：

  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    // 需求：获取所有按钮
    // 根据标签名获取一组元素，返回的是一个伪数组
    var btns = document.getElementsByTagName('button');
    console.log(btns);

    // 数组和伪数组的区别？
    // 相同：都有索引和长度（length）
    // 不同点：伪数组不能够调用真正数组中内置的方法（push、pop、sort...）
  </script>

选择器

根据选择器获取单个元素

语法：document.querySelector(‘选择器’);

根据选择器获取一组元素

语法：document.querySelectorAll(‘选择器’);

代码：

  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
  <script>
    // 根据选择器获取当个元素，若有多个同样选择器的标签，获取的将会是第一次出现的标签
    var btn = document.querySelector('.btn');
    console.log(btn);

    // 根据选择器获取一组元素
    var btns = document.querySelectorAll('.btn');
    console.log(btns);
  </script>

注意：根据选择器获取元素在IE8以下有兼容性问题。

案例：

1. 根据id值获取按钮
2. 根据标签名获取一组li
3. 缩小范围获取元素

事件基础

什么是事件

用户做的动作就是事件

用户和网页之间的交互行为（鼠标点击、鼠标进入、鼠标离开、键盘按下、键盘弹起、手指按压、手指移动等等）

事件三要素

事件源：被触发的元素，比如点击的按钮
事件类型：如何触发的事件，比如点击按钮 onclick
事件处理程序：事件发生后的结果。

给元素注册事件

语法：事件源.事件类型 = 事件处理程序;
- 事件源→ 触发的那个元素
- 事件类型→ 点击 onclick
- 事件处理程序→ 函数

代码：

 // 获取按钮元素
 var btn = document.getElementById('btn');
 btn.onclick = function(){
   // 函数体中的代码，就是事件发生后要执行的程序
   alert('燃烧我的卡路里');
 };

 // 事件处理程序的本质是什么？
 // ① onclick本质上就是事件源这个对象中的某一个键值对而已。默认值是null，表示没有注册事件
 // ② 给事件源注册onclick事件，其实本质上就是给onclick赋值函数，所以onclick是事件源的一个方法而已
 // ③ 点击按钮时，浏览器自动调用了btn.onclick();

事件处理程序中的this

事件处理程序中的this指向事件源

 // 获取按钮元素
 var btn3 = document.getElementById('btn');
 btn3.onclick = function(){
   // 函数体中的代码，就是事件发生后要执行的程序
   // 关键字：this，代表事件源
   console.log(this);
 }

取消a标签默认行为

方式1：事件处理程序中最后设置return false;

  <a id="link" href="https://www.baidu.com">点击</a>
  <script>
    var link = document.getElementById('link');
    link.onclick = function(){
        alert('你好');
        // 方式1：取消a点击后的默认跳转行为 return false;
        return false;
    };
  </script>

方式2：设置a标签的href属性值为：javascript:

  <!-- 方式二：给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码-->
  <a href="javascript:">点击2</a>
  <!-- 扩展：通过a可以打开打电话应用 -->
  <a href="tel:">打电话</a>
  <!-- 扩展：通过a可以打开电子邮件应用 -->
  <a href="mailto:">打开邮件</a>

案例：

1. 点击按钮弹出'你好'
2. 给一组按钮注册事件，点击弹出‘你好’
3. 给a标签注册点击事件，点击弹出'你好'，并且点击a标签不跳转

操作元素的属性

语法格式

获取：
- 语法：元素.属性名;
设置：
- 语法：元素.属性名= 值;

常见的属性

id、title、href、src、className、innerText / textContent、innerHTML

className操作类名

<div id="box" class="a"></div>
<script>
 var div = document.getElementById('box');
 // 获取类名
 console.log(div.class); // undefined
 console.log(div.className);  // a
 // 设置类名
 div.className = 'b';
</script>

innerText和innerHTML的区别

<div id="box"><h2>我是div中的标题</h2></div>
<script>
 // 1. 获取div元素
 var div = document.getElementById('box');
 console.dir(div);
 // 【获取】
 // ① 通过innerText获取,仅仅包含文本
 console.log(div.innerText);
 // ② 通过innerHTML获取，若有子标签时，会包含文本和子标签
 console.log(div.innerHTML);

 // 【设置】
 // ① 通过innerText设置,若设置中包含了子标签，该标签不会被渲染而是当做普通文本显示
 // div.innerText = '<a href="#">我是div中的超链接</a>';
 // ② 通过innerHTML设置,若设置中包含了子标签，该标签会被渲染显示
 div.innerHTML= '<a href="#">我是div中的超链接</a>';

</script>

innerText和textContent的兼容性问题

<div id="box"><h2>我是div中的标题</h2></div>
<script>
 // 1. 获取div元素
 var div = document.getElementById('box');
 console.log('innerText:' + div.innerText);
 console.log('textContent:' + div.textContent);
 // 相同点：获取的都是文本
 // 不同点：
 // ① textContent属性在ie低版本中不支持，innerText基本没有兼容问题
 // ② textContent标准属性（官宣），innerText（野路子，但是兼容性好,推荐使用）

</script>

事件类型

onclick
onmouseenter 鼠标进入元素事件
onmouseleave 鼠标离开元素事件
onmouseover / onmouseout

代码：

<div></div>
<script>
 var div = document.querySelector('div');

 div.onmouseenter = function() {
   console.log('鼠标进入了div');
 };
 div.onmouseleave = function() {
   console.log('鼠标离开了div');
 };
</script>

元素属性：

HTML属性：获取：元素.属性名；设置：元素.属性名 = 值;

CSS属性：设置：元素.style.属性名 = ‘值’;【元素.className=值】

操作元素的样式

两种设置样式：

1.、通过style直接设置样式

2、通过修改className达到修改样式操作

通过style属性设置样式

语法：元素.style.样式属性名 = ‘样式属性值’;

代码：

<div>111</div>
<script>
 var div = document.querySelector('div');
 div.style.width = '300px';
 div.style.height = '300px';
 // background-color → backgroundColor
 div.style.backgroundColor = 'red';
 // div.style.fontSize = '50px';
 div.style.font = 'bold 50px "宋体"';

 // 若操作少量的样式时，适合用style属性操作
</script>

通过className设置样式

语法：元素.className = ‘类名’

代码：

<style>
.a {
width: 300px;
height: 300px;
background-color: red;
font:bold 50px '宋体';
}
.b {
width: 500px;
height: 500px;
background: purple;
}
</style>
<div>111</div>
<script>
var div = document.querySelector('div');
div.className = 'b';
// 若操作多个样式属性时，用className管理比较合适
</script>


document.body==》body元素

案例

操作表单元素的属性(表单)

value 操作表单元素的内容

获取：元素.value; 返回字符串
设置：元素.value = 值;

disabled 操作表单元素是否禁用(未激活)

获取：元素.disabled; 返回布尔值（true→禁用，false→不禁用）;
设置：元素.disabled = 布尔值;

checked 操作表单元素是否选中

获取：元素.checked; 返回布尔值（true→选中，false→不选中）;
设置：元素.checked = 布尔值;

selected 操作表单元素的是否选中

获取：元素.selected;
设置：元素.selected = 布尔值;

案例：

购物车页面中的商品数量文本框
购物车的全选
注册页面，选中同意复选框启用注册按钮

自定义属性行内属性

标签内所能操作的属性：
- 系统支持的：href、title、src…，可以通过元素直接调用
- 自定义标签属性：bigSrc，不可以通过元素直接点的方式调用
- 往标签上自定义的属性，一定不可以直接用【元素.属性】的方式用
获取
- 语法：元素.getAttribute(name);
- name:属性名
设置
- 语法：元素.setAttribute(name,value);
移除
- 语法：元素.removeAttribute(name,value);
代码：

 <!-- 系统支持：src ; 可以通过元素直接调用-->
  <!-- 自定义的标签属性：bigSrc；不可以通过元素直接点的方式调用 -->
  <img src="small.jpg" title="图片" bigSrc="big.jpg" >
  <script>
    var img = document.querySelector('img');
    console.log(img.src);
    console.log(img.bigSrc);  // undefined
    // 获取
    var v = img.getAttribute('bigSrc');
    console.log(v);
    // 设置
    img.setAttribute('bigSrc','100086.jpg');
    // 移除
    img.removeAttribute('bigSrc');

    // 注意：set/get/removeAttribute不仅可以操作自定义标签属性，还可以操作系统支持标签属性。
    var v = img.getAttribute('src');
    console.log(v);
  </script>

节点的层级

根据节点的关系来获取元素

节点的关系

父子关系
兄弟关系

根据子节点获取父节点

语法：子节点.parentNode

根据父节点获取子节点

语法：父节点.childNodes; 获取的子节点包含【文本】和【元素】
语法：父元素.children; 获取的子节点仅仅包含【元素】
语法：父节点.firstElementChild; 获取【第一个】子元素节点
语法：父节点.lastElementChild; 获取【最后一个】元素节点

节点的nodeType、nodeName、nodeValue的属性

节点的nodeType（节点类型）属性的作用：元素→ 1；文本→3
节点的nodeName（节点名称）属性的作用：元素→ 大写的标签名文本→ #text
节点的nodeValue（节点值）属性的作用：元素→ null 文本→ 文本的内容

获取兄弟节点

获取下一个兄弟
- 语法：节点.nextElementSibling
获取上一个兄弟
- 语法：节点.previousElementSibling

补充案例

1、京东侧边栏

// 1. 获取元素
// 1.1 获取一组li
// 1.2 获取一组类名为item的div
// 1.3 获取类名为slide的div

// 2. 循环遍历给每一个li注册onmouseenter，并且每一个li添加一个index表示索引
// 2.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none
// 2.2 让当前的li突出显示（加类名active）
// 2.3 获取到当前的li的编号（加的索引）
// 2.4 通过编号找到对应的item项设置display为block


// 3. 给类名为slide的div鼠标离开事件onmouseleave
// 3.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none

核心知识点

动态创建元素
动态追加元素
动态删除元素

动态创建元素

通过innerHTML创建元素
- 语法：元素.innerHTML = ‘内容’;
- 代码

 <button>创建li</button>
  <ul>
    <li>我是li</li>
  </ul>
  <script>
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    btn.onclick = function() {
      // 获取ul中原有的内容
      var str = ul.innerHTML;
      // 设置ul的内容
      ul.innerHTML =str + '<li>我是新来的</li>';
    };
  </script>

通过document.createElement创建元素

语法：document.createElement(‘标签名’); 返回一个新的元素对象

代码：

  <button>创建li</button>
  <ul>
    <li>我是li</li>
  </ul>
  <script>
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    btn.onclick = function() {
      // 创建一个新的li元素
      var newLi = document.createElement('li');
      // 追加到ul中
      ul.appendChild(newLi);
      // 设置元素的内容
      newLi.innerText = '我是新来的';
    };
  </script>

性能测试
- innerHTML在追加多个元素时执行速度慢，性能差。不推荐使用
- createElement方法执行速度快，性能高 ，在实际开发中推荐使用 。

动态追加元素

语法：父元素.appendChild(子元素);

代码：

<button>创建li</button>
<ul>
 <li>我是li</li>
</ul>
<script>
 var btn = document.querySelector('button');
 var ul = document.querySelector('ul');
 btn.onclick = function() {
   // 创建一个新的li元素
   var newLi = document.createElement('li');
   // 追加到ul中
   ul.appendChild(newLi);
   // 设置元素的内容
   newLi.innerText = '我是新来的';
 };
</script>

动态删除元素

语法：父元素.removeChild(子元素);
代码：

1、创建元素：var n = document.createElement(‘标签名’);

2、追加元素：父元素.appendChild(子元素)

3、删除元素：父元素.removeChild(子元素)

其他操作

插入元素

语法：父节点.insertBefore(新的节点,旧的子节点)
代码：

替换元素

语法：父节点.replaceChild(新的节点,旧的子节点)
代码：

克隆元素

语法：元素.cloneNode(true或false); 返回一份新的克隆后的元素
代码：

案例

根据数组动态创建英雄(ul)列表
根据数据动态生成表格
表格封装(封装一个函数，传入数据生成表格)
微博发布

事件监听

为什么要学事件监听

需求：给一个元素连续绑定两次点击事件，并且事件处理程序都有效。

事件监听注册事件

语法：事件源.addEventListener(‘事件类型’,事件处理程序,是否捕获);

事件源 → 操作的元素

事件类型→ 在此不加on, onclick→click

事件处理程序→ 函数

是否捕获，可选参数，默认为false。 true→ 捕获，false→冒泡

代码：

  var btn = document.querySelector('button');
  // 事件监听注册事件
  btn.addEventListener('click',function(){
    console.log(1);
  });

事件监听移除事件

语法：事件源.removeEventListener(‘事件类型’,事件处理程序的名称)
- 事件源，操作的元素
- 事件类型，不加on
- 事件处理程序的名字：函数名
  - 注意：若将来要通过事件监听的方式移除事件时，之前注册事件要把事件处理程序单独抽取出来命名 。

代码：

  var btn = document.querySelector('button');
  // 事件监听注册事件
  var fn1 = function() {
    console.log(1);
  };
  var fn2 = function() {
    console.log(2);
  };
  btn.addEventListener('click',fn1);
  btn.addEventListener('click',fn2);

  // 事件移除事件
  btn.removeEventListener('click',fn2)
  btn.removeEventListener('click',fn1)

注册事件：

事件源.onclick = function () {}

事件源.addEventListener(‘事件类型不加on的’,function () {});

移除事件：

事件源.onclick = null;

事件源.removeEventListener(‘事件类型不加on的’,事件处理名称);

事件流

什么是事件流

事件流 ：事件触发后的三个阶段（捕获阶段、目标阶段、冒泡阶段）。

注意： 在事件触发后，这三个阶段始终是存在的，顺序① 先捕获，② 到达目标，③ 再冒泡。 但是在触发后，针对捕获和冒泡，仅仅启用一个。

事件对象

什么是事件对象

事件对象，在事件触发后，在事件处理程序中（函数体），所获取并操作的对象。

事件对象：事件发生时的相关信息对象【event】

获取事件对象

语法：事件源.事件类型 = function(e){ // 第一个形参e就是事件对象 }
代码：

鼠标事件对象相关属性

鼠标事件类型
- onclick
- onmouseenter
- onmouseleave
- onmousemove,鼠标移动事件
- onmousedown 鼠标按键按下事件【】
- onmouseup 鼠标按钮弹起事件
- onmouseenter：不支持事件冒泡，mouseover：支持事件冒泡
- onmouseenter，onmoouseover
- onmouseleave，onmouseout
鼠标事件对象相关属性-获取鼠标的位置
- 事件对象.clientX / 事件对象.clientY 参照是浏览器
- 事件对象.pageX / 事件对象.pageY 参照是文档
- 事件对象.offsetX / 事件对象.offsetY 参照是当前的元素
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lREcpT8U-1647419767815)(media/04.png)]

事件监听注册事件：事件源.addEventListener(‘事件类型’，事件处理程序，是否捕获);

移除事件：事件源.onclick = null;

事件监听移除事件；事件源.removeEventListener(‘事件类型’，事件程序名称);

事件流：事件触发后的三个阶段：捕获，目标，冒泡

事件对象：事件发生后的相关信息对象

键盘事件对象相关属性

键盘事件
- 事件类型
  - onkeydown 键盘按下事件
  - onkeyup 键盘弹起事件
- 注意：
  - 一般情况给document绑定键盘事件。
键盘事件对象相关属性-键盘按下哪个键
- 事件对象.keyCode 获取键盘按键对应的键码值
- 事件对象.altKey 表示alt键是否按下，返回布尔值。
- 事件对象.shiftKey 表示shift键是否按下，返回布尔值。
- 事件对象.ctrlKey 表示ctrl键是否按下，返回布尔值。（true按下，false没有按下）

事件对象的公共属性和方法

属性：
- 事件对象.target 获取最先触发的元素
- 和this的区别
  - this在事件处理程序中始终代表的是事件源
  - e.target 代表不一定是事件源，代表的是最先触发的元素【目标阶段→ document】
方法：
- 事件对象.preventDefault(); 阻止默认行为
- 事件对象.stopPropagation(); 停止冒泡传播
- 【onmouseover支持冒泡，onmouseenter不支持冒泡】

扩展-兼容问题

获取事件对象的兼容问题

标准：事件处理程序中的第一个形参
IE低版本：window.event

兼容处理：

   document.onclick = function (e) {
     var _e = e || window.event;
     // 在js中，任何数据可以参与任何运算
     // 或运算格式：  左侧数据 || 右侧数据
     // 或运算结果是：左右其中一个数据
     // 运算规则：或运算运算的顺序是自左向右，若左侧是false或者将来能变成false,则输出右侧数据。否则输出左侧数据。
     console.log(_e);
   };

事件委托

事件委托介绍

事件委托 （事件代理）：把子孙元素的事件注册，完全交给子孙元素的上级元素代理。
注意：委托是下级元素委托上级元素。没有上级委托下级

如何实现事件委托

实现步骤

① 给子孙元素的上级注册事件

② 在事件处理程序中，通过事件对象.target 获取最先触发的元素

③ 可以通过事件对象.target的nodeName 属性检测最先触发的是否是指定元素

代码

<script>
// ① 给子孙元素的上级注册事件
var ul = document.querySelector('ul');
ul.onclick = function(e) {
 // ② 在事件处理程序中，通过事件对象.target 获取最先触发的元素
 var t = e.target;
 // console.dir(t);
 // ③ 可以通过事件对象.target的nodeName 属性检测最先触发的是否是指定元素
 if(t.nodeName=='LI') {
   console.log(t.innerText);
 }
};
</script>

事件委托的作用

减少事件的绑定，节省内存。
上级元素可以代理未来新动态添加的元素。

事件委托的原理

关键：事件对象.target；可以获取最先触发的元素
原理：因为事件冒泡的存在,我们才可以获取到最先触发的元素。【目标→ document】

核心知识点

定时器

DOM：操作页面元素

BOM：操作浏览器的

BOM

BOM介绍

BOM的概念：浏览器对象模型。

顶级对象-window

window对象介绍
1. window对象被称为顶级对象或全局对象。
2. 因为全局变量和全局函数本质上都是window对象的属性或方法。
3. window对象可以省略。
window中的对话框
- alert
- prompt
- confirm

定时器1： window.setTimeout(callback, time);

作用：延迟执行一段程序，仅仅执行一次（定时炸弹），返回一个数字，表示是哪个定时器。
参数：
- callback, 函数定义，函数体中存放定义器要执行的代码。
- time, 等待的时间，数字，表示的是毫秒
清除定时器：window.clearTimeout(定时器的标识);

代码：

    // 开启一个定时器
    var num1 = setTimeout(function(){
      // 定时器延迟时间到达后，要执行的代码
      console.log('爆炸了,Duang~~~1') ;
    },5000);

    // 开启一个定时器
    var num2 = setTimeout(function(){
      // 定时器延迟时间到达后，要执行的代码
      console.log('爆炸了,Duang~~~2') ;
    },5000);
    console.log(num1,num2);

  // 获取按钮
  var btn = document.querySelector('button');
  btn.onclick = function() {
    // 清除定时器
    clearTimeout(num1);
    clearTimeout(num2);
  };

定时器2：window.setInterval(callback, time);
- 作用：延迟执行一段程序，重复执行（闹钟）。返回一个数字，表示是哪个定时器。
- 参数：
  - callback, 函数定义，函数体中存放定义器要执行的代码。
  - time, 等待的时间，数字，表示的是毫秒
- 清除定时器：window.clearInterval(定时器的标识);
- 代码：
```
  // 开启一个定时器
  var num = setInterval(function(){
    var date = new Date();
    console.log(date);
  },1000);
```
```
  // 获取按钮
  var btn = document.querySelector('button');
  btn.onclick = function () {
    clearInterval(num);
  };
```

location对象

location对象，将来操作浏览器的地址栏。
属性：
- location.href 设置或获取地址栏地址
方法：
- location.reload(); 刷新页面
- 【location.assign()，location.replace()】

history对象

history对象 ，用来操作历史记录
属性：
- history.length; 获取历史记录的长度
方法：
- history.back(); 回退上一个历史记录
- history.forward(); 前进下一个历史记录
- history.go(数字); 正数，表示前进；负数，表示回退；

navigator对象

navigator对象，用来获取浏览器的信息。
属性：
- navigator.userAgent; 用来获取浏览器的信息

onload事件

onload事件是页面加载事件，一般绑定给window
页面把link，scr，img图片都加载完

案例

倒计时
点击按钮跳转网页

核心知识点

元素的offset系列属性
元素的client系列属性
元素的scrollTop属性

元素的offset系列属性

获取元素的大小

元素.offsetWidth / 元素.offsetHeight;

返回的是数字。大小包含：内容 + padding + border;

注意：该属性仅仅只能够读取，不能够设置

代码：

<style>
 div {
   width: 300px;
   height: 300px;
   position: absolute;
   left:100px;
   top:100px;
   background: pink;
   border: 10px solid blue;
   padding: 10px;
 }
</style>
 <div></div>
<script>
 var div = document.querySelector('div');
 // 获取元素的大小
 console.log(div.offsetWidth);
 console.log(div.offsetHeight);

 // 坑！设置(不能设置，是只读的)
 div.offsetWidth = 1000 + 'px';
 div.offsetHeight = 1000 + 'px';

</script>

获取元素的位置

[offsetLeft，offsetTop]

[offsetWidth，offsetHieght]

元素.offsetLeft / 元素.offsetTop;

返回的是数字。（参照谁？看定位关系）

代码：

<div class="g">
 <div class="f">
   <div class="s"></div>
 </div>
</div>
<script>
 var s = document.querySelector('.s');
 // 获取横向位置
 console.log(s.offsetLeft);
 // 获取纵向位置
 console.log(s.offsetTop);

 // parentNode
 console.log(s.parentNode);
 // offsetParent
 console.log(s.offsetParent);

</script>

获取元素的父元素

元素.offsetParent 和元素.parentNode的区别
- 元素.offsetParent ，获取“父元素”，按照定位关系。
- 元素.parentNode，获取“父元素”，按照标签关系。

元素的client系列属性【了解】

client系列：

[clientWidth，clientHeight]

[clientLeft，clientTop]

1.1 获取元素的大小

元素.clientWidth / 元素.clientHeight

获取元素的大小，包含【内容 + padding】

代码：

<div></div>
<script>
 var div = document.querySelector('div');
 // 获取元素的大小
 console.log(div.clientWidth);
 console.log(div.clientHeight);

 // 获取边框的厚度
 console.log(div.clientLeft);
 console.log(div.clientTop);

 // 坑！设置(不能设置，是只读的)
 div.clientWidth = 1000 + 'px';
 div.clientHeight = 1000 + 'px';

</script>

获取边框的厚度

元素.clientLeft / 元素.clientTop

获取边框厚度

元素的scroll系列属性

获取元素的大小

元素.scrollWidth / 元素.scrollHeight

获取的元素的大小 ,包含【内容+ padding + 溢出】

代码：

 var div = document.querySelector('div');
 console.log('scroll系列：' +div.scrollWidth);

获取被卷起的页面间距

元素.scrollLeft / 元素.scrollTop

获取的是在该元素中卷去的页面的间距。【该属性不仅可以获取，还可以设置】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEF2sYlh-1647419767818)(media/06-03.png)]

案例

回到顶部
放大镜

【案例】轮播图-讲解

核心知识点

touch事件（touchstart、touchmove、touchend）
touchEvent 事件对象
transitionend事件

1. touch事件类型

移动设备上无法使用鼠标，当手指触碰屏幕时会触发 click、mousedown、mouseup 事件。

但是，touch事件要比鼠标事件执行效率高，用户体验好。

注意：以下事件必须通过事件监听注册

事件添加：

元素.onclick = function () {}

元素.addEventlistener(‘click’,function (){});

touchstart，手指按下事件
touchmove，手指移动事件
touchend，手指松开事件

2. touch事件对象

常见的属性
1. 事件对象.touches ：位于屏幕上的所有手指的列表；
2. 事件对象.targetTouches ：位于该元素上的所有手指的列表；
3. 事件对象.changedTouches：被改变的手指列表。 touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点
手指的位置
1. 手指对象.clientX/Y 手指相对于可视区域
2. 手指对象.pageX/Y 手指相对于文档
注意：手指对象.clientX/Y 使用较多

案例：

模拟tap手势（点击）
模拟drag手势（拖拽）【未演示，未做，未讲】
模拟flick手势（轻滑）
移动端京东轮播图

4. transitionend事件

谁有过渡效果，这个事件添加给谁【事件监听】

css中过渡结束后检测的行为

Swiper 轮播图插件

目标

使用 swiper 快速实现轮播图效果

概念

Web 插件：就是别人封装好的一个 js 代码或 css代码，可以直接拿来用。

Swiper 就是一个轮播图的插件，由其他团队写好的，开源免费，全世界开发者都可以使用。

Swiper插件官网： https://www.swiper.com.cn/

百度按照步骤执行既可

1、下载并且引入CSS文件和JS文件

2、复制内容

3、设置大小（可以不设置）

4、复制功能代码

本地存储技术

localSortage对象：把数据以字符串的方式保存本地

获取： localStorage.getItem()
设置： localStorage.setItem()

哈虎a

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
webAPI介绍

API和webAPIAPI（Application Programming Interface）应用程序编程接口（暴露出来的工具）。webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM）DOM：操作页面元素的方法 document object modelBOM：操作浏览器的DOM介绍DOM的概念概念：文档对象模型。文档：html文件对象：属性和方法模型：（树）文档树文档树：浏览器在加载html文件时，会把文档、文档中的标签、属性、
复制链接

扫一扫