当前位置： 首页 > news >正文

想把比尔的网站封了如何做/谷歌seo网站优化

news 文章来源：https://blog.csdn.net/weixin_48719464/article/details/134132027 2025/3/4 5:09:20
想把比尔的网站封了如何做,谷歌seo网站优化,网站维护一般需要多久时间,企信网企业信用信息系统官网1、事件委托 事件委托（Event delegation）是一种JavaScript设计模式，用于处理事件监听和处理程序的优化。它通过将事件处理程序绑定到父元素而不是绑定到子元素，从而减少DOM元素上的事件处理程序数量。 事件委托是利用事件流的特征…

1、事件委托

        事件委托（Event delegation）是一种JavaScript设计模式，用于处理事件监听和处理程序的优化。它通过将事件处理程序绑定到父元素而不是绑定到子元素，从而减少DOM元素上的事件处理程序数量。

事件委托是利用事件流的特征解决一些开发需求的知识技巧

  • 优点：减少注册次数，可以提高程序性能
  • 原理：事件委托其实是利用事件冒泡的特点
    • 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件 
  • 实现：事件对象.target.tagName 可以获得真正触发事件的元素

例如，如果我们有一个包含多个按钮的列表，并且希望在单击按钮时执行某些操作，则可以将单个事件监听器添加到整个列表。当单个按钮被单击时，事件将冒泡到列表元素，并且我们可以检查事件目标以确定哪个按钮被单击，然后执行相应的操作。这比在每个按钮上都添加一个事件监听器要高效得多。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>第一个孩子</li><li>第二个孩子</li><li>第三个孩子</li><li>第四个孩子</li><li>第五个孩子</li><p>我不需要变色</p></ul><script>// 点击每个小li 当前li 文字变为红色// 安装事件委托的方式  委托给父级，事件写到父级身上// 1.获得父元素const ul = document.querySelector('ul')ul.addEventListener('click',function(e){// alert(11)// this.style.color = 'red'// console.log(e.target); // 就是我们点击的那个对象// console.dir(e.target)// e.target.style.color = 'red'// 我的需求，我们只要点击li才会有效果if(e.target.tanName === 'LI'){e.target.style.color = 'red'}})</script>
</body>
</html>

 2、tab栏切换改造

需求：优化程序，将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 ，当前元素添加activedocument.querySelector('.tab-nav .active').classList.remove('active')// 当前元素添加 active 是e.target// this 指向ul 不能用thise.target.classList.add('active')// 下面大盒子模块// console.log(e.target.dataset.id)const i = +e.target.dataset.id// 排他思想，先移除原来的activedocument.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>

3、阻止冒泡

我们在某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

语法：

        e.preventDefault()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://www.itcast.cn"><input type="submit" value="免费注册"></form><a href="http://www.baidu.com">百度一下</a><script>const form = document.querySelector('form')form.addEventListener('submit',function(e){// 阻止默认行为 提交e.preventDefault()})const a = document.querySelector('a')a.addEventListener('click',function(e){e.preventDefault()})</script>
</body>
</html>

相关文章：

Web APIs——事件委托

1、事件委托 事件委托&#xff08;Event delegation&#xff09;是一种JavaScript设计模式&#xff0c;用于处理事件监听和处理程序的优化。它通过将事件处理程序绑定到父元素而不是绑定到子元素&#xff0c;从而减少DOM元素上的事件处理程序数量。 事件委托是利用事件流的特征…...

编程日记 2023/10/31 10:38:27

【SpringMVC篇】讲解RESTful相关知识

&#x1f38a;专栏【SpringMVC】 &#x1f354;喜欢的诗句&#xff1a;天行健&#xff0c;君子以自强不息。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f384;REST简介&#x1f33a;RESTful入门案例⭐案例一⭐…...

编程日记 2023/10/31 10:37:26

HTML基本概念：

