javascript，jquery顯示隱藏切換_jQuery顯示，隱藏，切換

2023-11-19 阅读 26 评论 0

摘要：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顯示隱藏切換

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元素并將其從“隱藏/顯示”中切換出來。

javascript？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()方法之前，該元素不會顯示。

jquery選擇器，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);
隱藏（速度）;
jquery中顯示。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”和以毫秒為單位的數值。

jquery？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（）方法。