前端DOM-排他思想

已于 2022-06-02 19:46:20 修改
阅读量183 收藏 1
点赞数 1
分类专栏： DOM 文章标签： 前端 javascript html
于 2022-06-01 15:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57244888/article/details/125074119
版权
本文探讨了前端开发中的排他思想，通过清除样式并为当前元素设置样式来实现特定效果。以百度换肤为例，讲解了如何利用循环为一组元素注册点击事件，点击后将图片作为页面背景。同时，文章还介绍了表格隔行变色的业务需求，以及全选和取消全选的复选框实现策略，强调了循环和事件处理在这些场景中的应用。
摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、排他思想是什么？

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

  1. 所有元素全部清除样式（干掉其他人）
  2. 给当前元素设置样式 （留下我自己）
  3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

二、案例：百度换肤

1.案例分析

1.这个案例练习的是给一组元素注册事件
2.给4个小图片利用循环注册点击事件
3.当我们点击了这个图片，让我们页面背景改为当前的图片
4.核心算法： 把当前图片的src 路径取过来，给 body 做为背景即可

2.介绍

录像1

3.代码块

<body>
    <ul class="baidu">
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li
最低0.47元/天 解锁文章
猪咪敲代码
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端排他思想
luoshen2022的博客
03-11 1423
之前写排他思想的时候都是用最原始的for循环，后来学习了更多的知识以后，发现其实有很多种写法，以下只是我对个人学习的一个整理，肯定还有更多的写法。
JavaScript之排他思想详述，一线互联网公司面经总结
最新发布
2401_84097820的博客
04-03 637
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！[外链图片转存中…(img-NAnUGXDM-1712119729042)]
12前端学习之WebAPI(二):排他思想、自定义属性操作、节点操作
浅弋、璃鱼的博客
04-06 447
文章目录一、排他操作:1. 排他思想:2. 案例:换肤:3. 案例：表格隔行变色 一、排他操作: 1. 排他思想: 如果有同一组元素，想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <bu...
前端学习（834）：排他思想
歌谣的博客
04-13 461
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
JS---排他思想及Tab栏的切换
热门推荐
F__Rong的博客
07-30 1万+
JS的排他思想及tab栏切换,利用数组，循环，自定义属性，通过标签名字选择等
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
前端开源库-dom-element-watcher
08-30
**前端开源库-dom-element-watcher** 是一个专为前端开发者设计的轻量级库，它的主要功能是**监视DOM元素的变化**。在Web开发中，DOM（文档对象模型）是HTML或XML文档的结构化表示，它允许JavaScript与网页内容进行...
前端开源库-html-dom-parser
08-30
HTML DOM Parser是一款重要的前端开源库，它主要用于将...总的来说，html-dom-parser是一个强大的工具，为前端开发者提供了方便的HTML到DOM的转换功能，极大地简化了HTML文档的操作和处理，是前端开发中的重要利器。
前端开源库-dom-stub
08-30
`dom-stub`是一个针对前端应用的开源库，专门设计用于模拟DOM（Document Object Model）节点，以便在测试环境中替代真实的DOM操作。这个库提供了最小化的DOM节点模拟，允许开发者在没有浏览器环境或者不直接操作真实...
dom-to-to-retina视网膜：dom-to-to-retina，但生成高分辨率图像
03-04
用法import { toPng , toJpeg , toBlob } from "dom-to-image-retina"const dataUrl = await toPng ( el , options )const dataUrl = await toJpeg ( el , options )const blob = await toBlob ( el , options )执照...
JS排他思想-前端之路
m0_48486617的博客
09-11 818
排他思想 干掉所有人包括自己 复活自己 练习 实现功能就是 点击 对应的 按钮 来切换body的颜色背景 然后 在点击第一个按钮的时候 使用 排他思想 第一个按钮的背景颜色变成 黑色 字体变成白色 其他按钮样子还是 默认样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
【Web前端笔记-基础】第十四课，Javascript的排他思想
嘿嘿嘿的博客
11-29 331
一：排他思想 如果有同一组元素，想要某个元素实现某种样式，需要用到排他思想。 先将其他元素的这个属性清空（干掉他人）。 在这个特殊元素下添加表现（留下自己）。 二：小案例 1.百度换肤，点击相应的图片，背景变成相应的图片。 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8...
js使用排他思想实现导航栏的切换
Evan_QB的博客
08-29 3880
导航栏的切换 html代码如下: 鞋子 袜子 帽子 裤子 裙子 鞋子 袜子 帽子 裤子 裙子 鞋
前端基础 - 案例 （四） 排他思想 和 实现全选
真実はただ一つ。
12-16 222
案例 排他思想 先找到所有的元素 消灭所有的元素样式，改成初始样式 然后留下自己，设置特定样式 注意：顺序不能颠倒，先消灭后自己 window.onload=function(){ // 【1】选择所有的相关元素 // .getElementsByTagName("li") var lis=document.querySelectorAll(".choose>li"); // lis是一
JS——排他思想—最简单最常用的一种！！
qq_44945999的博客
03-25 2210
一、应用场景 1.轮播图下方的小圆点 2.按钮的选择 3.如果有一组元素，想要其中某个元素实现某种样式，就需要利用循环的排他思想（上面只是举例说明^ _ ^） 二、排他思想实现步骤 1.所有元素清除样式（干掉其他人） 2.给当前元素设置样式（留下我自己） 注意顺序不能颠倒 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>排他思想案例</title> &l
JS之排他思想
与优秀的你同在
05-10 4722
文章目录1. 什么是排他思想呢？2. 小案例 1. 什么是排他思想呢？ 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 1.所有元素全部清除样式（干掉其他人） 2. 给当前元素设置样式 （留下我自己） 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己 2. 小案例 我们通常会在浏览淘宝的时候会遇到选择商品属性， 选择一个后另选一个，第一个则会消失，这种效果就可以用排他思想来实现。 //简单使用几个按钮来实现 <button>按钮</butto
Web前端开发笔记51——jQuery排他思想、获取当前元素索引、链式编程
DRLDER的博客
05-16 193
1.Jquery的排他思想我们使用一个示例来演示一下： <body> <button>"click"</button> <button>"click"</button> <button>"click"</button> <button>"click"</button> <button>"click"</button> <button>"click"</bu
JS的排他思想
weixin_33961829的博客
06-07 1719
一、前言 Tab栏效果切换是常见的功能需求，它实际上运用的就是JS的排他思想。 那么，什么是排他思想呢？ 简而言之，就是在监听成立时，先把所有的样式清除为空，随后按照需求添加需要的样式。 二、案例分析 1. 需求分析 鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类); 2. 功能实现 思路：1.点亮盒子。 2.利用索引值显示盒子。 步骤： 1.获取事件源和相关元...
DOM-XSS漏洞挖掘与攻击面全面解析
常见的DOM-XSS漏洞位置包括： 1. URL代入页面: 在页面加载时，某些用户输入字段可能导致URL被恶意注入，如搜索框、表单提交等。攻击者通过构造恶意URL，利用location.href属性获取location.search和location.hash中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值