菜单 搜索
首页 前端知识 js api part3

js api part3

2024-05-24 08:05:24 前端知识 前端哥 536 226 我要收藏

环境对象

环境对象： 指的是函数内部特殊的 变量 this ， 它代表着当前函数运行时所处的环境
作用： 弄清楚this的指向，可以让我们代码更简洁
函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】 是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window 

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为 回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是 回调函数
常见的使用场景：定时器是回调函数

 一个函数作为另一个函数的参数。当作参数的那个函数，就是回调函数，你调用系统的函数，是直调。让系统调用你的函数，就是回调
 

页顶tab栏切换

感兴趣的可以了解一下forEach函数，遍历数组内容部分只需一个div，不用隐藏也可以实现，亲测有效。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }
 
    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }
 
    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }
 
    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }
 
    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }
 
    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }
 
    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }
 
    .tab-content {
      padding: 0 16px;
    }
 
    .tab-content .item {
      display: none;
    }
 
    .tab-content .item.active {
      display: block;
    }
  </style>
</head>
 
<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;">精选</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">百货</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    // 1. a 模块制作 要给 5个链接绑定鼠标经过事件
    // 1.1 获取 a 元素 
    const as = document.querySelectorAll('.tab-nav a')
    for (let i = 0; i < as.length; i++) {
      // 要给 5个链接绑定鼠标经过事件
      as[i].addEventListener('mouseenter', function () {  // 鼠标经过
        // 排他思想  
        // 干掉别人 移除类active
        document.querySelector('.tab-nav .active').classList.remove('active')
        // 我登基 我添加类 active  this 当前的那个 a 
        this.classList.add('active')
 
        // 下面5个大盒子 一一对应  .item 
        // 干掉别人
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应序号的那个 item 显示 添加 active 类
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
         //这里不用this是因为this指向的是as[i]，as只选择了li标签，
        //但是下面的内容部分不是li标签，所以不能用this了，需要另外声明
      //详细解释下：上一个函数体中你把函数当做参数给了addEven..使用，this指向的就是as[i]，而下面这个显示的内容是根据你所点击的选项显示的并不需要自己去操作也就没法使用this(个人见解)
        })
    }
  </script>
</body>
 
</html>
复制

 全选文本框案例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }
 
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
 
    .allCheck {
      width: 80px;
    }
  </style>
</head>
 
<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    // 1. 获取大复选框
    const checkAll = document.querySelector('#checkAll')
    // 2. 获取所有的小复选框
    const cks = document.querySelectorAll('.ck')
    // 3. 点击大复选框  注册事件
    checkAll.addEventListener('click', function () {
      // 得到当前大复选框的选中状态
      // console.log(checkAll.checked)  // 得到 是 true 或者是 false
      // 4. 遍历所有的小复选框 让小复选框的checked  =  大复选框的 checked
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = this.checked
      }
    })
    // 5. 小复选框控制大复选框
    for (let i = 0; i < cks.length; i++) {
      // 5.1 给所有的小复选框添加点击事件
      cks[i].addEventListener('click', function () {
        // 判断选中的小复选框个数 是不是等于  总的小复选框个数
        //把大复选框的状态赋值给所有的小复选框
        // console.log(document.querySelectorAll('.ck:checked').length)
        // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
      })
    }
  </script>
</body>
</html>
复制

 css伪类选择器

placeholder 

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
/*选择被勾选的复选框*/
.ck:checked {
width:20px;
height: 20px; 
}
</style>
</head> 
<body>
<input type="checkbox" name="" id="" class="ck"> 
<input type="checkbox" name="" id="" class="ck"> 
<input type="checkbox" name="" id="" class="ck"> 
<input type="checkbox" name="" id="" class="ck"> 
</body>
</html> 
复制

即为按下按钮check（检查）是否符合，然后变大

事件流

 事件流和两个阶段说明
事件流 指的是事件完整执行过程中的流动路径。
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是从父到子，冒泡阶段是从子到父
实际工作都是使用事件冒泡为主。

事件捕获

事件捕获概念： 从DOM的根元素开始去执行对应的事件 (从外到里)
代码： DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
说明：
● addEventListener第三个参数传入 true 代表是 捕获阶段 触发（很少使用）
● 若传入 false 代表 冒泡阶段 触发，默认就是false
● 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

事件冒泡

事件冒泡概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件 。比如click事件
事件冒泡是默认存在的。L2事件监听第三个参数是 false，或者默认都是冒泡。

阻止冒泡

问题： 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求： 若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提： 阻止事件冒泡需要拿到事件对象
语法： 事件对象.stopPropagation()
注意： 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

man！hahahaha，whatcanisay？

<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click', function () {
      alert('我是爷爷')
    })
    fa.addEventListener('click', function () {
      alert('我是爸爸')
    })
    son.addEventListener('click', function (e) {
      alert('我是儿子')
      // 阻止流动传播  事件对象.stopPropagation()
      e.stopPropagation()
    })
 
  </script>
</body>
复制
拓展？

