Jam's story

[JQuery] 버튼누르면 보이기 / 숨기기 본문

WEB/JQuery

[JQuery] 버튼누르면 보이기 / 숨기기

애플쩀 2022. 5. 17. 15:43

css는 제이쿼리 메소드 
css("속성명","속성값");

 

document.getElementById("btnHide") == $("#btnHide") 제이쿼리객체 
//click() 메소드 

 

 

//모든 span 태그 다가져온다.= $("span")
//css는 제이쿼리 메소드 
//css("속성명","속성값");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

</script>
</head>
<body>
<button id="btnHide" >숨김</button>
<button id="btnShow">보이기 </button>
<br><br>
 <span>함세강</span>
<span> 안시은</span>
<span>김지민 </span>
<span> 김서영</span>
<span>  박재영 </span>
<span> 박민주 </span>
<span> 이동원</span>
<script>
//document.getElementById("btnHide") 와 같은방법
//$("#btnHide") 제이쿼리객체 
//click() 메소드 
$("#btnHide").click(function(){ 
	//window.alert("S");
	//모든 span 태그 다가져온다.
	//css는 제이쿼리 메소드 
	//css("속성명","속성값");
	$("span").css("display", "none");
});

$("#btnShow").click(function(){ 
	$("span").css("display", "inline");
});
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<style>
div{
background-color: black;
color:white;
}
</style>
</head>
<body>
<button >숨기기</button>
<button>보이기</button>
<div id="myDiv">
<font style="font-size: 20px ; font-weight: bold;" >London</font>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam omnis modi distinctio perspiciatis pariatur laborum explicabo accusamus aspernatur alias corrupti temporibus enim nesciunt iusto quis ut dolores rerum iste libero.</p>
<p>Sunt tempora doloremque mollitia dicta ab ipsam corporis debitis vel nam officiis beatae blanditiis unde fugit dolor velit quidem veniam doloribus sapiente voluptas iusto cupiditate corrupti sint suscipit nobis quis.</p>
<script>
$("button").first().click(function(){
	$("#demo").css("display","none");
});

$("button").last().click(function(){
	$("#demo").css("display",);
}); 

$("button:nth-child(2)").click(function(){
	$("#demo").css("display",);
});
$("button:last-of-type").click(function(){
	$("#demo").css("display",);
});
$("button:last-of-type").click(function(){
	$("#demo").css("display",);
});
</script>

</body>

</html>

 

저작자표시

'WEB > JQuery' 카테고리의 다른 글

[JQuery] 의사클래스 풍선도움말  (0) 2022.05.24
[JQuery] 누르면 보이고 사라지고  (0) 2022.05.23
[JQuery] show() hide()  (0) 2022.05.23
[JQuery] 모든 a태그에 있는 특정 클래스 제거  (0) 2022.05.23
jQuery 설치  (0) 2022.05.17
'WEB/JQuery' Related Articles more
Comments