jQuery的排他思想

因为jQuery具备隐式迭代，所以在写排他思想的时候不需要循环遍历，直接用下面这个就能实现。

<html><button>变色</button><button>变色</button><button>变色</button><button>变色</button>
</html>
<script>$('button').click(function(){$(this).css('background','blue')// 除了本身这个的同级元素$(this).siblings("button").css('background','')})
</script>

小案例：

鼠标移到左边的任意一个盒子，右边盒子照片会对应变化。

<style>.content{display: flex;}.left{list-style: none;}.left li{width: 60px;height: 80px;line-height: 80px;text-align: center;border: 1px solid;color: #fff;background-color: pink;}.right{margin-top: 20px;height: 240px;width: 240px;position: relative;}img{height: 240px;width: 240px;}.right div{position: absolute;}
</style>
<html><div class="content"><ul class="left"><li>曲奇</li><li>气球</li><li>野餐</li></ul><div class="right"><div><img src="1.jpg" alt=""></div><div><img src="2.jpg" alt=""></div><div><img src="3.jpg" alt=""></div></div></div>
</html>
<script>$('.left li').mouseover(function(){$(this).css('background','red')$(this).siblings().css('background','')// 获得左边li的索引号var index = $(this).index()$('.right div').eq(index).show()$('.right div').eq(index).siblings().hide()})
</script>

jQuery的排他思想相关推荐

Jquery排他思想实现
我们先来温习一下js里面的排他思想的写法,给五个按钮,点击某一个按钮这个按钮就变成粉红色,其余按钮都是白色,若采用js实现这个案例需要采用循环判断来写,代码如下: <!-- jquery排他思想 ...
jQuery 里面的排他思想
jQuery 里面的排他思想 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
什么是排他思想算法？（源码解析）
排他思想算法 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
浅谈jQuery Mobile设计思想
来自51CTO技术社区:http://mobile.51cto.com/others-288591.htm jQuery Mobile设计思想是本文要介绍的内容,主要是来了解jQuery Mobile ...
编程思维---排他思想
排他思想:就是排除掉其他的(包括自己),然后再给自己设置想要实现的效果.总而言之,排他思想的实现步骤就是所有元素全部清除再设置当前元素. 大白话---简单总结:干掉兄弟,复活自己使用场景:1.Tab ...
android 排他button,javascript排他思想
排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1.含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的 ...
DOM系列之排他思想
文章の目录 1.什么是排他思想 2.示例写在最后 1.什么是排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法所有元素全部清除样式(干掉其他人) 给当前元素设 ...
JavaScript排他思想
什么是排他思想? 排他思想是为一组同类型元素中的某一个元素设置样式时,采用的一种特定顺序.首先将所有元素的样式设置为一般样式(包括特定的某个元素),再为特定元素设置特定样式. 排他思想的优势排他思想 ...
JavaScript之排他思想详述
在前面的博客中,小熊更新了相关操作元素的方法,但是如果有同一组元素,我们想要某一个元素实现某种样式,这时需要怎么办呢? 这里就要用到循环的排他思想. 排他思想的算法就是: 排除掉其他的(包括自己),然 ...

jQuery的排他思想

jQuery的排他思想相关推荐

最新文章

热门文章