Jquery

[JQuery] JQuery 문장구조

개발자하소서 2022. 1. 27. 19:42
728x90
반응형
SMALL
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
 
 	$(document).ready(function(){//문서가 다 준비되었으면
 		
 		$("h2").click(function(){//h2를 클릭하면 
 			$(this).hide(); //this는 h2를 의미
 			// 즉, h2를 숨겨라
 			
 		});
 		
 	});
 	
	// <===== JQuery 문장구조 =====>
	// $(selector).action
 	//	1.$는 jQuery라는 의미이다
 	//  2.$()안에 선택자(selector)를 넣어서 원하는 요소를 선택하고
 	//  3. 선택된 요소에 대해 여러가지를 조작한다. action 함수호출
 	
 	// <ex 1>
 	// $("p").show()
 	// 모든 p (단락)요소들을 찾아서 화면에 표시하라
 	
 	// <ex 2>
 	// $(".group1").slideup()
 	// class=group1인 요소를 슬라이드업 방식으로 표현한다
 	
 	
 	// $("*") ==모든 요소를 선택한다
 	// $(this) == 현재요소를 선택한다
 	// $("p.myclass") == p요소중에서 클래스가 myclass인 요소
 	// $("p.frist") == 첫번째 p요소
 	// $("div span") == div안에 포함된 span요소
 	
 	
 	// #은 id속성
 	
 	
 </script>



<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h2>클릭하면 사라집니다</h2>
 

</body>
</html>

 

📌 화면 출력

 

 

 

클릭하면 글이 사라진다 

 

728x90
반응형
LIST