6/22 개발일지

정명환·2022년 6월 22일

대구 ai 스쿨

목록 보기

41/79

1)학습한 내용

Event처리 및 DOM탐색

Form 태그 선택자
:text : type 속성이 text인 input 태그를 선택
:password : type 속성이 password인 input 태그를 선택
:radio : type 속성이 radio인 input 태그를 선택
:checkbox : type 속성이 submit인 input 태그를 선택
:submit : type 속성이 submit인 input 태그를 선택
:reset : type 속성이 rese 인 input 태그를 선택
:button : type 속성이 button인 input 태그를 선택
:image : type 속성이 image인 input 태그를 선택
:file : type 속성이 file인 input 태그를 선택
예)

:enabled : 활성 상태인 input 태그가 선택
:disabled : 비 활성 상태인 input 태그가 선택
:selected : select 태그 내의 option 태그 중 현재 선택되어 있는 태그
를 선택
:checked : checked나 radio에서 현재 check 되어 있는 태그를 선택

Form 태그 선택자를 활용하면 input 태그에 접근 할 수 있다.

jQuery 이벤트 함수
jQuery는 여러 이벤트에 대해 이벤트 처리를 할 수 있는 함수를 제공하고 각 함수는 해당 이벤트가 발생됐을 때 등록된 함수를 자동으로 호출한다.
https://www.w3schools.com/jquery/jquery_ref_events.asp

click : 클릭
Dblclick : 더블 클릭
Mouseenter : 마우스 커서가 들어왔을 때
Mouseleave : 마우스 커서가 나갔을 때
Mousedown : 마우스 키를 눌렀을 때
Mouseup : 마우스 키를 떼었을 때
Hover : 마우스 커서가 들어왔을 때와 나갔을 때
focus : 포커스가 주어졌을 때
Blur : 포커스를 잃었을 때
on : 이벤트를 설정하는 함수
off : 설정된 이벤트를 제거하는 함수
one : 이벤트를 설정하고 이벤트가 발생했을 때 자동으로 제거, 1회성 이벤트 드록이 가능하다.

실습 :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("#a1").click(function(){
			$("#a1").css("background-color", "black");
			$("#a1").css("color", "white");
		});
	
		$("#a2").dblclick(function(){
			$("#a2").css("background-color", "black");
			$("#a2").css("color", "white");
		});
	
		$("#a3").mouseenter(function(){
			$("#a3").css("background-color", "black");
			$("#a3").css("color", "white");
		});
	
		$("#a3").mouseleave(function(){
			$("#a3").css("background-color", "white");
			$("#a3").css("color", "black");
		});
	
		$("#a4").mousedown(function(){
			$("#a4").css("background-color", "black");
			$("#a4").css("color", "white");
		});
	
		$("#a4").mouseup(function(){
			$("#a4").css("background-color", "white");
			$("#a4").css("color", "black");
		});
		
		$("#a5").hover(function(){
			$("#a5").css("background-color", "black");
			$("#a5").css("color", "white");
		}, function(){
			$("#a5").css("background-color", "white");
			$("#a5").css("color", "black");
		});
		
		$("#a6").blur(function(){

			$("#a6").css("background-color", "red");
		});
		
		$("#a7").on(function(){
		alert('a7');
		});

		$("#a8").one(function(){
		alert('a8');
		});
		

		$("#a9").on({
				click : function(){
					alert('click');
				},
				mouseenter : function(){
					$("#a9").css("background-color", "black");
				},
				mouseleave : function(){
					$("#a9").css("background-color", "white");
				}
		});
		
		function remove_event(){
			$("#a7").off("click");
		}
	});
	
	
</script>
</head>
<body>
	<h3 id="a1">click</h3>
	<h3 id="a2">double click</h3>
	<h3 id="a3">mouse enter/leave</h3>
	<h3 id="a4">mouse down/up</h3>
	<h3 id="a5">mouse hover</h3>
	
	<input id="a6" type="text"/>
	
	<h3 id="a7">on</h3>
	<button type = "button" onclick = "remove_event()">이벤트 제거</button>
	<br/>
	
	<h3 id="a8">one</h3>
	
	<h3 id="a9">event setting</h3>
</body>
</html>

참고 : focus, hover, active의 차이
(https://hogni.tistory.com/110)

DOM
Document Object Model

text : 태그 사이의 문자열을 제어
html : 태그 내부의 html을 제어
val : 입력 도구들의 value 속성값을 제어
attr : 태그의 속성을 제어

실습 :
html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getHtml(){
	var html = $("#a1").html();
	alert(html);
}
function setHtml(){
	$("#a1").text("<a href='http://www.apple.co.kr'>apple</a>");
}

function getA1(){
	var html = $("#a2").val();
	alert(value);
}
function setA1(){
	$("#a2").val("1234");
}
</script>
</head>
<body>
	<div id="a1">
		<a href="http://www.google.com">google</a>
	</div>
	<button onclick="getHtml()">html 가져오기</button>
	<button onclick="setHtml()">html 셋팅하기</button>
		<br/>
			<br/>
	<input type="text" id="a2"/>
	<br/>
	<button onclick="getA1()">value값 가져오기</button>
	<button onclick="setA1()">value값  셋팅하기</button>
</body>
</html>

text

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function getA1(){
		var str = $("#a1").text();
		alert(str);
	}
	
	function getA2(){
		var str = $("#a2").text();
		alert(str);
	}
	
	function getA3(){
		$("#a3").text("문자열 설정");
	}

	function setHtml(){
		$("#a3").text("<a href='http://www.apple.co.kr'>apple</a>");
	}
</script>
</head>
<body>
	<div id="a1">a1 문자열</div>
	<button onclick="getA1()">a1 문자열 가져오기</button>
	<br/>
	<div id="a2">
		<a href="http://www.google.co.kr">google</a>
	</div>
	<button onclick="getA2()">a2 문자열 가져오기</button>
		<br/>
	<div id="a3"></div>
	<button onclick="setA3()">a3 문자열 설정하기</button>
		<br/>
	<button onclick="setHtml()">a3 html 설정하기</button>
	
</body>
</html>