Jquery排他思想实现

我们先来温习一下js里面的排他思想的写法，给五个按钮，点击某一个按钮这个按钮就变成粉红色，其余按钮都是白色，若采用js实现这个案例需要采用循环判断来写，代码如下：

<!-- jquery排他思想 -->
<!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>Document</title>
</head><body><button>点击</button><button>点击</button><button>点击</button><button>点击</button><button>点击</button><script>var btn = document.querySelectorAll('button');for (var i = 0; i < btn.length; i++) {btn[i].addEventListener('click', function() {// 干掉所有人for (var j = 0; j < btn.length; j++) {btn[j].style.backgroundColor = '';}// 留下我自己this.style.backgroundColor = 'pink';})}</script>
</body></html>

如果采用jquery的话就不需要循环注册事件，因为jquery具有隐式循环，不需要循环注册事件，若采用jquery实现排他思想的话，代码如下：

<!-- jquery排他思想 -->
<!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>Document</title><!-- 引入jquery脚本文件 --><script src="./js/jquery.min.js"></script>
</head><body><script>$(function() {// 1 隐式迭代 给所有的按钮都绑定点击事件$('button').click(function() {// 点击哪个元素那个元素变色$(this).css('background', 'pink');// 然后把所有的兄弟都去掉背景颜色$(this).siblings('button').css('background', '')})})</script><button>点击</button><button>点击</button><button>点击</button><button>点击</button><button>点击</button></body></html>

Jquery排他思想实现相关推荐

jquery排他思想
效果展示: 代码展示: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
jQuery 里面的排他思想
jQuery 里面的排他思想 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
jQuery的排他思想
因为jQuery具备隐式迭代,所以在写排他思想的时候不需要循环遍历,直接用下面这个就能实现. <html><button>变色</button><butto ...
[转]jQuery设计思想
转自:http://kb.cnblogs.com/page/109875/ jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远 ...
什么是排他思想算法？（源码解析）
排他思想算法 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
编程思维---排他思想
排他思想:就是排除掉其他的(包括自己),然后再给自己设置想要实现的效果.总而言之,排他思想的实现步骤就是所有元素全部清除再设置当前元素. 大白话---简单总结:干掉兄弟,复活自己使用场景:1.Tab ...
android 排他button,javascript排他思想
排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1.含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的 ...
DOM系列之排他思想
文章の目录 1.什么是排他思想 2.示例写在最后 1.什么是排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法所有元素全部清除样式(干掉其他人) 给当前元素设 ...
JavaScript排他思想
什么是排他思想? 排他思想是为一组同类型元素中的某一个元素设置样式时,采用的一种特定顺序.首先将所有元素的样式设置为一般样式(包括特定的某个元素),再为特定元素设置特定样式. 排他思想的优势排他思想 ...

Jquery排他思想实现

Jquery排他思想实现相关推荐

最新文章

热门文章