Quoi utiliser pour afficher et masquer des éléments dans jquery-Questions et réponses frontales-php.cn

Quoi utiliser pour afficher et masquer des éléments dans jquery

青灯夜游

Libérer： 2021-11-16 11:17:39

original

4954 Les gens l'ont consulté

Méthodes utilisées pour afficher les éléments cachés dans jquery : 1. show() et hide(); 2. toggle(), qui peut changer l'état visible des éléments 3. slideDown(), qui peut afficher et masquer les éléments dans un de manière coulissante ; 4 , css(), vous pouvez afficher et masquer des éléments en contrôlant l'attribut "display" de l'élément.

Quoi utiliser pour afficher et masquer des éléments dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

Il existe de nombreuses façons d'afficher et de masquer la méthode p dans jquery, comme les fonctions relativement simples show(), hide(), toggle(), slideDown() et css pour définir l'attribut de style de p. ci-dessous.

méthodes show() et hide()

show() peuvent afficher les éléments

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

Copier après la connexion

hide() peut masquer les éléments

visibles :

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

Copier après la connexion

Cette fonction est souvent utilisée avec la méthode show

toggle()

toggle() change l'état visible de l'élément.

Si les éléments sélectionnés sont visibles, masquez ces éléments. Si les éléments sélectionnés sont masqués, affichez ces éléments.

Méthode

<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>

Copier après la connexion

slideDown()

Afficher les éléments

cachés de manière coulissante :

Méthode

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

Copier après la connexion

css()

La méthode css() définit ou renvoie un ou plusieurs styles de la propriété de l'élément sélectionné. .

Renvoyer les propriétés CSS
Si vous devez renvoyer la valeur de la propriété CSS spécifiée, veuillez utiliser la syntaxe suivante :

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

Copier après la connexion

Regardez un exemple

<!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>

Copier après la connexion

Quoi utiliser pour afficher et masquer des éléments dans jquery