jQuery排他思想+链式编程
排他思想:干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值
也就是:先排除掉其他的(包括自己) ，最后再给自己(this)加想要的效果。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>排他思想</title>
<script type="text/javascript" src="../Js/jquery-3.6.0.js" ></script>
</head>
<body>
<h1>Jquery排他思想</h1>
<hr />
<button>28号00</button>
<button>28号01</button>
<button>28号02</button>
<button>28号03</button>
<button>28号04</button>
<button>28号05</button>
<script type="text/javascript">
$(function(){
$('button').click(function(event){
$(this).css({
background : 'red',
border: '2px blue solid'
});
$(this).siblings('button').css({
background : '',
border: ''
});
});
})
</script>
</body>
</html>
运行结果:
干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值
以上代码，不够优美,可读性不高，于是我们便引入链式编程
那么什么是链式编程呢？
“链式编程 是将多个操作(多行代码)通过点号"."链接在一起成为一句代码。
链式代码通常要求操作有返回值, 但对于很多操作大都是void型,什么也不返回,这样就很难链起来了,
当然也有解决办法,可能不太优雅。 链式编程的新思想在jQuery中已流行使用”.
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<h1>jQuery排他思想+链式编程</h1>
<hr>
<button>牛叉叉</button>
<button>唱日落</button>
<button>牛叉叉</button>
<button>唱日落</button>
<button>牛叉叉</button>
<script type="text/javascript">
$(function (){
//隐式迭代 给所有按钮都绑定点击事件
$('button').click(function (event) {
//点前元素变化背景颜色
$(this).css({
background:'yellow',
border:'2px black solid'
//其余的兄弟元素去掉背景颜色 隐式迭代
}).siblings('button').css({
background: '',
border: ''
});
});
})
</script>
</body>
</html>
运行结果:
结论:链式编程使代码变得更简洁,可读性更加好！！！
