(JavaScript学习记录)：DOM 操作元素（续）

写在前面：参考哔哩哔哩黑马程序员pink老师教程
地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

操作元素

排他思想

案例：百度换肤

案例：表格隔行变色

案例：表单全选取消全选案例

自定义属性的操作

获取属性值

设置属性值

移除属性

案例：自定义属性

案例：tab 栏切换（重点案例）

H5自定义属性

设置H5自定义属性

获取H5自定义属性

案例：H5自定义属性

操作元素

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式（留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
案例：排他思想(算法)
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1. 获取所有按钮元素var btns = document.getElementsByTagName('button');// btns得到的是伪数组  里面的每一个元素 btns[i]for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// (1) 我们先把所有的按钮背景颜色去掉  干掉所有人for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// (2) 然后才让当前的元素背景颜色为pink 留下我自己this.style.backgroundColor = 'pink';}}//2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想</script>
</body>

案例：百度换肤

案例分析

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}body {background: url(images/1.jpg) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style>
</head><body><ul class="baidu"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li><li><img src="images/4.jpg"></li></ul><script>// 1. 获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img');// console.log(imgs);// 2. 循环注册事件 for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// this.src 就是我们点击图片的路径   images/2.jpg// console.log(this.src);// 把这个路径 this.src 给body 就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>
</body></html>

案例：表格隔行变色

案例分析

① 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
② 核心思路：鼠标经过 tr 行，当前的行变背景颜色， 鼠标离开去掉当前的背景颜色
③ 注意： 第一行（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table {width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}</style>
</head><body><table><thead><tr><th>代码</th><th>名称</th><th>最新公布净值</th><th>累计净值</th><th>前单位净值</th><th>净值增长率</th></tr></thead><tbody><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>// 1.获取元素 获取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script>
</body></html>

案例：表单全选取消全选案例

业务需求：
1. 点击上面全选复选框，下面所有的复选框都选中（全选）
2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选）
3. 如果下面复选框全部选中，上面全选按钮就自动选中
4. 如果下面复选框有一个没有选中，上面全选按钮就不选中
5. 所有复选框一开始默认都没选中状态

案例分析

① 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
② 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都
要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
③ 可以设置一个变量，来控制全选是否选中

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style></head><body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table></div><script>// 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可// 获取元素var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框// 注册事件j_cbAll.onclick = function() {// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中console.log(this.checked);for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function() {// flag 控制全选按钮是否选中var flag = true;// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中for (var i = 0; i < j_tbs.length; i++) {if (!j_tbs[i].checked) {flag = false;break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了}}j_cbAll.checked = flag;}}</script>
</body></html>

自定义属性的操作

获取属性值

element.属性 获取属性值。
element.getAttribute('属性');
区别：
element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值

element.属性 = ‘值’ 设置内置属性值。
element.setAttribute('属性', '值');
区别：
element.属性设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）

移除属性

element.removeAttribute('属性');

案例：自定义属性

<body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1. 获取元素的属性值// (1) element.属性console.log(div.id);//(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.getAttribute('id'));console.log(div.getAttribute('index'));// 2. 设置元素属性值// (1) element.属性= '值'div.id = 'test';div.className = 'navs';// (2) element.setAttribute('属性', '值');  主要针对于自定义属性div.setAttribute('index', 2);div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className// 3 移除属性 removeAttribute(属性)    div.removeAttribute('index');</script>
</body>

案例：tab 栏切换（重点案例）

当鼠标点击上面相应的选项卡（tab），下面内容跟随变化
案例分析

① Tab栏切换有2个大的模块
② 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
③ 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④ 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤ 核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
⑥ 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏（排他思想）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价（50000）模块内容</div><div class="item">手机社区模块内容</div></div></div><script>// 获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');// for循环绑定点击事件for (var i = 0; i < lis.length; i++) {// 开始给5个小li 设置索引号 lis[i].setAttribute('index', i);lis[i].onclick = function() {// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式// 干掉所有人 其余的li清除 class 这个类for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己 this.className = 'current';// 2. 下面的显示内容模块var index = this.getAttribute('index');console.log(index);// 干掉所有人 让其余的item 这些div 隐藏for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}// 留下我自己 让对应的item 显示出来items[index].style.display = 'block';}}</script>
</body></html>

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性

设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。
比如 <div data-index=“1”></div>
或者使用 JS 设置
element.setAttribute(‘data-index’, 2)

获取H5自定义属性

兼容性获取 element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

案例：H5自定义属性

<body><div getTime="20" data-index="2" data-list-name="andy"></div><script>var div = document.querySelector('div');// console.log(div.getTime);console.log(div.getAttribute('getTime'));div.setAttribute('data-time', 20);console.log(div.getAttribute('data-index'));console.log(div.getAttribute('data-list-name'));// h5新增的获取自定义属性的方法 它只能获取data-开头的// dataset 是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset);console.log(div.dataset.index);console.log(div.dataset['index']);// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法console.log(div.dataset.listName);console.log(div.dataset['listName']);</script>
</body>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

一条SQL查询语句是怎样执行的？
1.MySQL框架逻辑架构（包括各组件和作用） MySQL框架逻辑架构主要分为两层：Server层和存储引擎层。 1.1Server层 1.组件： 连接器：负责和客户端建立连接，获取权限，维持和管理连接。查询缓存&…...
2024/5/7 15:55:20
Filecoin即将在CoinList Pro上线!
据悉，CoinList Pro即将上线Filecoin，其可能是唯一一家能够在主网推出的第一天就支持Filecoin的交易所。CoinList将免费提供Filecoin托管服务，并以各种方式让您参与Filecoin生态系统。 Filecoin是旨在存储人类社会最重要信息的分布式网络。作…...
2024/5/5 22:23:55
拆分字符串中的数字与字符串
文章目录背景实现背景有一前端传过来的字符串，格式：字母英文，要拿到字母给它变色，所以得拆分。用的是String的内置方法，一回首，看到String的四十多个方法，有空得把String写一写温顾下。实现 …...
2024/4/17 18:11:01
13、leetcode349、剑指Offer17
349. 两个数组的交集给定两个数组，编写一个函数来计算它们的交集。示例 1： 输入：nums1 [1,2,2,1], nums2 [2,2] 输出：[2]示例 2： 输入：nums1 [4,9,5], nums2 [9,4,9,8,4] 输出：[9,4] …...
2024/4/25 6:12:31
java-web（四） Cookie && Session
四、Cookie && Session 会话概述会话基本概念日常生活中：从拨通电话到挂断电话之间的一连串你问我答的过程就是一个会话 B/S架构中：从浏览器第一次给服务器发送请求时，建立会话；直到有一方断开，会话结束 …...
2024/4/27 23:55:37
北京自贸区国际商务服务片区挂牌总面积48平方公里
9月28日上午，朝阳区政府、通州区政府、顺义区政府举办了中国（北京）自由贸易试验区国际商务服务片区挂牌仪式。该片区将重点发展数字贸易、文化贸易、商务会展、医疗健康、国际寄递物流、跨境金融等产业，打造临空经济创新引领示范区…...
2024/5/7 3:03:09
docker——docker安全通信TLS
安全通信TLS一、TLS概述二、实验2.1 实验目的2.2 实验环境2.3 实验步骤一、TLS概述安全传输层协议（TLS）用于在两个通信应用程序之间提供保密性和数据完整性。该协议由两层组成： TLS 记录协议（TLS Record）和 TLS 握手…...
2024/4/24 8:50:09
RDD用法与实例（十一）Spark中master、worker、executor和driver的关系，通过broadcast形成共享和直接生成全局变量的区别
Spark中master、worker、executor和driver的关系参考来源1 master是大哥，worker是工人小弟们。master大哥有一个副手老二叫driver，手上管着一批货物executor（memory cpu等资源），老二会问大哥咋分给小弟们呢&#xf…...
2024/5/8 4:13:09
动态规划 --- Leedcode 322 零钱兑换问题
题目给定不同面额的硬币 coins 和一个总金额 amount。编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1。示例 1: 输入: coins [1, 2, 5], amount 11 输出: 3 解释: 11 5 5 1示例 2: 输入: coins [2…...
2024/5/7 16:31:27
sentinel 限流熔断
运行下载最新sentinel.jar cmd运行: java -Dserver.port8858 -Dcsp.sentinel.dashboard.serverlocalhost:8858 -Dproject.namesentinel-dashboard -jar sentinel-dashboard-1.8.0.jar 访问localhost:8858即可访问，用户名和密码同：sentinel. 服务提…...
2024/5/8 4:19:56
mysql8修改初始化密码出现 Your password does not satisfy the current policy requirements
原因：mysql8密码要求较高，你设置的太过简单。措施： 1、先修改一个符合标准的密码 ALTER USER rootlocalhost IDENTIFIED BY Li!123456;2、查看validate_password全局变量是否存在 SHOW VARIABLES LIKE validate_password%;出现这个图面是…...
2024/5/7 2:42:00
使用idea工具与mysql关联，快速生成实体类
1. 2. 3. 4. 5....
2024/4/21 17:41:04
SpringBoot(9) —— JSR303校验
目录1.什么是JSR303校验2.怎么使用JSR303校验3.测试1.什么是JSR303校验 JSR-303 是 JAVA EE 6 中的一项子规范，叫做 Bean Validation，官方参考实现是Hibernate Validator此实现与 Hibernate ORM 没有任何关系。JSR 303 用于对 Java Bean 中的字段的值进…...
2024/4/25 14:00:39
IP地址定位 API 接口
IP地址定位 API 接口根据 IP 地址进行定位查询。 1. 产品功能提供精准、高效的 IP 地址定位查询；返回的 IP 定位地址包含详细的位置信息；全接口支持 HTTPS（TLS v1.0 / v1.1 / v1.2 / v1.3）；全面兼容 Apple ATS&…...
2024/4/12 12:11:51
API使用和环境搭建
1 导包 mybatis-3.3.0.jarmysql-connector-java-5.1.38-bin.jarlog4j-1.2.17.jar![在这里插入图片描述](https://img-blog.csdnimg.cn/20200928115754602.png#pic_center)2 创建MyBatis配置文件在src下创建 mybatis-config.xml <?xml version"1.0" encoding&qu…...
2024/4/24 23:18:35
yml实现不同服务器之前切换配置
yml实现不同服务器之前切换配置简单修改配置即可完成读取不同配置文件操作。步骤如下： 1. 添加相关配置文件 ； 2. 相关配置如下，目前仅用来测试； 3. 配置yml文件； 修改active即可实现指定读取不同配置文件 spr…...
2024/4/28 9:18:12
Airtest移动端自动化测试环境搭建一
Airtest移动端自动化测试环境搭建一 1.概述 Airtest是一个UI界面自动化测试框架，本文介绍如何搭建Airtest测试环境，并实现Android自动化测试Demo。 2.自动化项目搭建 2.1.下载AirtestIDE安装开发工具 2.1.1.AirtestIDE下载地址 http://airtest.netea…...
2024/4/25 20:09:26
Servlet容器适用场景
Jetter（长连接）：web聊天 Undertow（不支持JSP)...
2024/4/27 21:06:12
一篇搞定系列-go
自动垃圾回收 C和C从程序性能的角度考虑，允许程序员自己管理内存，包括内存的申请和释放等等，虽然C和C运行起来很快，但没有注意垃圾回收机制，会导致潜在的内存泄露、野指针等问题。 java和C#引入了GC机制，即…...
2024/4/30 5:12:19
JAVA架构师，系统架构
JAVA架构师，系统架构 1、概述 JAVA高级架构师，微服务架构全新JAVA高级架构师，微服务架构，亿级高并发，分布式架构，源码剖析系列，项目实战，设计模式实战，数据结构与算法&a…...
2024/4/25 22:48:48

(JavaScript学习记录)：DOM 操作元素（续）

操作元素

排他思想

案例：百度换肤

案例：表格隔行变色

案例：表单全选取消全选案例

自定义属性的操作

获取属性值

设置属性值

移除属性

案例：自定义属性

案例：tab 栏切换（重点案例）

H5自定义属性

设置H5自定义属性

获取H5自定义属性

案例：H5自定义属性

相关文章

最新文章