【Web前端笔记-基础】第十四课，Javascript的排他思想

最新推荐文章于 2024-05-06 10:05:56 发布
最新推荐文章于 2024-05-06 10:05:56 发布
阅读量358 收藏
点赞数
分类专栏： JavaScript Web 前端基础笔记 文章标签： 排他思想 Javascript 换肤 表格换行换色 表单全选取消
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42250032/article/details/103306393
版权
本文介绍了JavaScript中的排他思想，强调在一组元素中，通过清除其他元素样式并为特定元素添加样式来实现功能。文中通过三个小案例进行说明：百度换肤功能的实现，表格行交替颜色的设置，以及表单全选与取消功能的实现。
摘要由CSDN通过智能技术生成

一：排他思想

如果有同一组元素，想要某个元素实现某种样式，需要用到排他思想。

  1. 先将其他元素的这个属性清空（干掉他人）。
  2. 在这个特殊元素下添加表现（留下自己）。

二：小案例

1.百度换肤，点击相应的图片，背景变成相应的图片。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度换肤</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			 body{
				 background-image: url(../img/BDOne.jpg);
				 background-repeat: no-repeat;
				 background-size: cover;
			 } 
			.baidu{
				overflow: hidden;
				margin: 100px auto;
				background-color: #FFFFFF;
				width: 410px;
				padding-top: 3px;
			}
			.baidu li{
				list-style: none;
				float: left;
				margin: 0 1px;
				
			}
			
			.baidu li img{
				width: 100px;
				cursor: pointer;
			}
			
		</style>
	</head>
	<body>
		
		<ul class="baidu">
			<li><img src="../img/BDOne.jpg" ></li>
			<li><img src="../img/BDTwo.jpg" ></li>
			<li><img src="../img/BDThree.jpg" ></li>
			<li><img src="../img/BDFour.jpg" ></li>
		</ul>
		
		<script type="text/javascript">
			//1获取元素
			var imgs=document.querySelector(".baidu").querySelectorAll("img");
			for(var i=0;i<imgs.length;i++){
				imgs[i].onclick=function(){
					//将这个路径给<body>
						document.body.style.backgroundImage='url('+this.src+')';
					
				}
			}
		</script>
	</body>
</html>

效果：

