[DAY35]_개발일지: JQuery Event + DOM

hanseungjune·2022년 6월 22일
DaeguFE
0

DaeguFE

목록 보기
41/48
post-thumbnail

✅ JQuery 선택자

☑️ Form 태그 선택자

⭐ FormSel1

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

$(':type') 형태로 할 수 있다는 걸 알고 있을 것!

<!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(){
		$(":enabled").css("background-color", "lightyellow");
		$(":disabled").css("background-color", "gray");
	});
</script>
</head>
<body>
	<input type="text"/>활성 상태<br/>
	<input type="password"/>활성 상태<br/>
	<input type="text" disabled/>비 활성 상태<br/>
	<input type="password" disabled/>비 활성 상태<br/>	
</body>
</html>

enabled 는 활성화 상태, disabled 는 비활성화 상태

✅ JQuery Event

☑️ 함수

JQuery 관련 참고 사이트

⭐ Event

<!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").bind("click", function(){
			  $("#a1").css("background-color", "black");
			  $("#a1").css("color", "white");			
		}); 
		$("#a2").bind("dblclick", function(){
			  $("#a2").css("background-color", "yellow");
			  $("#a2").css("color", "darkgray");		
		});	  
		$("#a3").bind("mouseenter", function(){
			  $("#a3").css("background-color", "black");
			  $("#a3").css("color", "white");		
		});	  
		$("#a3").bind("mouseleave", function(){
			  $("#a3").css("background-color", "white");
			  $("#a3").css("color", "black");		
		});	  
		$("#a4").bind("mousedown", function(){
			  $("#a4").css("background-color", "red");
			  $("#a4").css("color", "yellow");		
		});	  
		$("#a4").bind("mouseup", function(){
			  $("#a4").css("background-color", "yellow");
			  $("#a4").css("color", "red");		
		});
	});
		
	$(function(){
		$("#a5").hover(function(){
			  $("#a5").css("background-color", "yellow");
			  $("#a5").css("color", "red");	
		}, function(){
			  $("#a5").css("background-color", "white");
			  $("#a5").css("color", "black");	
			});
		$("#a6").focus(function(){
			  $("#a6").css("background-color", "blue");
			  $("#a6").css("color", "red");	
		});
		$("#a6").blur(function(){
			  $("#a6").css("background-color", "red");
			  $("#a6").css("color", "blue");
		});
		$("#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>
</html>

bind 함수를 통해서,

click : 클릭하면 결과값 도출
dblclick : 더블클릭
mouseenter : 포인터를 올려 놓으면
mouseleave : 올려 놓은 포인터가 떨어지면
mousedown : 특정 버튼을 누른 상태
mouseup : 특정 버튼을 눌렀다가 뗀 상태

등의 기능을 구현할 수 있다. 아마 다른 것도 되는게 많을 거라고 생각하는데, 굳이 > 더 해보지는 않았다.

hover : mouseenter + mouseleave
focus : 활성화, blur : 비활성화
on : bind랑 비슷한 의미 ( 여러번 실행 가능 )
off : on 기능 제거
one : 한번만 기능 사용 가능

on 하나에 여러가지 이벤트 효과 삽입 가능함 ( 아래자료 참고 )

$("#a9").on({
			click : function() {
				alert('click');	
			},
			mouseenter : function() {
				$("#a9").css("background-color", "black");
			},
			mouseleave : function() {
				$("#a9").css("background-color", "white");
			}
		});

✅ JQuery DOM

☑️ DOM TEXT, HTML, ATTR

⭐ 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 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>
		<a id="a2" href="http://www.google.co.kr">google</a>
	</div>
	<button onclick="getA2()">a2 문자열 가져오기</button>
	<br>
	<br>
	<div id="a3"></div>
	<button onclick="setA3()">a3 문자열 설정하기</button>
	<button onclick="setHtml()">a3 html을 text형태로 출력하기</button>
</body>
</html>

  • $().text()는 html 부분 제외하고 순수 text만 가져옴

⭐ 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").html("<a href='http://apple.co.kr'>apple</a>");
	}
	
	function getA1(){
		var value = $("#a2").val();
		alert(value);
	}
	
	function setA1(){
		$("#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>
	<br>
	<br>
	<input type="text" id="a2"/>
	<br/>
	<button onclick="getA1()">value값 가져오기</button>
	<button onclick="setA1()">value값 셋팅하기</button>
</body>
</html>

  • $().html() 은 순수 텍스트가 아닌 해당 id를 가진 html 태그와 텍스트를 전부다 가져온다.
  • $().val() 은 value값은 가지고 오는 것을 말하고, val() 에 값을 입력하면, 해당 값으로 초기화가 된다.

⭐ attr

<!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 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/googlelogo_color_272x92dp.png" width="272" height="92" id="a1"/>
	<br/>
	<div id="result"></div>
	<button onclick="getAttr()">속성 읽어오기</button>
	<button onclick="setAttr()">속성 설정하기</button>
</body>
</html>

  • $().attr() 는 특정 id값을 가지고 있는 태그의 속성을 가지고 와서 원하는 시맨틱에 .html을 하게 되면 해당 속성의 값을 볼 수 있다.
  • $().attr() 을 통해서 속성의 값을 변경할 수도 있다.

☑️ Append, Prepend, After, Before, Remove, Empty

⭐ append, prepend

<!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 append1() {
		$("#a1").append("<p>새롭게 추가한 p1</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>
</html>

$().append()는 뒤에 붙이기
$().prepend()는 앞에 붙이기

물론 특정 아이디 값을 가진 시맨틱 안에 존재하는 자식태그를 기준으로 앞,뒤 구분하여 붙여넣는다.

⭐ after, before

<!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 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>
</html>

$().after()는 뒤에 붙이기
$().before()는 앞에 붙이기

특정 아이디 값을 가진 시맨틱 기준으로 앞,뒤 구분하여 붙여넣는다.

⭐ remove, empty

<!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 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>
</html>

$().remove(), $().empty() 모두 제거하는 기능이다. 해당 화면에서는 remove() 는 일부만 지우는 것 같고, empty() 는 전부 지우는 것처럼 보이지만, 실제로 바꿔서 실행했을 때도 똑같은 결과가 나왔다.

데이터 자체를 전부 남기지 않으려면 empty()
데이터 자체의 존재는 있었다는 남기려면 remove()

  • detach() 도 있었다. 궁금하면 따로 알아볼 것

어제보다 뭔가 많이 했는데, 그래도 정리는 오늘이 더 잘된 듯 하다.

profile
hanseungjune
필요하다면 공부하는 개발자, 한승준
이전 포스트

[DAY34]_개발일지: JQuery 선택자

다음 포스트

[특강] 개발자 마인드셋

0개의 댓글