>  기사  >  웹 프론트엔드  >  Jquery에서 id 요소를 표시하고 숨기는 방법

Jquery에서 id 요소를 표시하고 숨기는 방법

青灯夜游
青灯夜游원래의
2022-05-23 15:50:122446검색

표시 및 숨기기 구현 방법: 1. "$("id value")" 문을 사용하여 id 속성 값을 통해 지정된 요소를 얻고 요소 객체를 반환합니다. 2. 토글(), 슬라이드토글() 또는 fadeToggle()은 "id element object.toggle()"과 같이 획득한 요소 객체를 표시하거나 숨깁니다.

Jquery에서 id 요소를 표시하고 숨기는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

id 요소를 표시하고 숨기는 jquery 메소드

1. id 속성 값을 통해 지정된 요소를 가져옵니다

$("id值")

는 지정된 요소를 포함하는 객체를 반환합니다

2. 선택한 요소

jquery는 다음 3가지 내장 메서드를 사용하여 요소를 숨기고 표시할 수 있습니다.

  • toggle() 메서드

  • slideToggle() 메서드

  • fadeToggle() 메서드 이 세 가지 메소드는 id 요소를 확인합니다. 표시되면 숨겨집니다.

  • 1.toggle() 메소드

toggle() 메소드는 선택한 요소에서 hide()와 show() 사이를 전환합니다.

이 방법은 선택한 요소의 표시 상태를 확인합니다. 요소가 숨겨져 있으면 show()를 실행하고, 요소가 표시되면 hide()를 실행합니다. 그러면 숨김 상태와 표시된 상태 사이를 전환하는 효과가 생성됩니다.

예제 1: 선택한 요소에서 SlideUp()과 SlideDown() 사이를 전환하려면ggle() 메서드

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("#start").css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("#start").toggle();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li id="start">li (id值为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<button>隐藏和显示id值为"start"素</button>

	</body>
</html>

2, SlideToggle() 메서드

Jquery에서 id 요소를 표시하고 숨기는 방법slideToggle() 메서드를 사용하세요.

이 방법은 선택한 요소의 표시 상태를 확인합니다. 요소가 숨겨져 있으면 SlideDown()이 실행되고, 요소가 표시되면 SlideUp()이 실행됩니다. 이는 숨김 상태와 표시된 상태 사이를 전환하는 효과를 만듭니다.

예 2:

$("button").click(function() {
	$("#start").slideToggle()
});

3. fadeToggle() 메서드

Jquery에서 id 요소를 표시하고 숨기는 방법fadeToggle() 메서드는 fadeIn()과 fadeOut() 메서드 사이를 전환합니다.

요소가 페이드 아웃되면 fadeToggle()은 페이드 인 효과를 사용하여 해당 요소를 표시합니다.

  • 요소가 페이드 인되면 fadeToggle()은 페이드 아웃 효과를 사용하여 해당 요소를 표시합니다.

  • 예 3:

    $("button").click(function() {
    	$("#start").fadeToggle()
    });

[추천 학습:

jQuery 비디오 튜토리얼Jquery에서 id 요소를 표시하고 숨기는 방법,

웹 프론트엔드 비디오

]

위 내용은 Jquery에서 id 요소를 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.