jquery에서 클릭시 요소를 숨기는 방법-프런트엔드 Q&A-php.cn

jquery에서 클릭시 요소를 숨기는 방법

青灯夜游

풀어 주다： 2022-12-15 09:55:02

원래의

3700명이 탐색했습니다.

구현 단계: 1. click() 함수를 사용하여 클릭 이벤트를 버튼 요소에 바인딩하고 이벤트 처리 함수를 설정합니다. 구문은 "$("button").click(function() {//다음입니다. 클릭 이벤트 발생, 코드 실행});"; 2. 이벤트 처리 함수에서 hide() 함수를 사용하여 지정된 요소를 숨깁니다. 구문은 "$(selector).hide(speed,callback)"입니다.

jquery에서 클릭시 요소를 숨기는 방법

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

jquery에서는 click() 및 hide() 메서드를 사용하여 요소를 클릭하여 숨길 수 있습니다.

구현 단계:

1단계: click() 함수를 사용하여 클릭 이벤트를 버튼 요소에 바인딩하고 이벤트 처리 기능을 설정합니다

$("button").click(function() {
	//点击事件发生后，执行的代码
});

로그인 후 복사

이벤트 처리 기능에서 작성된 코드는 다음과 같습니다. 클릭 후 구현된 효과 코드

2단계: 이벤트 핸들러 함수에서 hide() 함수를 사용하여 지정된 요소를 숨깁니다

$(selector).hide(speed,callback)

로그인 후 복사

샘플 코드:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").hide();
					$("span").hide();
				});
			});
		</script>
		<style>
			div{
				border: 1px solid red;
				background-color: palegoldenrod;
			}
			p,span{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>需要隐藏的div元素</div>
		<span>需要隐藏的span元素</span>
		<p>p元素</p>
		<button>点击按钮隐藏元素</button>
	</body>
</html>

로그인 후 복사

jquery에서 클릭시 요소를 숨기는 방법

지침:

click() 이 메소드는 클릭 이벤트를 바인딩하고 이벤트 핸들러 기능을 설정하는 데 사용됩니다.

요소를 클릭하면 클릭 이벤트가 발생합니다.

click() 메서드는 클릭 이벤트를 트리거하거나 클릭 이벤트가 발생할 때 실행할 함수를 지정합니다.

구문:

//触发被选元素的 click 事件：
$(selector).click()

//添加函数到 click 事件：
$(selector).click(function)

로그인 후 복사

hide() 메소드는 지정된 요소를 숨기는 데 사용됩니다.

Syntax

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

로그인 후 복사

Parameters	Description
속도	선택사항. 효과가 얼마나 빨리 숨겨지는지 지정합니다. 가능한 값: ms "느림" "빠름"
easing	선택 사항입니다. 애니메이션의 다양한 지점에서 요소의 속도를 지정합니다. 기본값은 "스윙"입니다. 가능한 값: "swing" - 시작/끝에서는 천천히 움직이고, 중간에서는 빠르게 움직입니다. "linear" - 일정한 속도로 움직입니다. 팁: 확장 프로그램에서 더 많은 이징 기능을 사용할 수 있습니다.
callbac	선택 사항입니다. hide() 메소드가 실행된 후 실행될 함수입니다.

Parameters

Description

속도

선택사항. 효과가 얼마나 빨리 숨겨지는지 지정합니다.

가능한 값: