How jquery implements the hiding or displaying effect of elements (code example)-JS Tutorial-php.cn

How jquery implements the hiding or displaying effect of elements (code example)

青灯夜游

Release： 2018-10-20 14:08:25

Original

4137 people have browsed it

How does jquery implement the hiding or displaying effect of elements? This article will introduce to you how to set the hiding or display of elements in jquery, so that you can understand the method to achieve the switching effect of hiding and displaying elements. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are two ways to implement element hiding and display effects in jquery, which are:

1. Use the hide() and show() methods to hide and display elements

2 , Use the toggle() method to hide and show elements

Let’s take a look at how these two methods implement the hiding and display of elements.

hide() and show() methods implement hiding and displaying elements

jquery’s hide() method is used to hide elements

jquery's show() method is used to display elements

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		    $(".btn1").click(function(){
		        $("p").hide();
		    });
		    $(".btn2").click(function(){
		        $("p").show();
		    });
		});
		</script>
	</head>
	<body>
		<p>这是一段测试文字。</p>
		<button class="btn1">Hide--隐藏</button>
		<button class="btn2">Show--显示</button>
	</body>

</html>

Copy after login

Rendering:

How jquery implements the hiding or displaying effect of elements (code example)

Click the hide button to use the hide() method. Hidden elements:

How jquery implements the hiding or displaying effect of elements (code example)

# Click the show button, you can use the show() method to display the hidden elements:

How jquery implements the hiding or displaying effect of elements (code example)

toggle() method implements hiding and displaying elements (switching between hiding or displaying)

toggle() method can switch the visible state of elements, that is: switching elements to hide or show.

The toggle() method will determine whether the elements are hidden or displayed. If the selected elements are visible, these elements will be hidden. If the selected elements are hidden, these elements will be displayed.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		    $(".btn").click(function(){
		        $("p").toggle();
		});
		</script>
	</head>
	<body>
		<p>这是一段测试文字。</p>
		<button class="btn">toggle()</button>
	</body>
</html>

Copy after login

Rendering:

How jquery implements the hiding or displaying effect of elements (code example)

Note: Using the jquery method, whether it is hide(), show(), toggle(), or other methods, all You must first reference the jquery.js file.

Summary: The above is the entire content of jquery to implement the hiding or displaying effect of elements. The code is very simple, and you can try it yourself at the cost. I hope it will be helpful to everyone's learning. For more related tutorials, please visit jQuery Video Tutorial, JavaScript Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of How jquery implements the hiding or displaying effect of elements (code example). For more information, please follow other related articles on the PHP Chinese website!