[22.06.22]

김도훈·2022년 6월 22일
0

Form

FormSel1

<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(){
		$(":text").css("background-color", "yellow");
		$(":password").css("background-color", "red");
	});
</script>
</head>
<body>
	<input type="text"/><br/>
	<input type="password"/><br/>
	<input type="number"/><br/>
</body>

이벤트 함수

EventSel1

<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").focus(function(){
			$("#a6").css("background-color", "blue");
		});
		
		$("#a6").blur(function(){
			$("#a6").css("background-color", "red");
		});
		
		$("#a7").on("click", function(){
			alert('a7');
		});
		
		$("#a8").one("click", 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>

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

정리

• jQuery는 다양한 이벤트를 처리할 수 있도록 함수를 제공
• 이벤트의 이름과 동일한 함수를 이용해 이벤트를 처리
• on을 사용하면 지정된 이벤트를 등록
• off를 사용하면 지정된 이벤트를 제거
• one을 사용하면 1회성 이벤트 등록이 가능

DOM

DOM1

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



.text를 사용하여 링크가 걸리지 않음

DOM2

<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").html("<a href='http://apple.co.kr'>apple</a>");
	}
	
</script>
</head>
<body>
	<div id="a1">
	<a href="http://www.google.co.kr">google</a>
	</div>
	<button onclick="getHTML()">html 가져오기</button>
	<button onclick="setHTML()">html 셋팅하기</button>
</body>

• Document Object Model
• text : 태그 사이의 문자열을 제어
• html : 태그 내부의 html을 제어

DOM3

<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").html("<a href='http://apple.co.kr'>apple</a>");
	}
	
	function getA2() {
		var value = $("#a2").val();
		alert(value);
	}
	
	function setA2() {
		$("#a2").val("1234");
	}
	
</script>
</head>
<body>
	<div id="a1">
	<a href="http://www.google.co.kr">google</a>
	</div>
	<button onclick="getHTML()">html 가져오기</button>
	<button onclick="setHTML()">html 셋팅하기</button>
	
	<input type="text" id="a2"/>
	<br/>
	<button onclick="getA2()">value 값 가져오기</button>
	<button onclick="setA2()">value 값 설정하기</button>
</body>


• val : 입력 도구들의 value 속성값을 제어

attr

<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 getAttr() {
		var src = $("#a1").attr("src");
		var width = $("#a1").attr("width");
		var height = $("#a1").attr("height");
		var id = $("#a1").attr("id");
		
		$("#result").html("src: "+ src + "<br/>"
						+ "width :" + width + "<br/>" 
						+ "height :" + height + "<br/>"
						+ "id :" + id + "<br/>");
	}
	
	function setAttr() {
		$("#a1").attr("width", 544);
		$("#a1").attr("height", 184);
	}


</script>
</head>
<body>
	<img src="image/구글.png" width="272" height="92" id="a1"/>
	<br/>
	<div id="result"></div>
	<button onclick="getAttr()">속성 읽어오기</button>
	<button onclick="setAttr()">속성 설정하기</button>
</body>



• attr : 태그의 속성을 제어

append/prepend

<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 append1 () {
		$("#a1").append("<p>새롭게 추가한 pl</p>");
	}
	
	function append2 () {
		var p = $("<p>");
		p.text("새롭게 추가한 p2");
		
		$("#a1").append(p);
	}
	
	function prepend1() {
		$("#a1").prepend("<p>새롭게 추가한 p3</p>");
	}
	
	function prepend2() {
		var p = $("<p>");
		p.text("새롭게 추가한 p4");
		
		$("#a1").prepend(p);
	}
</script>
<style>
	#a1 {
		border: 1px solid black;
	}
</style>
</head>
<body>
	<div id="a1">
		<p>p 태그</p>		
	</div>
	<button onclick="append1()">HTML 코드를 뒤에 추가</button>
	<button onclick="append2()">HTML 객체를 뒤에 추가</button>
	<button onclick="prepend1()">HTML 코드를 앞에 추가</button>
	<button onclick="prepend2()">HTML 객체를 앞에 추가</button>
</body>

after/before

<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 after1 () {
		$("#a1").after("<p>새롭게 추가한 p 태그 1</p>");
	}
	
	function after2 () {
		var p = $("<p>");
		p.text("새롭게 추가한 p태그 2");
		
		$("#a1").after(p);
	}
	
	function before1() {
		$("#a1").before("<p>새롭게 추가한 p태그 3</p>");
	}
	
	function before2() {
		var p = $("<p>");
		p.text("새롭게 추가한 p태그 4");
		
		$("#a1").before(p);
	}
</script>
<style>
	#a1 {
		border: 1px solid black;
	}
</style>
</head>
<body>
	<div id="a1">
		<p>p 태그</p>		
	</div>
	<button onclick="after1()">HTML 코드를 뒤에 추가</button>
	<button onclick="after2()">HTML 객체를 뒤에 추가</button>
	<button onclick="before1()">HTML 코드를 앞에 추가</button>
	<button onclick="before2()">HTML 객체를 앞에 추가</button>
</body>

remove/empty

<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 remove_a2(){
		$("#a2").remove();
	}
	function empty_a1(){
		$("#a1").empty();
	}
</script>
<style>
	#a1 {
		border: 1px solid black;
	}	
</style>
</head>
<body>
	<div id ="a1">
		<p>p 태그</p>
		<p id="a2">id가 a2인 p태그</p>
	</div>
	<button onclick="remove_a2()">a2 제거</button>
	<button onclick="empty_a1()">a1 내부의 모든 태그 제거</button>
</body>



• remove : 태그를 제거
• empty : 태그 내의 모든 태그를 제거

0개의 댓글