Home  >  Article  >  Web Front-end  >  What to use to show and hide elements in jquery

What to use to show and hide elements in jquery

青灯夜游
青灯夜游Original
2021-11-16 11:17:394948browse

Methods used to display hidden elements in jquery: 1. show() and hide(); 2. toggle(), which can switch the visible state of elements; 3. slideDown(), which can display and slide in a sliding manner. Hidden elements; 4. css(), which can display and hide elements by controlling the "display" attribute of the element.

What to use to show and hide elements in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

There are many ways to show and hide p methods in jquery, such as the relatively simple functions show(), hide(), toggle(), slideDown() and css to set the style attribute of p. , let me introduce it below.

show() and hide() methods

show() can display hidden

elements.

$(".btn2").click(function(){
  $("p").show();
});

hide() can hide visible

elements:

$(".btn1").click(function(){
  $("p").hide();
});

This function is often used with show

toggle() method

toggle() method switches the visible state of an element.

If the selected elements are visible, then hide these elements. If the selected elements are hidden, then display these elements.

<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").toggle(1000);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>

slideDown() method

Show hidden

elements in a sliding manner:

$(".btn2").click(function(){
  $("p").slideDown();
});

css() method

css() method sets or returns one or more style properties of the selected element.

Return CSS properties
To return the value of the specified CSS property, please use the following syntax:

css("propertyname");
$("p").css("display","none");

See an example

<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {});

			function hiden() {

				$("#divObj").hide(); //hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast 

			}

			function slideToggle() {

				$("#divObj").slideToggle(2000); //窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 

			}

			function show() {

				$("#divObj").show(); //显示,参数说明同上 

			}

			function toggle() {

				$("#divObj").toggle(2000); //显示隐藏切换,参数可以无,参数说明同上 



			}

			function slide() {

				$("#divObj").slideDown(); //窗帘效果展开 

			}
		</script>

	</head>

	 

	<body>

		<h3>div里内容的显示隐藏特效</h3>

		<input type="button" value="隐藏" onclick="hiden()" />

		 <input type="button" value="显示" onclick="show()" />

		 <input type="button" value="窗帘效果显示2" onclick="slide()" />

		 <input type="button" value="窗帘效果的切换" onclick="slideToggle()" />

		  <input type="button" value="隐藏显示效果切换" onclick="toggle()" />

		<div id="divObj" style="display:none">

			        1.测试例子<br />

			        2.测试例子<br />

			        3.测试例子<br />

			        4.测试例子<br />

			        5.测试例子<br />

			        6.测试例子<br />

			        7.测试例子<br />

			        8.测试例子<br />

			        9.测试例子<br />

			        0.测试例子<br />

			    </div>

	</body>

</html>

What to use to show and hide elements in jquery

Recommended related tutorials: jQuery video tutorial

The above is the detailed content of What to use to show and hide elements in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn