jquery显示隐藏切换_jQuery显示，隐藏，切换

最新推荐文章于 2023-11-10 10:04:21 发布

cunchi4221

最新推荐文章于 2023-11-10 10:04:21 发布

阅读量5.9k

点赞数 2

文章标签： js jquery java python javascript ViewUI

原文链接：https://www.journaldev.com/4689/jquery-show-hide-toggle

版权

jquery显示隐藏切换

Earlier we looked into how we can use jQuery get attribute, today we will look into three useful jQuery methods that we can use to hide an HTML element, show any hidden HTML element and toggle it from hidden/shown.

之前，我们研究了如何使用jQuery get属性，今天，我们研究了三种有用的jQuery方法，可用于隐藏HTML元素，显示任何隐藏HTML元素并将其从“隐藏/显示”中切换出来。

These methods are used a lot in real web pages, where you get to see the data on click of a button. On click again, the data is again hidden. Let’s look into these methods one by one now.

这些方法在实际的网页中经常使用，您只需单击一下按钮即可查看数据。再次单击，数据再次被隐藏。现在让我们逐一研究这些方法。

jQuery隐藏 (jQuery hide)

jQuery hide() method is used to hide the html elements. The element will not be displayed until show() method is called for that element.

jQuery hide（）方法用于隐藏html元素。在该元素调用show()方法之前，该元素不会显示。

We can use hide() method in a number of ways.

我们可以通过多种方式使用hide（）方法。

hide();
隐藏（）;
This method hides the selected html element. This jQuery hide method doesn’t take any arguments.

此方法隐藏选定的html元素。这个jQuery hide方法不带任何参数。
hide(speed);
隐藏（速度）;
The argument ‘speed‘ determines the duration of this effect.

参数“ speed ”确定此效果的持续时间。
hide(speed, callback);
hide（速度，回调）;
speed: determines the duration of this effect. String values like “slow”, “fast” and the numeric value in milliseconds are normally used.

速度：确定此效果的持续时间。通常使用字符串值，例如“ slow”，“ fast”和以毫秒为单位的数值。

callback: you can specify what to do after the hide() method is called.

回调：您可以指定在调用hide（）方法之后要执行的操作。
hide(speed, easing, callback);
hide（速度，缓动，回调）;

In this method an additional argument is passed – ‘easing’. This is a string value. “swing” and “linear” are the two values used to specify which easing function is used to run during the hiding effect.

在此方法中，传递了一个附加参数–'easing'。这是一个字符串值。 “ swing”和“ linear”是用于指定隐藏效果期间运行哪个缓动功能的两个值。

jQuery hide（）示例 (jQuery hide() example)

In the below example you can see that jQuery hide() method takes an argument “fast” to hide the <div> element. You can use arguments like “slow” or milliseconds values like 1000, 2000 etc.

在下面的示例中，您可以看到jQuery hide（）方法使用参数“ fast”来隐藏<div>元素。您可以使用“ slow”之类的参数或毫秒值（例如1000、2000等）。

<!DOCTYPE html>
<html>
<head>
<title> jQuery Hide </title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
  $(".hideBtn").click(function(){
  $("div").hide("fast");
  });
});
</script>
</head>
<body>

<div>Hiding Div</div>
<button class="hideBtn">Hide</button>

</body>
</html>

jQuery hide（）和回调示例 (jQuery hide() and callback example)

In this example, three arguments are passed to the hide() method. The numeric value 1000 is the duration of hiding effect. “linear” is the easing function used. There is a callback method also passed to the hide method. This method is called after the hide effect.

在此示例中，三个参数传递给hide（）方法。数值1000是隐藏效果的持续时间。 “线性”是使用的缓动函数。还有一个回调方法也传递给hide方法。在隐藏效果之后调用此方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() method is finished!");
    });
  });
});
</script>
</head>
<body>

<div> Hide and Call back</div>
<button class="hidebtn">Hide</button>

</body>
</html>

jQuery hide method is very useful when there is a need to hide certain HTML elements. You can select appropriate hide() methods with and without arguments depending on the requirement. This is a very handy method in jQuery web design.

当需要隐藏某些HTML元素时，jQuery hide方法非常有用。您可以根据需要选择带或不带参数的适当hide（）方法。这是jQuery Web设计中非常方便的方法。

jQuery展示 (jQuery show)

jQuery show() method is used to display the hidden html elements.

jQuery show（）方法用于显示隐藏的html元素。

We can use show() method in a number of ways.

我们可以通过多种方式使用show()方法。

show();
表演（）;
This method displays the selected html element. This method does not take any arguments.

此方法显示选定的html元素。此方法不带任何参数。
show(speed);
显示（速度）;
The argument ‘speed‘ determines the duration of this effect.

参数“ speed ”确定此效果的持续时间。
show(speed, callback);
显示（速度，回调）;
speed: this argument determines the duration of this effect. String values like “slow”, “fast” and the numeric value in milliseconds are normally used.

速度：此参数确定此效果的持续时间。通常使用字符串值，例如“ slow”，“ fast”和以毫秒为单位的数值。

callback: you can specify what to do after the show() method is called.

回调：您可以指定在调用show（）方法之后要执行的操作。
show(speed, easing, callback);
显示（速度，缓动，回调）;

In this method an additional argument is passed- ‘easing’. This is a string value. “swing” and “linear” are the two values used to specify which easing function is used to run during the displaying the selected element.

在此方法中，传递了一个附加参数-'easing'。这是一个字符串值。 “ swing”和“ linear”是两个值，用于指定在显示所选元素期间运行哪个缓动功能。

jQuery show（）示例 (jQuery show() example)

