jquery는 요소를 표시하고 숨기기 위해 어떤 기능을 사용합니까?
- WBOY원래의
- 2022-04-15 10:47:162722검색
함수는 다음과 같습니다. 1. show(), 이 메소드는 숨겨진 요소를 표시할 수 있습니다. 구문은 "element object.show()"입니다. 2. hide(), 이 메소드는 표시된 요소를 숨길 수 있으며 구문은 "element"입니다. object.hide( )"; 3. 토글(), 이 메소드는 요소를 표시하거나 숨길 수 있으며 구문은 "요소 object.toggle()"입니다.
이 튜토리얼의 운영 환경: 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>출력 결과:
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는 요소를 표시하고 숨기기 위해 어떤 기능을 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!