极客教程如何用jQuery显示或隐藏一个元素
在这篇文章中，我们将学习如何使用jQuery来显示/隐藏一个元素。我们可以使用jQuery方法，如css()，show()，hide()，和toggle()方法来实现这些。
步骤:
- 在你的本地系统中创建一个HTML文件 ” index.html “
- 在
<body>标签内创建一个HTML元素，例如段落<p>、图像<img>，等等。 - 使用
<button>标签创建一个按钮，并为其附加一个事件监听器。 - 我们用这个按钮来切换显示和隐藏动画。这意味着当选定的元素被显示出来，而你点击隐藏按钮时，你的事件监听器内的代码应该隐藏你选定的元素并改变该元素的文字，反之亦然。
方法1：使用css()方法 –它需要两个参数，第一个参数是属性名称，第二个参数是属性的值。
$(selector).css(property, value);
它需要一个参数类型的JSON字符串对象，该对象包含属性及其值。
$(selector).css(property);
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
border: 2px solid green;
min-height: 240px;
text-align: center;
}
h1 {
color: green;
}
div {
display: flex;
justify-content: center;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="element">
Hello Geeks Welcome to GeeksforGeeks
</div>
<div class="button-container">
<button id="click">
hide
</button>
</div>
<script>
('#click').on('click', function () {
if (('#click').text() === 'show') {
// This block is executed when
// you click the show button
('#click').text('hide');
('#element').css('display', 'flex');
}
else {
// This block is executed when
// you click the hide button
('#click').text('show');
('#element').css('display', 'none');
}
});
</script>
</body>
</html>
输出:
输出
方法2：该方法用于显示隐藏的元素，它的参数是可选的。
$(selector).show(optional);
这个方法是用来隐藏可见元素的，它的参数是可选的。
$(selector).hide(optional);
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
border: 2px solid green;
min-height: 240px;
text-align: center;
}
h1 {
color: green;
}
div {
display: flex;
justify-content: center;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="element">
Hello Geeks Welcome to GeeksforGeeks
</div>
<div class="button-container">
<button id="click">
hide
</button>
</div>
<script>
('#click').on('click', function () {
if (('#click').text() === 'show') {
// This block is executed when
// you click the show button
('#click').text('hide');
('#element').show();
}
else {
// This block is executed when
// you click the hide button
('#click').text('show');
('#element').hide();
}
});
</script>
</body>
</html>
输出:
显示/隐藏方法的输出
方法3：该方法在元素可见时隐藏它，在元素隐藏时显示它。这个方法可以实现显示和隐藏方法的两种功能，参数是可选的。
$(selector).toggle(optional)
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
border: 2px solid green;
min-height: 240px;
text-align: center;
}
h1 {
color: green;
}
div {
display: flex;
justify-content: center;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="element">
Hello Geeks Welcome to GeeksforGeeks
</div>
<div class="button-container">
<button id="click">
hide
</button>
</div>
<script>
('#click').on('click', function () {
if (('#click').text() === 'show') {
// This block is executed when
// you click the show button
('#click').text('hide');
}
else {
// This block is executed when
// you click the hide button
('#click').text('show');
}
$('#element').toggle();
});
</script>
</body>
</html>
输出:
拨动方法的输出