In the below example you can see that show() method takes an argument “fast” to display the <div> element.

在下面的示例中，您可以看到show（）方法使用参数“ fast”来显示<div>元素。

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show </title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
  $(".hideBtn").click(function(){
  $("div").hide("fast");
  });

$(".showBtn").click(function(){
  $("div").show("fast");
  });
});
</script>
</head>
<body>

<div>Hide and Show - Speed</div>
<button class="hideBtn">Hide</button>
<button class="showBtn">Show</button>

</body>
</html>

Below GIF shows the jQuery hide and jQuery show example page in action.

jQuery hide, jQuery show, jQuery hide show div

GIF下面显示了正在运行的jQuery隐藏和jQuery显示示例页面。

jQuery显示和回调示例 (jQuery show and callback example)

In this example, three arguments are passed to the show() method. The numeric value 1000 is the duration of display effect. “linear” is the easing function used. There is a callback method also passed to the show method. This method is called after the displaying the <div> element.

在此示例中，三个参数传递给show（）方法。数值1000是显示效果的持续时间。 “线性”是使用的缓动函数。还有一个回调方法也传递给show方法。在显示<div>元素之后调用此方法。

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show with callback</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"swing",function(){
      alert("Hide() method is finished!");
    });
  });
$(".showbtn").click(function(){
    $("div").show(1000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>
	<div> Hide and Show </div>
	<button class="hidebtn">Hide</button>
	<button class="showbtn">Show</button>

</body>
</html>

This method is very useful when you want to display the hidden HTML elements. You can select appropriate show() methods with and without arguments depending on the requirement.

当您要显示隐藏HTML元素时，此方法非常有用。您可以根据需要选择带或不带参数的适当show（）方法。

jQuery切换 (jQuery toggle)

jQuery toggle() method is used to change the to display or hide HTML elements. You can use the toggle method when you want to toggle between the hide and display of the selected HTML element

jQuery toggle（）方法用于更改以显示或隐藏HTML元素。当您要在所选HTML元素的隐藏和显示之间进行切换时，可以使用切换方法

We can use jQuery toggle() method in a number of ways.

我们可以通过多种方式使用jQuery toggle（）方法。

toggle();
toggle（）;
This method displays the selected html element. This method does not take any arguments.

此方法显示选定的html元素。此方法不带任何参数。
toggle(speed);
拨动（速度）;
The argument ‘speed‘ determines the duration of this effect.

参数“ speed ”确定此效果的持续时间。
toggle(speed,callback);
切换（速度，回调）;
speed: this argument determines the duration of this effect. String values like “slow”, “fast” and the numeric value in milliseconds are normally used.

速度：此参数确定此效果的持续时间。通常使用字符串值，例如“ slow”，“ fast”和以毫秒为单位的数值。

callback: you can specify what to do after the toggle() method is called.

回调：您可以指定在调用toggle（）方法之后要执行的操作。
toggle(speed,easing,callback);
切换（速度，缓动，回调）;

In this method an additional argument is passed- ‘easing’. This is a string value. “swing” and “linear” are the two values used to specify which easing function is used to display/hide.

在此方法中，传递了一个附加参数-'easing'。这是一个字符串值。 “ swing”和“ linear”是用于指定用于显示/隐藏哪个缓动功能的两个值。

jQuery toggle（）示例 (jQuery toggle() example)

In the below example you can see that toggle() method takes an argument “fast” to toggle between hide and display the selected <div> element.

在下面的示例中，您可以看到toggle（）方法使用“ fast”参数在隐藏和显示选定的<div>元素之间进行切换。

<!DOCTYPE html>
<html>
<head>
<title> jQuery Toggle </title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
  $(".togglebtn").click(function(){
  $("div").toggle("fast");
  });

});
</script>
</head>
<body>

<div>Toggle - Speed</div>
<button class="togglebtn">Toggle</button>

</body>
</html>

jQuery切换和回调示例 (jQuery toggle and callback example)

In this example, three arguments are passed to the toggle() method. The numeric value 1000 is the duration of display effect. “linear” is the easing function used. There is a callback method also passed to the toggle method. This method is called after the toggle between hide and display of the <div> element.

在此示例中，三个参数传递给toggle（）方法。数值1000是显示效果的持续时间。 “线性”是使用的缓动函数。还有一个回调方法也传递给toggle方法。在<div>元素的隐藏和显示之间切换之后调用此方法。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Toggle with callback</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".togglebtn").click(function(){
    $("div").toggle(1000,"swing",function(){
      alert("toggle() method is finished!");
    });
  });
});
</script>
</head>
<body>

<div> Toggle - Callback </div>
<button class="togglebtn">Toggle</button>

</body>
</html>

jQuery toggle method is very useful when you want to toggle between the hide and display the HTML elements. You can select appropriate toggle() methods depending on the requirement.

当您要在隐藏和显示HTML元素之间进行切换时，jQuery切换方法非常有用。您可以根据需要选择适当的toggle（）方法。

jQuery隐藏显示切换演示 (jQuery hide show toggle Demo)

That’s all for the jQuery methods that we can use to Hide, Show or Toggle HTML DOM elements.

这就是我们可以用来隐藏，显示或切换HTML DOM元素的jQuery方法的全部内容。

翻译自: https://www.journaldev.com/4689/jquery-show-hide-toggle

jquery显示隐藏切换

cunchi4221

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery显示隐藏切换_jQuery显示，隐藏，切换

jquery显示隐藏切换Earlier we looked into how we can use jQuery get attribute, today we will look into three useful jQuery methods that we can use to hide an HTML element, show any hidden HTML element and to...
复制链接

扫一扫