[수업 6월 4주 3일차] JQuery-3

김유민·2022년 6월 22일

대구 A.I. 스쿨

목록 보기

48/90

1. 학습내용

오늘은 form태그 선택자에 대해 배워 보았다.

Form 태그 선택자
• Form 태그 내부의 입력에 관련된 태그들에 대한 선택자
• :input : 모든 입력에 관련된 태그들을 선택
• :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 태그를 선택

$(function(){
$(":input").css("background-color", "yellow");
});

$(function(){
$(":text").css("background-color", "yellow");
$(":password").css("background-color", "red");
});

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

$(function(){
$(":enabled").css("background-color", "yellow");
$(":disabled").css("background-color", "red");
});

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

jQuery 이벤트 함수

• jQuery는 여러 이벤트에 대해 이벤트 처리를 할 수 있는 함수를 제공
• 각 함수는 해당 이벤트가 발생됐을 때 등록된 함수를 자동으로 호출한다.
-> javascript의 이벤트 리스너와 비슷한듯.

jQuery 이벤트 함수
• click : 클릭
• Dblclick : 더블 클릭
• Mouseenter : 마우스 커서가 들어왔을 때
• Mouseleave : 마우스 커서가 나갔을 때
• Mousedown : 마우스 키를 눌렀을 때
• Mouseup : 마우스 키를 떼었을 때
• Hover : 마우스 커서가 들어왔을 때와 나갔을 때 (<-hover는 두개의 기능을 넣어야 해서 함수 두번 적어줌)

<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");
		})
	})
</script>

• focus : 포커스가 주어졌을 때
• Blur : 포커스를 잃었을 때
• on : 이벤트를 설정하는 함수
• off : 설정된 이벤트를 제거하는 함수
• one : 이벤트를 설정하고 이벤트가 발생했을 때 자동으로 제거

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

$(function(){
$("#a6").focus(function(){
$("#a6").css("background-color", "blue");
});
$("#a6").blur(function(){
$("#a6").css("background-color", "red");
});
});

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

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

function getA1(){
var str = $("#a1").text();
alert(str);
};

attr
• image 한 개 준비
• 프론젝트 – src – webapp - image 폴더 생성
• 준비한 image를 생성한 image폴더에 넣기

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/>"); 
};

-> text 함수를 사용하면 태그 내부의 문자열을 제어할 수 있다.
html 함수를 사용하면 태그 내부의 html 코드를 제어할 수 있다.
val 함수를 사용하면 입력 도구들의 value 속성을 제어할 수 있다.
attr 함수를 사용하면 태그의 속성을 제어할 수 있다.

append, prepend
• append : html 코드나 태그를 태그 내부의 뒤에 추가
• prepend : html 코드나 태그를 태그 내부의 앞에 추가

<script>
function append1(){
$("#a1").append("<p>새롭게 추가한 p1</p>");
};
</script>
<style>
#a1{
border : 1px solid black;
}
</style>

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

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

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