我们某些情况下需要 阻止 默认行为 的发生，比如 阻止 链接的跳转，表单域跳转
语法： e.preventDefault()

<body>
  <form action="http://www.itcast.cn">
    <input type="submit" value="免费注册">
  </form>
  <script>
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      // 阻止默认行为  提交
      e.preventDefault()
    })
  </script>
</body>
复制

解绑事件

on事件方式，直接使用null覆盖偶就可以实现事件的解绑

//绑定事件
btn.onclick=function(){
    alert('')
}
//解绑事件
btn.onclick=null
复制

本质上也是一个对象，都是引用类型的 

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    btn.onclick = function () {
      alert('点击了')
      // L0 事件移除解绑
      btn.onclick = null
    }
  </script>
</body>
复制

addEventListener方式必须使用。

匿名函数或箭头函数在解绑时会遇到问题，因为你无法提供一个相同的函数引用来解绑。所以最好是使用命名函数进行事件绑定，这样就可以在需要时解绑。

target.removeEventListener(事件类型,事件处理函数, [,获取捕获或者冒泡阶段])

<body>
  <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    function fn() {
      alert('点击了')
    }
    btn.addEventListener('click', fn)
    // L2 事件移除解绑
    btn.removeEventListener('click', fn)
  </script>
</body>
复制

拓展：鼠标经过事件的区别、两种注册事件的区别
鼠标经过事件：
● mouseover 和 mouseout 会有冒泡效果
● mouseenter 和 mouseleave 没有冒泡效果 (推荐)
两种注册事件：
● 传统on注册（L0）
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的
● 事件监听注册（L2）
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑

对于鼠标经过和离开的案例

放在粉色区域是经过父，从粉到紫是鼠标是先离开父，然后经过子，再由冒泡经过父。
所以说如果子级没有绑定事件处理函数，事件同样会冒泡。虽然没有表现，但事件确实传递了。并不是说不绑定事件处理函数就不会冒泡，只能说绑定事件处理函数可以用来体现冒泡过程。

baby没有定义监听，但鼠标进入baby这件事情确确实实发生了并通过冒泡传递给了dad，而dad有定义事件监听就执行了相应的代码，所以捕获和冒泡不一定是一件好事。

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧。
优点：减少注册次数，可以提高程序性能。
原理：事件委托其实是利用 事件冒泡 的特点。 给 父元素注册事件 ，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。
实现： 事件对象.target. tagName 可以获得真正触发事件的元素 
如：ul.addEventListener('click' , function(){}) 执行父级点击事件

 其实就相当于css子属性找不到了，继承父元素的属性

</head>
<body>
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
</ul>
<script>
//点击每个小li 当前Li 文字变为红色
//按照事件委托的方式 委托给父级，事件写到父级身上
//1．获得父元素
const ul = document.querySelector('ul') 
ul.addEventListener('click', function () { 
  /*  alert(11)
    e.target.style.color='red'*/
//当我们只要li变色时候，
    if(e.target.tagName==='LI'){
     e.target.style.color='red'//那为什么不直接判断target 是不是li 呢？
}
}) 
</script> 
</body> 
</html> 
复制

改进tab栏

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }
 
    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }
 
    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }
 
    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }
 
    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }
 
    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }
 
    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }
 
    .tab-content {
      padding: 0 16px;
    }
 
    .tab-content .item {
      display: none;
    }
 
    .tab-content .item.active {
      display: block;
    }
  </style>
</head>
 
<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
        <li><a href="javascript:;" data-id="1">美食</a></li>
        <li><a href="javascript:;" data-id="2">百货</a></li>
        <li><a href="javascript:;" data-id="3">个护</a></li>
        <li><a href="javascript:;" data-id="4">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    // 采取事件委托的形式 tab栏切换
    // 1. 获取 ul 父元素 因为 ul只有一个
    const ul = document.querySelector('.tab-nav ul')
    // 获取 5个 item 
    const items = document.querySelectorAll('.tab-content .item')
    // 2. 添加事件
    ul.addEventListener('click', function (e) {
      // console.log(e.target)  // e.target是我们点击的对象
      // 我们只有点击了 a 才会 进行 添加类和删除类操作 
      // console.log(e.target.tagName)  // e.target.tagName 点击那个对象的 标签名
      if (e.target.tagName === 'A') {
        // console.log('我选的是a')
        // 排他思想 ，先移除原来的active  
        document.querySelector('.tab-nav .active').classList.remove('active')
        //当前元素添加 active  是 e.target
        // this 指向ul 不能用this 
        e.target.classList.add('active')
 
        // 下面大盒子模块
        // console.log(e.target.dataset.id)
        // 获取的是字符串，需转换为数字
        const i = +e.target.dataset.id
        // 排他思想 ，先移除原来的active 
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应的大盒子 添加 active 
        // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
        items[i].classList.add('active')
      }
    })
  </script>
</body>
 
</html>
复制

自定义属性

date-id=“0” 

查找是.dateset.id

转载请注明出处或者链接地址：https://www.qianduange.cn//article/9267.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！