js api part3

环境对象

环境对象: 指的是函数内部特殊的 变量 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 () {  // 鼠标经过// 排他思想  // 干掉别人 移除类activedocument.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  =  大复选框的 checkedfor (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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/8471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt | QLineEdit 类(行编辑器)

01、上节回顾 Qt | QComboBox(组合框)02、QLineEdit 1、QLineEdit 类是 QWidget 类的直接子类,该类实现了一个单行的 输入部件,即行编辑器,见右图 2、验证器(QValidator 类)和输入掩码简介:主要作用是验证用户输入的字符是否符合验证器 的要求,即限制对用户的输入,比…

【C#_变量_格式化输出_If语句_微信猜拳_第一篇】

C#&#xff08;编程入门&#xff09; 练习来自腾讯课堂免费课程1.1.基本输出语句基本输出语句——知识点总结Console.Clear();清屏字符串和数字区分Console.ReadLine(); 1.2.变量的基本使用&#xff1a;变量的基本使用——知识点总结 1.3.格式化输出格式化输出——知识点总结 1…

01 设计模式--单例模式

1. 单例模式 单例模式有两种实现方式&#xff1a; 1.1 饿汉模式&#xff08;Eager Initialization&#xff09;&#xff1a;在类加载时就创建单例实例&#xff0c;无论是否需要使用该实例。 饿汉模式在类加载时就创建单例实例&#xff0c;无论是否需要使用该实例。 饿汉模式…

C++ Primer 中文版(第 5 版)-第二单元

第二单元 练习 2.1 通过读下面程序&#xff0c;写出程序运行结果。 #include <iostream>int main() {unsigned u 10, u2 42;std::cout << u2 - u << std::endl;std::cout << u - u2 << std::endl;int i 10, i2 42;std::cout << i2 …

论文阅读_使用有向无环图实现流程工程_AgentKit

英文名称: AgentKit: Flow Engineering with Graphs, not Coding 中文名称: AgentKit&#xff1a;使用图而非编码进行流程工程 链接: https://arxiv.org/pdf/2404.11483.pdf 代码: https://github.com/holmeswww/AgentKit 作者: Yue Wu, Yewen Fan, So Yeon Min, Shrimai Prabh…

Julia 语言环境安装与使用

1、Julia 语言环境安装 安装教程&#xff1a;https://www.runoob.com/julia/julia-environment.html Julia 安装包下载地址为&#xff1a;https://julialang.org/downloads/。 安装步骤&#xff1a;注意&#xff08;勾选 Add Julia To PATH 自动将 Julia 添加到环境变量&…

ollama + autogen排雷

语法&#xff1a;<abc>代表参数&#xff0c;实际输入为具体的名字&#xff0c;不需要输入<> 注意&#xff1a;当前雷可能随着版本迭代更新掉 1、litellm -model ollama/<model> 启动后的url为&#xff1a;http://0.0.0.0:<port>&#xff0c;实际调用…

实用 Linux 操作指令

实用 Linux 操作指令 Linux 命令行提供了强大的功能&#xff0c;可以通过一系列指令轻松管理系统、文件和网络。以下是一些常用的 Linux 操作指令&#xff0c;涵盖文件管理、系统监控、网络配置等方面。 一、文件管理 显示当前目录&#xff1a; pwd列出目录内容&#xff1a; …

薪酬激励策略:留住企业核心人才的关键

在竞争激烈的商业环境中&#xff0c;企业为了保持竞争力和市场地位&#xff0c;必须高度重视人才的管理和发展。企业的核心人才是推动企业发展的关键因素&#xff0c;因此&#xff0c;如何有效地激励和留住这些核心人才&#xff0c;成为企业持续发展的关键之一。薪酬激励策略作…

C语言 函数的嵌套与递归 调用

本文 我们来说函数的嵌套调用和递归调用 在很多大型项目中 我们肯定不可能将所有逻辑都写在一个函数中 肯定要按功能拆解成多个特定的功能函数 函数并不允许嵌套调用&#xff0c;但是 允许在逻辑代码中嵌套调用 所谓函数嵌套调用 就是在一个函数中调用另一个函数&#xff0c;而…

【计算机毕业设计】基于SSM++jsp的菜匣子优选系统【源码+lw+部署文档+讲解】

目录 第一章 绪 论 第二章 关键技术的研究 2.1 JSP技术介绍 2.2 JAVA简介 2.3 ECLIPSE 开发环境 2.4 Tomcat服务器 2.5 MySQL数据库 第三章 系统分析 3.1 系统设计目标 3.2 系统可行性分析 3.3 系统功能分析和描述 3.4系统UML用例分析 3.4.1管理员用例 3.4.2用户用例 3.5系统流…

C语言 计数控制循环

今天 我们来说 计数控制的循环 对于循环次数 我们已知的循环 我们称之为 计数控制的循环 这种情况 我们一般选择 for来实现 更为方便 先看一个案例 求 1 到 N 的累加合 我们代码可以这样写 #define _CRT_SECURE_NO_WARNINGS//禁用安全函数警告 #pragma warning(disable:6031…

python中flask使用简要记录

文档层级概要 一、flask简要说明 二、uwsgi配置说明 三、启动 四、结果验证 之前有做过接口&#xff0c;后来写了许多算法和数据处理&#xff0c;对于接口大多时候是通过fastapi或调别人的接口。自己写的接口倒是没有多少。在这里使用uwsgi和flask及nginx进行配置&#xf…

[链表专题]力扣LCR077, 83

1. LCR077 : 排序链表 题 : 给定链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。示例 1&#xff1a;输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 示例 2&#xff1a;输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,…

信创基础硬件之芯片

信创基础硬件之芯片 文章目录 信创基础硬件之芯片服务器服务器的定义服务器的功能服务器的构成服务器的性能 处理器&#xff08;CPU&#xff09;CPUGPUDPU CPU的分类按CPU指令集架构分类按CPU体系架构分类 CPU产业链六大国产CPU公司详解海光飞腾鲲鹏兆芯龙芯申威 国产CPU对比从…

Linux网络编程:TCP编程实现

目录 1、前言 2、函数介绍 2.1 socket函数 与 通信域 2.2 bind函数 与 通信结构体 2.2.1 domain通信地址族 与 通信结构体 2.2.2 IPv4地址族结构体 2.2.3 通用地址族结构体 2.2.4 示例&#xff1a;为套接字fd绑定通信结构体addr 2.3 listen函数 与 accept函数 …

了解外汇询价和锁价,全球交易中的关键概念

外汇市场是全球交易量最大的金融市场之一&#xff0c;每天都有大量的货币买卖活动。在外汇交易中&#xff0c;询价和锁价是两个关键概念&#xff0c;它们不仅影响交易者的决策&#xff0c;还关系到交易的成本和风险控制。为了帮助交易者更好地理解和应用这两个概念&#xff0c;…

Java中ArrayList、LinkedList和Vector的底层原理

ArrayList Java中的ArrayList底层原理主要涉及其数据结构、扩容机制、线程安全性以及元素存储和访问方式。以下是对ArrayList底层原理的总结&#xff1a; 数据结构 ArrayList的底层数据结构是一个动态数组。这意味着ArrayList可以根据需要自动增长其容量&#xff0c;从而存储…

Linux课程机房虚拟机

Linux课程机房虚拟机 机房虚拟机&#xff08;默认不能联网的&#xff09;&#xff1a; 百度网盘&#xff1a;https://pan.baidu.com/s/1WqSvqB3Y7b_D4690CDBlJA?pwdaugc 123网盘&#xff1a;https://www.123pan.com/s/tQ0UVv-LiolA.html提取码:F4xm ‍ 联网使用说明&…

小trick

https://codeforces.com/gym/105104/problem/C const int N 1e6 10;int T, n, x; ull v[N];int main() {mt19937_64 rng(random_device{}()); // 注意这种生成随机数的方法&#xff01;&#xff01;&#xff01;F(i, 0, N - 10)v[i] rng();for (R(T); T --; ) {R(n);map &…