jQuery 简单练习(复选框,隐藏样式,隐藏图片)
Posted 霜序0.2℃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 简单练习(复选框,隐藏样式,隐藏图片)相关的知识，希望对你有一定的参考价值。
- 设计一个复选框功能,要求可以全选和全取消
- 假设有一个图文混排的页面,要求设计一个按钮,当用户点击该页面能使所有图片和文字增加美化效果,再次点击取消,再设计一个按钮,当用户点击能够显示或者隐藏图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work1</title>
<style>
</style>
</head>
<body>
<button id="con">全选</button>
<label>
<input type="checkbox" class="all">1
<input type="checkbox" class="all">2
<input type="checkbox" class="all">3
<input type="checkbox" class="all">4
</label>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$("#con").click(function () {
let x = $(".all").prop("checked");
if (x === true) {
$(".all").prop("checked",false);
} else {
$(".all").prop("checked",true);
}
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work1</title>
<style>
.a {
color: #1d7db1;
}
img {
width: 500px;
height: 300px;
}
.test {
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<button id="con1">美化</button>
<button id="con2">图片</button>
<br>
<label>
high good a boy
</label>
<br>
<img src="img/moon.png" alt="moon">
<br>
<img src="img/weather.png" alt="weather">
<script src="js/jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
$("#con1").click(function () {
let x = $("label").attr("class");
if (x === "a") {
$("label").removeClass("a");
} else {
$("label").addClass("a");
}
x = $("img").attr("class");
if (x === "test") {
$("img").removeClass("test");
} else {
$("img").addClass("test");
}
})
$("#con2").click(function () {
let css = $("img").css("display");
if (css === "none") {
$("img").css("display","block");
} else {
$("img").css("display","none");
}
})
})
</script>
</body>
</html>
以上是关于jQuery 简单练习(复选框,隐藏样式,隐藏图片)的主要内容，如果未能解决你的问题，请参考以下文章