[개발일지 35일차] Form 선택자, DOM

MSJ·2022년 6월 22일
JavaScriptjqueryweb개발일지
0

WEB

목록 보기
35/41
post-thumbnail

2022-06-22

어제에 이어서,

Form 태그 선택자

Form 태그 내부의 입력에 관련된 선택자이다.
태그를 선택하는 형식은 대부분 똑같다!

:input : 모든 입력 태그들 종합 선택

아래부터는 input 태그의 type 속성을 선택하는 선택자들이다. 기능에 따라 조금씩 분류되어있다. 참고로, number는 적용이 안된다.

:text
:password
:radio
:checkbox
:submit
:reset
:button
:image
:file 

<script>
	$(function(){
		$(":text").css("background-color","darkcyan");
		$(":password").css("background-color","cyan");
	});
</script>

input 태그의 활동상태에 따른 태그 선택자

:enabled : 활성 상태 선택자
:disabled : 비 활성 상태 선택자
:selected : select 태그 내의 option 태그 중 현재 선택 상태인 태그의 선택자
:checked : checked나 radio에서 현재 체크 상태인 태그의 선택자

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$(":enabled").css("background-color","darkcyan");
		$(":disabled").css("background-color","blue");	
	});
</script>

비활성 상태는 텍스트 입력이 안되고 고정되어있는 상태다

jQuery 이벤트 함수

jQuery는 여러 이벤트에 대해서도 이벤트 처리를 할 수 있는 함수를 제공한다.
각 함수는 해당 이벤트가 발생됐을 때 등록된 함수를 자동으로 호출한다.

https://www.w3schools.com/jquery/jquery_ref_events.asp

해당 사이트에서 많은 이벤트 함수들을 볼 수 있다. 그중에서 몇 가지만 들고와보자.

:click
:dblclick
:mouseenter : 마우스 커서를 댔을 때
:mouseleave : 마우스 커서가 벗어날 때
:mousedown : 마우스를 누른 상태
:mouseup : 마우스르
:hover : 커서 대고 벗어날때 (그렇다. 호버는 enter과 leave의 기능을 같이 넣은 태그다)
:focus : 포커스 주어졌을 때
:Blur : 포커스를 잃었을 때
:on : 이벤트를 설정하는 함수
:off : 설정된 이벤트를 제거하는 함수
:one : 이벤트를 설정하고 이벤트를 발생했을 때 자동으로 제거 (이벤트 1회만 발생)

<script>
	$(function(){
		$("#a1").click(function(){
			$("#a1").css("background-color","Darkslateblue");
			$("#a1").css("color","white");
		});  //click했을 때 어떤 동작을 하는 함수를 구현해야 되므로 click 안에 함수를 하나 더 만든다

		$("#a2").dblclick(function(){
			$("#a2").css("background-color","darkcyan");
			$("#a2").css("color","white");
		}); 

		$("#a3").mouseenter(function(){
			$("#a3").css("background-color","Darkslateblue");
			$("#a3").css("color","white");
		}); 

		$("#a3").mouseleave(function(){
			$("#a3").css("background-color","white");
			$("#a3").css("color","black");
		}); 

		$("#a4").mousedown(function(){
			$("#a4").css("background-color","darkcyan");
			$("#a4").css("color","white");
		}); 

		$("#a4").mouseup(function(){
			$("#a4").css("background-color","white");
			$("#a4").css("color","black");
		}); 
		
		$("#a5").hover(function(){
			$("#a5").css("background-color","Darkslateblue");
			$("#a5").css("color","white");
		},function(){
			$("#a5").css("background-color","white");
			$("#a5").css("color","black");
		}); //hover는 mouse enter+leave를 원래 같이 쓴 기능이라고.
		
		$("#a6").focus(function(){
			$("#a6").css("background-color","Darkslateblue");
		}); 
		
		$("#a6").blur(function(){
			$("#a6").css("background-color","darkcyan");
		});
		
		$("#a7").on("click", function(){//on은 이벤트가 매번 발생.
			alert('a7');
		});
		
		$("#a8").one("click", function(){ //one은 이벤트가 단한번만 실행됨
			alert('a8');
		});
		
		$("#a9").on({
			click : function(){
				alert('click');
			},
			mouseenter : function(){
				$("#a9").css("background-color","Darkslateblue");
			},
			mouseleave : function(){
				$("#a9").css("background-color", "white")
			}
		});
		
		function remove_event(){ // off는 on의 이벤트를 끌 수 있음
			$("#a7").off("click");
		}

	});
</script>

DOM

text() : 태그 사이 문자열 제어
->텍스트로 <a href>태그를 써도 텍스트로 출력
html() : 태그 내부의 html 제어
->태그 내부에 <a href>를 쓰면 링크로 출력됨
val() : 입력 도구들의 value 속성값을 제어
attr() : 태그의 속성을 제어

<script>
	function getA1(){
		var str = $("#a1").text();
		alert(str);
	}
	
	function getA2(){
		var str = $("#a2").text();
		alert(str);
	}
	
	function setA3(){
		$("#a3").text("문자열 설정");
	}
	
	function setHtml(){
		$("#a3").html("<a href='https://apple.co.kr'>apple</a>");
	}
	
</script>

html

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="a1">
		<a href = "https://www.google.com">google</a>
	</div>
	<button onclick="getHtml()">html 가져오기</button>
	<button onclick="setHtml()">html 셋팅하기</button>
	
	<input type="text" id="a2">
	<br/>
	<button onclick="getA1()">value 값 가져오기</button>
	<button onclick="setA1()">value 값 설정하기</button>

<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='https://www.apple.co.kr'>apple</a>");
		}
	
	function getA1(){
		var value = $("#a2").val();
		alert(value);
	}
	function setA1(){
		$("#a2").val("1234");
		}
	//get은 값을 가지고 오는거 
	//set은 값을 우리가 넣어주는거, 설정해주는거
</script>
</body>
</html>

attr

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

</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>
	
	
	<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); //이미지크기 2배로 늘리기
			$("#a1").attr("height", 184);
		};
	
	
	</script>
</body>
</html>

append, prepend

append : html코드나 태그를 태그 내부 뒷부분에 추가
prepend : html 코드나 태그를 태그 앞부분에 추가

<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<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>
	
	<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"); // p는 객체. 객체의 텍스트에다가 ""값을 넣어준 것
		
		$("#a1").append(p);
	};
	
	function prepend1(){
		$("#a1").prepend("<p>새롭게 추가한 p3</p>");
	};
	function prepend2(){
		var p = $("<p>")
		p.text("새롭게 추가한 p4"); // p는 객체. 객체의 텍스트에다가 ""값을 넣어준 것
		
		$("#a1").prepend(p);
	};
	
	//append는 태그 내부에 추가하는 거
</script>
</body>
</html>

after, before

after : html 코드나 태그를 태그 바깥족 뒷부분에 배치
before : html 코드나 태그를 태그 바깥쪽 앞부분에 배치

<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>

<style>
	#a1{
		border : solid 1px 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>
	
	<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);
	}
	
	//after before는 태그 바깥에 추가하는 거
</script>
</body>
</html>

Remove, empty

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

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

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

어려웠던 점

선택자가.. 참 많구나...

해결 방법

숙달이 답이요

소감

jQuery는 거의 선택자를 얼마나 적절하게 골라 효율적으로 쓰느냐의 문제가 맞는 것 같다.

profile
MSJ
제로부터 시작하는 프로그래밍&코딩
이전 포스트

[개발일지 34일차] jQuery 선택자

다음 포스트

[개발일지 36일차] CSS 선택자, Animate, Effect, Ajax

0개의 댓글