<!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>jquery排他思想</title>
<script src="jquery.min.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
// 1.第一步,先引入jq文件
// 2.先jq的入口函数,再button点击绑定事件
// 3.排他思想,让自己的css变成pink色,她的兄弟button颜色背景去掉
$(function() {
$("button").click(function() {
// 让自己的css的color变成pink色
// $(this).css('background', 'purple');
// 点击的按钮的兄弟颜色背景去掉
// $(this).siblings('button').css('background', '');
// 链式编程简写
$(this).css('background', 'purple').siblings('button').css('background', '');
});
})
</script>
</body>
</html>
jQuery排他思想
于 2022-04-18 21:17:04 首次发布