jquery affiche l'effet de masquage

jQuery est une bibliothèque JavaScript très populaire qui peut être utilisée pour améliorer l'interactivité des sites Web. L'un des effets courants consiste à afficher et masquer des éléments. Ce qui suit présente en détail comment utiliser jQuery pour obtenir cet effet.

Tout d'abord, en HTML, il doit y avoir un élément à masquer ou à afficher, qui peut être n'importe quelle balise telle que div, span, p, etc. Par exemple, le code suivant crée deux boutons et un élément div :

<button id="show">显示</button>
<button id="hide">隐藏</button>

<div id="target">
  <p>这是要隐藏或显示的内容</p>
</div>

où l'attribut id est utilisé pour identifier l'élément et est utilisé dans le code JavaScript derrière.

Ensuite, en JavaScript, vous devez utiliser la bibliothèque jQuery pour sélectionner des éléments et leur ajouter des gestionnaires d'événements. Dans cet exemple, l'élément div doit être affiché ou masqué lorsque vous cliquez sur le bouton. Voici le code pour obtenir cet effet :

$(document).ready(function() {
  $("#show").click(function() {
    $("#target").show();
  });
  $("#hide").click(function() {
    $("#target").hide();
  });
});

Le code ci-dessus est divisé en deux parties. Tout d'abord, dans la fonction $(document).ready, deux gestionnaires d'événements de clic sont définis. $("#show") sélectionne l'élément bouton avec l'identifiant "show", et $("#hide") sélectionne l'élément bouton avec l'identifiant "hide" . Ces sélecteurs renvoient des objets jQuery dont les méthodes peuvent être appelées pour ajouter des gestionnaires d'événements. $(document).ready函数中，定义了两个单击事件处理程序。$("#show")选择了id为“show”的按钮元素，$("#hide")选择id为“hide”的按钮元素。这些选择器返回了jQuery对象，可以调用其方法来添加事件处理程序。

其次，在按钮被单击时，触发了对应的处理程序。$("#target")选择了id为“target”的div元素，调用了其show()方法或hide()方法来显示或隐藏该元素。

注意，这里使用了$符号。这是因为jQuery库在全局范围内定义了一个$符号。可以使用这个符号代替jQuery，并缩短代码。例如，$("#target")等同于jQuery("#target")。

另外，show()和hide()方法 接受一些可选的参数来控制显示或隐藏的方式。例如，可以使用$("#target").show("slow")来使显示有一个缓慢的动画效果。类似地，可以使用$("#target").hide(1000)

Deuxièmement, lorsque vous cliquez sur le bouton, le gestionnaire correspondant est déclenché. $("#target") sélectionne l'élément div avec l'identifiant "target" et appelle sa méthode show() ou hide() pour afficher ou masquer l'élément.

Notez que le signe $ est utilisé ici. En effet, la bibliothèque jQuery définit un symbole $ dans la portée globale. Vous pouvez utiliser cette notation à la place de jQuery et raccourcir votre code. Par exemple, $("#target") est équivalent à jQuery("#target").

De plus, les méthodes show() et hide() acceptent certains paramètres facultatifs pour contrôler comment afficher ou masquer. Par exemple, vous pouvez utiliser $("#target").show("slow") pour que l'affichage ait un effet d'animation lent. De même, vous pouvez utiliser $("#target").hide(1000) pour que l'animation de masquage dure 1 seconde.

En plus des méthodes show() et hide(), jQuery fournit également d'autres méthodes pour contrôler les effets visibles et cachés des éléments. Par exemple, les méthodes fadeIn() et fadeOut() font apparaître et disparaître les éléments en fondu. Les méthodes slideDown() et slideUp() peuvent faire glisser et effondrer des éléments. Lorsque vous utilisez ces méthodes, vous pouvez utiliser les mêmes paramètres que les méthodes show() et hide() pour contrôler l'effet d'animation.

Enfin, si vous souhaitez basculer entre les états d'affichage d'un élément, vous pouvez utiliser la méthode toggleClass(). Par exemple, le code suivant crée un bouton bascule qui, lorsque vous cliquez dessus, affiche ou masque un élément div : 🎜

<button id="toggle">切换</button>

<div id="target">
  <p>这是要隐藏或显示的内容</p>
</div>

🎜Le code JavaScript est le suivant : 🎜

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#target").toggleClass("hidden");
  });
});

🎜Une classe CSS masquée est utilisée ici pour contrôler l'affichage et le masquage de l'élément. Lorsqu'un élément div possède cette classe, il sera masqué. Et lorsqu’une telle classe n’existe pas, elle sera affichée. La méthode toggleClas bascule entre les deux états d'un élément. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!