jquery 표시 숨기기 효과

jQuery는 웹사이트의 상호작용성을 향상시키는 데 사용할 수 있는 매우 인기 있는 JavaScript 라이브러리입니다. 일반적인 효과 중 하나는 요소를 표시하고 숨기는 것입니다. 다음에서는 이 효과를 얻기 위해 jQuery를 사용하는 방법을 자세히 소개합니다.

먼저 HTML에는 숨기거나 표시할 요소가 있어야 하며, 이는 div,span,p 등과 같은 태그일 수 있습니다. 예를 들어, 다음 코드는 두 개의 버튼과 하나의 div 요소를 생성합니다.

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

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

여기서 id 속성은 요소를 식별하는 데 사용되며 JavaScript 코드 숨김에서 사용됩니다.

다음으로 JavaScript에서는 jQuery 라이브러리를 사용하여 요소를 선택하고 요소에 이벤트 핸들러를 추가해야 합니다. 이 예에서는 버튼을 클릭할 때 div 요소를 표시하거나 숨겨야 합니다. 이 효과를 달성하는 코드는 다음과 같습니다.

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

위 코드는 두 부분으로 나뉩니다. 먼저 $(document).ready 함수에는 두 개의 클릭 이벤트 핸들러가 정의되어 있습니다. $("#show")는 ID가 "show"인 버튼 요소를 선택하고, $("#hide")는 ID가 "hide"인 버튼 요소를 선택합니다. . 이러한 선택기는 이벤트 핸들러를 추가하기 위해 메소드를 호출할 수 있는 jQuery 객체를 반환합니다. $(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)

둘째, 버튼을 클릭하면 해당 핸들러가 트리거됩니다. $("#target")은 ID가 "target"인 div 요소를 선택하고 show() 메서드 또는 hide() 메서드를 호출하여 요소를 표시하거나 숨깁니다.

여기서는 $ 기호가 사용된다는 점에 유의하세요. 이는 jQuery 라이브러리가 전역 범위에서 $ 기호를 정의하기 때문입니다. jQuery 대신 이 표기법을 사용하여 코드를 단축할 수 있습니다. 예를 들어 $("#target")는 jQuery("#target")와 동일합니다.

또한 show() 및 hide() 메소드는 표시 또는 숨기기 방법을 제어하기 위해 일부 선택적 매개변수를 허용합니다. 예를 들어 $("#target").show("slow")를 사용하여 디스플레이에 느린 애니메이션 효과를 적용할 수 있습니다. 마찬가지로 $("#target").hide(1000)를 사용하여 숨기기 애니메이션이 1초 동안 지속되도록 할 수 있습니다.

show() 및 hide() 메서드 외에도 jQuery는 요소의 표시 효과와 숨겨진 효과를 제어하는 ​​몇 가지 다른 메서드도 제공합니다. 예를 들어, fadeIn() 메서드와 fadeOut() 메서드는 요소를 페이드 인 및 페이드 아웃합니다. SlideDown() 및 SlideUp() 메서드를 사용하면 요소가 아래로 미끄러지거나 축소될 수 있습니다. 이러한 메서드를 사용할 때 show() 및 hide() 메서드와 동일한 매개 변수를 사용하여 애니메이션 효과를 제어할 수 있습니다.

마지막으로 요소의 표시 상태 간을 전환하려면 토글클래스() 메서드를 사용할 수 있습니다. 예를 들어, 다음 코드는 클릭 시 div 요소를 표시하거나 숨기는 토글 버튼을 생성합니다. 🎜

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

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

🎜JavaScript 코드는 다음과 같습니다. 🎜

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

🎜여기서 숨겨진 CSS 클래스는 div 요소의 표시 및 숨기기를 제어하는 ​​데 사용됩니다. 강요. div 요소에 이 클래스가 있으면 숨겨집니다. 그리고 해당 클래스가 없으면 표시됩니다. ToggleClas 메소드는 요소의 두 상태 사이를 전환합니다. 🎜

위 내용은 jquery 표시 숨기기 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!