排他思想与自定义属性

1、排他操作

排他思想

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

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

<!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>
</head><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></html>

2、案例：百度换肤

案例分析：

这个案例练习的是给一组元素注册事件
给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="data:images/1.jpg"></li><li><img src="data:images/2.jpg"></li><li><img src="data:images/3.jpg"></li><li><img src="data: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>

3、案例：表格隔行变色

案例分析：

用到新的鼠标事件，鼠标经过 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>

4、案例：全选

案例分析：

全选和取消全选做法：让下面所有复选框的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>

5、自定义属性操作

5.1、获取属性值

方法名	说明
element.属性	获取属性值
element.getAttribute('属性')	获取属性值

区别：

element.属性：获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')：主要获得自定义的属性值（标准），我们程序猿自定义的属性

5.2、设置属性值

方法名	说明
element.属性 = '值'	设置内置属性值
element.setAttribute('属性', '值')	设置属性值

区别：

element.属性 = '值' , 设置内置属性值。
element.setAttribute('属性', '值') ，主要设置自定义的属性

5.3、移出属性

方法名	说明
element.removeAttribute('属性');	移除属性值

5.4、检查属性与获取属性集合

elem.hasAttribute(name) — 检查特性是否存在。
elem.attributes

attribute具备以下特征：

它们的名字是大小写不敏感的（id 与 ID 相同）。
它们的值总是字符串类型的。

5.5、元素的属性（property）

对于标准的attribute，会在DOM对象上创建与其对应的property属性：

在大多数情况下，它们是相互作用的

改变property，通过attribute获取的值，会随着改变；
通过attribute操作修改，property的值会随着改变；

除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：

这是因为它默认情况下是有类型的；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title>Document</title>
</head>
<body><!-- 元素中的属性称之为attribute --><!-- 标准的attribute在对应的对象模型中都有对应的property --><div age="18" class="box" height="1.88"id="abc" title="标题">我是box</div><input checked type="checkbox">账号: <input class="account" type="text"><button class="btn">设置input的值</button><script>// 对象中的属性称之为property// var obj = {//   // property//   name: "why"// }// 1.通过property获取attribute的值// 获取box元素var boxEl = document.querySelector(".box")console.log(boxEl.id, boxEl.title, boxEl.age, boxEl.height)// input元素var inputEl = document.querySelector("input")// if (inputEl.getAttribute("checked")) {//   console.log("checkbox处于选中状态")// }if (inputEl.checked) {console.log("checkbox处于选中状态")}console.log(typeof inputEl.checked)// 2.attribute和property是相互影响的boxEl.id = "aaaaa"console.log(boxEl.getAttribute("id"))boxEl.setAttribute("title", "哈哈哈")console.log(boxEl.title)// 3.比较特殊的情况, input设置值(了解)var accountInputEl = document.querySelector(".account")var btnEl = document.querySelector(".btn")btnEl.onclick = function () {accountInputEl.setAttribute("value", "kobe")// 优先级更高accountInputEl.value = "coderwhy"}</script></body>
</html>

5.6、示例

<!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>
</head><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></html>

5.7、案例：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>

5.8、H5自定义属性

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

（1）设置H5自定义属性

H5规定自定义属性以 data- 开头作为属性名并赋值

比如：<div data-index="1"></div>

或者使用js设置

element.setAttribute('data-index', 2)

（2）获取H5自定义属性

兼容获取：element.getAttribute('data-index')
H5新增 element.dataset.index 或者 element.dataset['index'] ，ie11才开始支持

<!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>
</head><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></html>

5.9、相关资料

链接：https://pan.baidu.com/s/1W3xMlyJ3_45dp2Xk_6TKfg?pwd=wwez

排他思想与自定义属性相关推荐

android 排他button,javascript排他思想
排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1.含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的 ...
JavaScript--【JS】排他思想
排他思想如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法先找到所有的元素消灭所有的元素样式,改成初始样式然后留下自己,设置特定样式注意:顺序不能颠倒,先消灭后自己 ...
排他思想（Js代码实现，有经典案例）
排他思想(js实现) 如果有同一组元素,外卖想要某一个元素实现某种样式,需要用到循环的排他思想算法: 所有元素全部清空样式(干掉其他人) 给当前元素设置样式(留下自己) 注意顺序不能颠倒,首先干掉其他 ...
jQuery 里面的排他思想
jQuery 里面的排他思想 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
什么是排他思想算法？（源码解析）
排他思想算法 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
编程思维---排他思想
排他思想:就是排除掉其他的(包括自己),然后再给自己设置想要实现的效果.总而言之,排他思想的实现步骤就是所有元素全部清除再设置当前元素. 大白话---简单总结:干掉兄弟,复活自己使用场景:1.Tab ...
DOM系列之排他思想
文章の目录 1.什么是排他思想 2.示例写在最后 1.什么是排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法所有元素全部清除样式(干掉其他人) 给当前元素设 ...
JavaScript排他思想
什么是排他思想? 排他思想是为一组同类型元素中的某一个元素设置样式时,采用的一种特定顺序.首先将所有元素的样式设置为一般样式(包括特定的某个元素),再为特定元素设置特定样式. 排他思想的优势排他思想 ...
JavaScript之排他思想详述
在前面的博客中,小熊更新了相关操作元素的方法,但是如果有同一组元素,我们想要某一个元素实现某种样式,这时需要怎么办呢? 这里就要用到循环的排他思想. 排他思想的算法就是: 排除掉其他的(包括自己),然 ...

排他思想与自定义属性

1、排他操作

2、案例：百度换肤

3、案例：表格隔行变色

4、案例：全选

5、自定义属性操作

5.1、获取属性值

5.2、设置属性值

5.3、移出属性

5.4、检查属性与获取属性集合

5.5、元素的属性（property）

5.6、示例

5.7、案例：tab栏

5.8、H5自定义属性

5.9、相关资料

排他思想与自定义属性相关推荐

最新文章

热门文章

排他思想与自定义属性

1、排他操作

2、案例：百度换肤

3、 案例：表格隔行变色

4、案例：全选

5、自定义属性操作

5.1、获取属性值

5.2、设置属性值

5.3、移出属性

5.4、检查属性与获取属性集合

5.5、元素的属性（property）

5.6、示例

5.7、案例：tab栏

5.8、H5自定义属性

5.9、相关资料

排他思想与自定义属性相关推荐

最新文章

热门文章

3、案例：表格隔行变色