2.表格换行变色

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格隔行变色</title>
		<style type="text/css">
			table{
				margin: 100px auto;
				height: 30px;
				text-align: left;	
			}
			table thead{
				background-color: skyblue;
			}
			tbody td{
				border-bottom: 1px solid #d7d7d7;
				font-size: 12px;
				color: blue;
			}
			.bg{
				background-color: rgb(222, 225, 230);
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="5px">
			<thead>
				<tr>
					<th>属性名</th>
					<th>值</th>
					<th>含义</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>color</td>
					<td>#ff0000或red或rgb(3,5,8)</td>
					<td>给文本设置颜色</td>
				</tr>
				<tr>
					<td>text-align</td>
					<td>left,right,center</td>
					<td>文本水平对齐方向</td>
				</tr>
				<tr>
					<td>text-decoration</td>
					<td>none,underline,overline,line-through</td>
					<td>文本修饰线</td>
				</tr>
				<tr>
					<td>text-transform</td>
					<td>capitalize,uppercase,lowercase</td>
					<td>大小写转换，首字母大写</td>
				</tr>
				<tr>
					<td>line-height</td>
					<td>固定值或百分比</td>
					<td>文字行高</td>
				</tr>
				<tr>
					<td>text-indent</td>
					<td>px,em</td>
					<td>文本首行缩进</td>
				</tr>
				<tr>
					<td>letter-spacing</td>
					<td>px</td>
					<td>字符间距</td>
				</tr>
				<tr>
					<td>word-spacing</td>
					<td>px</td>
					<td>单词间距</td>
				</tr>
			</tbody>
			
		</table>
		
		<script type="text/javascript">
			//1.获取元素
			var trs=document.querySelector("tbody").querySelectorAll("tr");
			//利用循环注册事件
			for(var i=0;i<trs.length;i++){
				//鼠标经过事件
				trs[i].onmouseover=function(){
					this.className="bg";
				}
				trs[i].onmouseout=function(){
					this.className="";
				}
			}
		</script>
	</body>
</html>

 

效果：

3.表单的全选取消

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单全选取消全选</title>
		<style type="text/css">
			table{
				margin: 100px auto;
				height: 30px;
				width: 320px;
				
			}
			thead th{
				background-color: skyblue;
				border: 1px solid #d7d7d7;
			}
			tbody td{
				
				font-size: 12px;
				border: 1px solid #d7d7d7;
			}
			.bg{
				background-color: rgb(222, 225, 230);
			}
		</style>
	</head>
	<body>
		<table  cellspacing="0" cellpadding="">
			<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>
		
		<script>
			//1.获取事件源
			var trs=document.querySelector("tbody").querySelectorAll("tr");
			var j_cbAll=document.getElementById("j_cbAll");//全选按钮
			var j_tb=document.getElementById("j_tb").getElementsByTagName('input');//下面所有的复选框
			console.log(j_cbAll);
			//2.注册事件，处理程序
			for(var i=0;i<trs.length;i++){
				//鼠标经过事件
				trs[i].onmouseover=function(){
					this.className="bg";
				}
				trs[i].onmouseout=function(){
					this.className="";
				}
			}
			//2.注册事件处理程序:全选和取消全选
			j_cbAll.onclick=function(){
				
					for(var j=0;j<j_tb.length;j++){
						j_tb[j].checked=this.checked;
						 
					}
			}
			//2.注册事件处理程序:下面影响上面的
			for (var i = 0; i < j_tb.length; i++) {
				j_tb[i].onclick=function(){
					//每次点击循环检查4个按钮是否都选中
					//控制全选按钮是否选中
					var flag=true;
					for (var i = 0; i < j_tb.length; i++) {
						if(!j_tb[i].checked){
							flag=false;
							break;//提高执行效率
						}
					}
					j_cbAll.checked=flag;
				}
			}
		</script>
	</body>
</html>

效果：

好好学习嘿嘿嘿
关注
专栏目录
前端排他思想
luoshen2022的博客
03-11 1431
之前写排他思想的时候都是用最原始的for循环，后来学习了更多的知识以后，发现其实有很多种写法，以下只是我对个人学习的一个整理，肯定还有更多的写法。
Web前端知识点总结(持续更新中...)
m0_60472527的博客
10-18 3191
web知识点
JS排他思想-前端之路
m0_48486617的博客
09-11 828
排他思想 干掉所有人包括自己 复活自己 练习 实现功能就是 点击 对应的 按钮 来切换body的颜色背景 然后 在点击第一个按钮的时候 使用 排他思想 第一个按钮的背景颜色变成 黑色 字体变成白色 其他按钮样子还是 默认样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
javascript排他思想
W_F_S_M的博客
06-21 167
排他思想是给一组相同元素添加相同的事件，利用for循环来一次实现某一个元素的事件的方法首先要给每个元素添加事件，清楚每个元素的样式，再单独给当前元素添加样式代码如下：
JavaScript之排他思想
qq_45272615的博客
09-21 349
什么是排他思想？ 顺序一定不能颠倒 例：有5个按钮，当点击某一个按钮时，改变其背景颜色， 来实现此操作，第一想到的肯定是使用for循环，外加onclick点击事件，但是如果使用onclick function来实现的话，要写五次function，代码很繁琐，如果有很多个按钮，那实现起来真的想都不敢想，那么使用排他思想就会很快的实现。 js代码： <script> //获取按钮 var btns = document...
JavaScript排他思想
qq_61716556的博客
05-22 2149
什么是排他思想？ 排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。 排他思想的优势 排他思想适用于为多个同类型元素设置样式或效果的情况。避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变。 实现排他思想的步骤 为全部元素设置一般效果 为特定元素设置特定效果 <!DOCTYPE html> <html lang="en"> <head&gt
黑马JavaScript核心操作BOM与DOM课程笔记1-DOM
weixin_42413901的博客
04-25 710
一、Web APIs 简介 此部分的目标：能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性； 能够说出什么是 API； 能够说出什么是 Web API. 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 2. API 和 Web API 2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软
2024年Web前端最新前端必备技能——轮播图（原生代码+插件）(2)，2024前端精选面试实战总结整理
最新发布
2401_84433570的博客
05-06 758
思路：我们先定义一个全局变量num，当我们点击一下就自增一次，然后滚动的距离就是ul的滚动距离，ul滚动距离=num*图片宽度。//一定写成this。// 别移动的距离=小圆圈的索引号*图片的宽度（注意是负值从右往左走）// 解决bug1：当我们点击了某个li就拿到当前li的索引号给num。// 解决bug2：当我们点击了某个li 就把li的索引号给yuan。// 如果yuan==4说明走到最后我们克隆的这张图片 我们就复原。
跟着pink老师学前端之JavaScript-DOM
weixin_46548238的博客
06-26 1823
文章目录1. WebAPIs1.1 什么是DOM1.2 DOM树2. 获取元素2.1 根据id获取2.2 根据标签名获取3. 事件基础3.1 事件三要素3.2 执行事件的步骤4. 操作元素4.1 改变元素内容4.2 修改元素属性1. 点击不同按钮切换图片案例2. 分时问候案例3. 密码隐藏显示案例4. 样式属性操作(1) 行内样式操作关闭二维码案例循环精灵图背景案例显示隐藏文本框案例(2) 类名样式操作密码框判断格式案例5. 排他思想仿百度换肤案例表格变色案例全选反选案例6. 自定义属性操作5. 结点操作1
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
javascript中的排他思想
2301_80174941的博客
05-05 222
如果有同一组元素，想要其中某一个元素实现某种样式， 而其他元素为默认样式，需要用到循环的排他思想算法。3. 注意顺序不能颠倒，首先清除所有元素样式，再设置选中元素样式。点击不同按钮，当前按钮 变为粉色，其余按钮保持默认颜色。1. 所有元素全部清除样式。2. 给当前元素设置样式。
前端DOM-排他思想
qq_57244888的博客
06-01 238
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
JavaScript--【JS】排他思想
ZJie0的博客
03-06 443
排他思想 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法 先找到所有的元素 消灭所有的元素样式，改成初始样式 然后留下自己，设置特定样式 注意：顺序不能颠倒，先消灭后自己 window.onload=function(){ // 【1】选择所有的相关元素 // .getElementsByTagName("li") var lis=document.querySelectorAll(".
前端学习（834）：排他思想
歌谣的博客
04-13 469
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
6、排他思想（算法）
weixin_45998542的博客
12-16 117
6、排他思想（算法） 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button>
Web前端开发笔记51——jQuery排他思想、获取当前元素索引、链式编程
DRLDER的博客
05-16 203
1.Jquery的排他思想我们使用一个示例来演示一下： <body> <button>"click"</button> <button>"click"</button> <button>"click"</button> <button>"click"</button> <button>"click"</button> <button>"click"</bu
Web API-排他思想及其案例
crystal_iwwish的博客
10-07 129
通过循环将其他元素调整为B状态，通过this或者下标将当前元素调整为A状态 案例-按钮切换（只允许一个按钮有背景颜色） <style> .pink { background: orangered; } </style> <body> <button>第1个</button> <button>第2个</button> .
前端JavaScript基础学习笔记：李立超老师课程总结
"李立超前端JavaScript基础个人总结笔记，基于B站UP主李立超的视频课程，详细记录了JavaScript基础知识，包括Markdown格式和PDF版本，适合前端初学者配合视频学习，笔记内容涵盖核心概念和代码示例，将持续更新前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值