jquery는 요소를 표시하고 숨기기 위해 어떤 기능을 사용합니까?-프런트엔드 Q&A-php.cn

jquery는 요소를 표시하고 숨기기 위해 어떤 기능을 사용합니까?

WBOY

풀어 주다： 2022-04-15 11:26:05

원래의

2689명이 탐색했습니다.

함수는 다음과 같습니다. 1. show(), 이 메소드는 숨겨진 요소를 표시할 수 있습니다. 구문은 "element object.show()"입니다. 2. hide(), 이 메소드는 표시된 요소를 숨길 수 있으며 구문은 "element"입니다. object.hide( )"; 3. 토글(), 이 메소드는 요소를 표시하거나 숨길 수 있으며 구문은 "요소 object.toggle()"입니다.

jquery는 요소를 표시하고 숨기기 위해 어떤 기능을 사용합니까?

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

jquery는 요소를 표시하고 숨기는 데 어떤 기능을 사용하나요?

1. 요소 표시: show()

선택한 요소가 숨겨진 경우 다음 요소를 표시합니다.

Syntax

$(selector).show(speed,callback)

로그인 후 복사

speed 선택할 수 있습니다. 요소가 숨겨진 상태에서 완전히 표시되는 상태로 얼마나 빨리 이동하는지 지정합니다. 기본값은 "0"입니다.

가능한 값:

밀리초(예: 1500)

"slow"

"normal"

"fast"

속도를 설정하면 요소가 숨겨진 상태에서 완전히 표시되는 상태로 바뀌면 점차적으로 변경됩니다. 높이, 너비, 여백, 패딩 및 투명도.

콜백은 선택사항입니다. show 함수가 실행된 후 실행될 함수입니다. 속도 매개변수를 설정하지 않으면 이 매개변수를 설정할 수 없습니다.

2. 숨김 요소: hide()

선택한 요소가 표시되면 해당 요소를 숨깁니다.

Syntax

$(selector).hide(speed,callback)

로그인 후 복사

속도는 선택사항입니다. 요소가 표시에서 숨김으로 전환되는 속도를 지정합니다. 기본값은 "0"입니다.

가능한 값:

밀리초(예: 1500)

"slow"

"normal"

"fast"

속도를 설정하면 요소가 표시에서 숨김으로 점차 변경됩니다. 높이를 수정하고, 너비, 여백, 패딩 및 투명도.

콜백은 선택사항입니다. 숨기기 기능이 실행된 후 실행될 기능입니다.

이 매개변수는 속도 매개변수를 설정하지 않으면 설정할 수 없습니다.

예는 다음과 같습니다:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").hide();
  });
  $(".btn2").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

로그인 후 복사

출력 결과:

jquery는 요소를 표시하고 숨기기 위해 어떤 기능을 사용합니까?

3. 자동으로 요소를 식별, 표시 또는 숨깁니다. 요소 사이를 전환합니다.

이 방법은 선택한 요소의 표시 상태를 확인합니다. 요소가 숨겨져 있으면 show()가 실행되고, 요소가 표시되면 hide()가 실행됩니다. 이렇게 하면 토글 효과가 생성됩니다.

참고: 숨겨진 요소는 완전히 표시되지 않습니다(더 이상 페이지 레이아웃에 영향을 미치지 않습니다).

팁: 이 방법은 사용자 정의 기능 간에 전환하는 데 사용할 수 있습니다.

Grammar

$(selector).toggle(speed,easing,callback)

로그인 후 복사

예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换  hide() 和 show()</button>
</body>
</html>

로그인 후 복사

출력 결과:

추천 관련 동영상 튜토리얼: jquery는 요소를 표시하고 숨기기 위해 어떤 기능을 사용합니까? jQuery 동영상 튜토리얼