[JQuery] Form

XIXI·2022년 6월 22일

대구AI스쿨

목록 보기

40/57

🌱 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>

✏️FormSel2

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

✏️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

<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 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 : 태그의 속성을 제어

✏️정리

• text 함수를 사용하면 태그 내부의 문자열 제어 가능
• html 함수를 사용하면 태그 내부의 html 코드를 제어
• val 함수를 사용하면 입력 도구들의 value 속성 제어
• 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>

• after : html 코드나 태그를 태그 다음에 배치
• before : html 코드나 태그를 태그 앞에 배치

✏️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 : 태그 내의 모든 태그를 제거

✏️정리

• append : html 코드나 태그를 태그 내부의 뒤에 추가
• prepend : html 코드나 태그를 태그 내부의 앞에 추가
• after : html 코드나 태그를 태그 뒤에 붙힘
• before : html 코드나 태그를 태그 앞에 붙힘
• remove : 태그를 제거
• empty : 태그 내의 모든 태그를 제거

🍃 어려웠던 점 or 해결못한 것

이미지가 깨지는 부분이 있었다.

🍀 해결방법 작성

~~✏️ 어떻게 해결을 했는가?~~
~~✏️ 이렇게 이해를 했다~~
✏️ 어디까지 이해했지?
작성된 코드와 다운로드 이미지 파일명에 차이가 있었음.
파일명을 동일하게 바꾸었으나 여전히 깨지는 문제 발생.
폴더 경로를 한번 더 확인하고 연결할 필요가 있어 보임.
✏️ 다음에 시도해볼 방법

🌷 학습 소감

css와 JQuery를 활용하면 다양한 효과, 사용자 경험을 만들어볼 수 있을 것 같다.

XIXI

Life is experience:)

이전 포스트

[JQuery] 선택자

다음 포스트

[JQuery] Form

대구AI스쿨

🌱 Form

✏️FormSel1

✏️FormSel2

🌱 이벤트 함수

✏️EventSel1

✏️정리

🌱 DOM

✏️Dom1

✏️Dom2

✏️Dom3

✏️attr

✏️정리

✏️append/prepend

✏️after/before

✏️remove/empty

✏️정리

🍃 어려웠던 점 or 해결못한 것

🍀 해결방법 작성

🌷 학습 소감

[JQuery] 선택자

[JQuery] CSS/Ajax

0개의 댓글