[jQuery] show(), css(), toggle(), hide()

JS 관련/JQuery

[jQuery] show(), css(), toggle(), hide()

씨네 2022. 2. 7. 09:38

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	img{
		width: 200px;
		height: 200px;
	}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

	$(document).ready(function(){
		$("img").click(function(){
			alert("이미지를 클릭했습니다.");
			$(this).hide();
		});	
	});
	
	function showImg(){
		$("img").show();
	}
	
	function resizeImg(){
		$("img").css("width","100px").css("height","100px");
	}

	function resizeImg2(){
		$("img").css("width","200px").css("height","200px");
	}
	
	function addImg(){
		$("img").last().after("<img src='resources/image/img01.png'>");
	}

	function toggleImg(){
		$("img").toggle();
	}
</script>
</head>
<body>

	<button onclick="showImg();">이미지 보이기</button>
	<button onclick="resizeImg();">이미지 축소</button>
	<button onclick="resizeImg2();">이미지 확대</button>
	<button onclick="addImg();">이미지 추가</button>
	<button onclick="toggleImg();">이미지 숨기기/보이기</button>
	
	<br><br>
	
	<div>
		<img alt="test" src="resources/image/img01.png">
	</div>
</body>
</html>

$(document).ready(function(){
	$("img").click(function(){
		alert("이미지를 클릭했습니다.");
		$(this).hide();
	});	
});

지난번 포스팅에서 제이쿼리문을 작성하는 두가지 방법중 하나입니다.

굳이굳이 이렇게 한번 해봤습니다,,,

해당 코드는 "img" -> <img>태그를 클릭하면 이벤트가 발생합니다.

"이미지를 클릭했습니다."라는 메세지를 출력시키며

$(this)자신을 hide()숨깁니다.

클릭해볼까요?

function showImg(){
	$("img").show();
}

이 함수는 이미지 보이기 버튼을 클릭하면 실행됩니다.

함수가 실행되면 이미지가 show() - > 보이게 됩니다.

function resizeImg(){ $("img").css("width","100px").css("height","100px"); }

function resizeImg(){
	$("img").css("width","100px").css("height","100px");
}

해당항수는 이미지 축소 버튼을 클릭하면 실행됩니다.

이미지의 css를 변경하는 명령인데요.

원래의 크기보다 작은크기로 변경시킵니다.

왼쪽이 원래크기 오른쪽이 버튼을 누른뒤 크기

function resizeImg2(){
	$("img").css("width","200px").css("height","200px");
}

이 함수는 이미지크기를 크게 만들어줍니다.

버튼 클릭 전 후

function addImg(){
	$("img").last().after("<img src='resources/image/img01.png'>");
}

img를 추가하는 함수입니다.

function toggleImg(){
	$("img").toggle();
}

toggle은 hide와 show가 합쳐진 메소드라고 볼수있습니다.

한번 시행되면 숨기고 다시 실행되면 보여주는 것을 반복합니다.

728x90