HTML简介&#xff1a; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。 1&#xff09;、HTML 是用来描述网页的一种语言。 2&#xff09;、HTML 不是一种编程语言&am…...

编程日记 2023/10/31 10:36:19

webpack编译卡住65不动，问题记录

此问题webpack没有报任何错误&#xff0c;导致我们只能用排除法&#xff0c;排除了整整一下午&#xff0c;为了避免又浪费一个下午时间&#xff0c;特此记录这个重要的问题。重启电脑也试了&#xff0c;清理缓存也试了&#xff0c;然后node_modules也重新安装了很多遍&#xff…...

编程日记 2023/10/31 10:35:18

当在本地，向服务器发送信息时，服务器接受信息返回给客户端，此时采用多行读取时，客户端接收不到Server的信息

public class SocketTCP04Server {public static void main(String[] args) throws IOException {ServerSocket serverSocket new ServerSocket(9999);System.out.println("Server&#xff1a;"serverSocket.getClass());System.out.println("正在等待用户连接.…...

编程日记 2023/10/31 10:34:17

2310D,Dll,栈跟踪

原文 帮助 有没有想过,如果运行时拥有调试器功能,会怎样? 对系统语言来说,常见问题是解引用空针.这几乎总是会导致崩溃,很难找到该问题,特别是你不是该项目的原始开发者时. 但是,不要害怕,在此我要讲如何在不需要实际附加调试器时获得有用的调试信息. 在Java中,已存在一个叫…...

编程日记 2023/10/31 10:32:13

JVS-BI数字大屏设计器：一站式解决方案

数字大屏介绍 数字大屏是当下数据展示、业务监控、指挥调度常见的业务表达形态&#xff0c;常有可视化的图表、效果装饰、事件操作等技术组成酷炫的效果展示。 配置入口 进入JVS-BI&#xff08;bi.bctools.cn&#xff09;&#xff0c;进入大屏页面&#xff0c;如下图所示 ①…...

编程日记 2023/10/31 10:31:12

uniapp 中添加 vconsole

uniapp 中添加 vconsole 一、安装 vconsole npm i vconsole二、使用 vconsole 在项目的 main.js 文件中添加如下内容 // #ifdef H5 // 提交前需要注释 本地调试使用 import * as vconsole from "vconsole"; new vconsole() // 使用 vconsole // #endif三、成功...

编程日记 2023/10/31 10:30:11

目标检测 YOLOv5 预训练模型下载方法

目标检测 YOLOv5 预训练模型下载方法 flyfish https://github.com/ultralytics/yolov5 https://github.com/ultralytics/yolov5/releases 可以选择自己需要的版本和不同任务类型的模型 后缀名是pt...

编程日记 2023/10/31 10:29:10

第16章_变量、流程控制与游标

第16章_变量、流程控制与游标 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 1. 变量 在MySQL数据库的存储过程和函数中&#xff0c;可以使用变量来存储查询或计算的中间结果数据&#xff0c;或…...

编程日记 2023/10/31 10:27:05

谁知道腾讯云轻量服务器“月流量”是什么意思？

腾讯云轻量服务器月流量什么意思&#xff1f;月流量是指轻量服务器限制每月流量的意思&#xff0c;不能肆无忌惮地使用公网&#xff0c;流量超额需要另外支付流量费&#xff0c;上海/广州/北京等地域的轻量服务器月流量不够用超额部分按照0.8元/GB的价格支付流量费。阿腾云aten…...

编程日记 2023/10/31 10:26:03

算法笔记【4】-冒泡排序法改进

一、冒泡排序缺点 冒泡排序是一种简单但效率较低的排序算法。冒泡排序通过比较相邻元素并交换位置来实现排序。具体而言&#xff0c;它从数组的第一个元素开始&#xff0c;依次比较相邻的两个元素&#xff0c;如果顺序错误则交换它们的位置&#xff0c;直到整个数组排好序为止…...

编程日记 2023/10/31 10:21:52

cocos creator 资源管理

cocos creator 在使用过程中&#xff0c;经常需要动态加载远端资源&#xff0c;比日说 用户头像&#xff0c;龙骨动画皮肤资源&#xff0c;这些资源不可能都做成 预制体交给 cocos creator 帮助我们管理&#xff1b; 这个时候就需要我们 动态加载远端资源&#xff08;但是 动态…...

编程日记 2023/10/31 10:18:47

好用的API调试工具推荐：Apipost

随着数字化转型的加速&#xff0c;API&#xff08;应用程序接口&#xff09;已经成为企业间沟通和数据交换的关键。而在API开发和管理过程中&#xff0c;API文档、调试、Mock和测试的协作显得尤为重要。Apipost正是这样一款一体化协作平台&#xff0c;旨在解决这些问题&#xf…...

编程日记 2023/10/31 10:17:46

贪心算法学习——最长单调递增子序列

目录 ​编辑 一&#xff0c;题目 二&#xff0c;题目接口 三&#xff0c;解题思路和代码 一&#xff0c;题目 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组…...

编程日记 2023/10/31 10:16:45

银行家算法（Python实现）

银行家算法&#xff0c;以及安全检测算法&#xff1a; import copy# 银行家算法&#xff08;资源分配合法性&#xff09; def BankersAlgorithm(Process_num, Resources_num, Request, Max, Available, Allocation, Need):PID Request[PID] # 获取发起请求的进程ID# Step1.如…...

编程日记 2023/10/31 10:15:43

安装终端 ·Terminator

安装终端 在 ROS 中&#xff0c;需要频繁的使用到终端&#xff0c;且可能需要同时开启多个窗口&#xff0c;推荐一款较为好用的终端:**Terminator。**效果如下: 1.安装 sudo apt install terminator2.添加到收藏夹 显示应用程序 —> 搜索 terminator —> 右击 选择 添…...

编程日记 2023/10/31 10:14:40

【Python文件操作的其他例子】

A.Python文件操作的其他例子 当然&#xff0c;以下是一些Python文件操作的其他例子&#xff1a; 1. 读取文件内容&#xff1a; with open(example.txt, r) as f:content f.read()print(content)这个例子会打开名为’example.txt’的文件&#xff0c;读取其内容&#xff0c;…...

编程日记 2023/10/31 10:13:37

使用Terraform管理已经存在的kubernates和默认的节点池

背景&#xff1a; 通过terraform resource "alicloud_cs_managed_kubernetes" "k8s" {...}创建集群时&#xff0c;会产生一个默认的节点池default-nodepool&#xff0c;但是如何去修改这个默认节点池的信息呢&#xff1f; 解决思路&#xff1a; 因为Ter…...

编程日记 2023/10/31 10:12:37

在HTML当中引入Vue控件，以element-ui为例

前情&#xff1a;需要实现一个同时满足按天、按周、按月选择的时间选择器&#xff0c;但是以HTML为基础写的都不太满足我的要求&#xff0c;要么只能按天选择&#xff0c;要么就是想选择久远的时间得点很久&#xff0c;除非自己写捷径&#xff0c;所以就看上了element-ui的这个…...

编程日记 2023/10/31 10:11:35

UE5实现相机水平矫正

UE5实现相机水平矫正 思路&#xff0c;用HIT获得基于相机视角的 离散采样点&#xff0c;然后根据距离相机距离进行权重分析。 距离越近&#xff0c;采样约中心&#xff0c;即越接近人眼注意点&#xff0c;最后算出加权平均高度&#xff0c;赋予给相机&#xff0c;相机将水平旋…...

编程日记 2023/10/31 10:10:34

Word插入Latex语句并编译为数学公式

WPS不可行&#xff0c;正版word可以&#xff08;垃圾WPS&#xff09; 选中Latex语句并按下Alt &#xff08;此处以后补一张图&#xff09; 该方法不需要额外安装什么插件哦&#xff01;...

编程日记 2023/10/31 10:09:32

Google Play PolicyBytes 政策更新中文视频 | 2023 年 10 月

Google Play 持续帮助开发者开启成功出海之旅&#xff0c;为用户提供安全优质的应用。也感谢大家与我们携手合作&#xff0c;继续努力将 Google Play 打造为一个安全可信赖的平台。欢迎您观看 Google Play PolicyBytes 中文视频了解 2023 年 10 月政策更新内容&#xff0c;更及…...

编程日记 2023/10/31 10:08:32

pytorch-fastrcnn识别王者荣耀敌方英雄血条

文章目录 前言效果如下实现训练数据获得训练数据和测试数据yaml文件训练py画框文件的修改py测试py升级 前言 最近看王者荣耀视频看到了一个别人提供的一个百里自动设计解决方案,使用一个外设放在百里的二技能上,然后拖动外设在屏幕上滑动,当外设检测到有敌方英雄时外设自动松开…...

编程日记 2023/10/31 10:06:29

阿里云推出通义千问App，提供全方位的协助

&#x1f989; AI新闻 &#x1f680; 阿里云推出通义千问App&#xff0c;提供全方位的协助 摘要&#xff1a;阿里云旗下大模型通义千问App登陆各大安卓应用市场&#xff0c;具有超大规模预训练模型&#xff0c;可在创意文案、办公助理、学习助手、趣味生活等方面协助用户。功…...

编程日记 2023/10/31 10:05:26

深入解析 Spring Framework 中 @Autowired 注解的实现原理

关于Autowired注解的作用 Autowired 注解在Spring中的作用是实现依赖注入&#xff08;Dependency Injection&#xff09;&#xff0c;它用于自动装配&#xff08;autowiring&#xff09;Spring Bean 的依赖关系。具体来说&#xff0c; Autowired 注解有以下作用&#xff1a; …...

编程日记 2023/10/31 10:04:25

电脑数据文件恢复工具easyrecovery14中文版

当不小心将回收站的文件删除了怎么办&#xff1f;想找回但是不知道怎么找回需要的数据文件&#xff1f;别担心今天小编就为大家介绍一款非常专业的电脑数据文件恢复工具&#xff0c;easyrecovery14是由Ontrack专为电脑用户推出的一款专业的数据恢复软件&#xff0c;这款软件功能…...

编程日记 2023/10/31 10:03:23

Android NDK开发详解之Application.mk探秘

Android NDK开发详解之Application.mk探秘 概览变量APP_ASFLAGSAPP_ASMFLAGSAPP_BUILD_SCRIPTAPP_CFLAGSAPP_CLANG_TIDYAPP_CLANG_TIDY_FLAGSAPP_CONLYFLAGSAPP_CPPFLAGSAPP_CXXFLAGSAPP_DEBUGAPP_LDFLAGSAPP_MANIFESTAPP_MODULESAPP_OPTIMAPP_PLATFORMAPP_PROJECT_PATHAPP_STL…...

编程日记 2023/10/31 10:02:21

（草履虫都可以看懂的）PyQt子窗口向主窗口传递参数，主窗口接收子窗口信号、参数。

子窗口向主窗口发射信号。 只需要插入两行代码 class CodeSettingWindow(Ui_CodeSetting, QMainWindow):_signal pyqtSignal(int, int, int) # 这个信号要放在class之下&#xff0c;———init————函数上def __init__(self):# self.Win_X, self.Win_Y, self.CodeNum表示…...

编程日记 2023/10/31 9:59:14

Golang Web3钱包开发指南

简介 以太坊&#xff08;Ethereum&#xff09;是目前最受欢迎的区块链平台之一&#xff0c;它提供了智能合约功能和去中心化应用&#xff08;DApps&#xff09;的开发能力。在以太坊生态系统中&#xff0c;Web3钱包扮演着关键角色&#xff0c;允许用户管理账户和密钥、发送交易…...

编程日记 2023/10/31 9:58:13