jQuery排他思想+鏈式程式設計
阿新 • • 發佈：2022-03-26
排他思想:幹掉所有人，設定我自己，先將所有人全設定為"",然後再設定當前的值
也就是:先排除掉其他的(包括自己) ，最後再給自己(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>
執行結果:
結論:鏈式程式設計使程式碼變得更簡潔,可讀性更加好！！！