效果如下
点击当前按钮,会改变当前的背景色,去掉其他按钮的背景色
代码如下
1.普通写法
<script src="jQuery.js"></script>
<script>
$(function(){
//1.隐式迭代,会给所有按钮绑定点击事件
$("button").click(function(){
//2.当前元素变化背景颜色
$(this).css("background","pink");
//3.他的其他兄弟去掉背景颜色
$(this).siblings("button").css("background","");
})
})
</script>
2.链式编程写法
<script src="jQuery.js"></script>
<script>
/*
.链式编程是为了节省代码量,看起来更优雅
$(this).css('color','red').sibling().css('color','')
*/
$(function(){
//1.隐式迭代,会给所有按钮绑定点击事件
$("button").click(function(){
//2.(链式编程)当前元素变化背景颜色,其他兄弟去掉颜色
$(this).css("background","pink").siblings("button").css("background","");
//2.自己不变色,兄弟变为红色
$(this).siblings().css("background","red");
//2.自己不变色,兄弟的父亲变为红色
$(this).siblings().parent().css("background","red");
})
})
</script>
<body>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
</body>