[WEB] Frontend - JQuery

<한줄요약>

JQuery : CSS생성자를 기반으로 DOM 조작 / event처리를 간편히 하는 JS 라이브러리

 

1. JQuery란?

 

-  CSS생성자를 사용, 기본 JS보다 간편하게 DOM/이벤트 처리 가능

-  모든 브라우저에서 동일하게 동작, 호환성 고려할 필요가 없음

-  Event, Ajax를 쉽게 사용 가능

 

 

2. JQuery 기본 구문

 

-  CSS의 selector를 사용해 DOM을 탐색, 반환값으로 함수 수행

-  $(selector).action(); 의 구조이다.

-  DOM 탐색 전에 문서가 다 로드되어 있어야 한다

-  $(document).ready(function() {   });

-  $(function() {  });

-  2가지 방법으로 문서 로드 후 시작 가능

<script>
	$(document).ready(function() {
    	$(".button").click(function(){
        	$("#id").css("background", "orange");
        });
    });

</script>

-  .button class를 가지는 element 클릭시, #id id를 가지는 element의 css를 변경

 

-  css의 속성 선택자도 똑같이 이용 가능하다

-  $(selector[attr="value"]).action();

 

 

3. JQuery 선택자

 

-  css의 선택자 외에 추가된 선택자

 

-  필터 선택자

-  DOM 탐색한 결과 중 원하는 요소를 찾기 위해 사용

선택자	선택 요소
button	input type="button" 혹은 button 태그
image, password, radio, reset 등 input의 type요소	type="~"인 input
checked	체크된 form
disabled	비활성화된 form
enabled	활성화된 form
focus	현재 포커스가 있는 form
input	모든 입력 폼
selected	option 중 선택된 요소
hidden visible	감춰진 요소 보이는 요소
header	h1~h6 element

-  위치기반 필터 선택자

선택자	선택 요소
:first	첫번째 요소
:last	마지막 요소
:first-child :last-child	첫번째 자식 마지막 자식
only-child	형제가 없는 요소
even odd	짝수번째 요소 홀수번째 요소

-  함수기반 필터 선택자

선택자	선택 요소
:not(filter)	해당 선택자가 아닌 모든 요소
:contains(str)	해당 텍스트를 포함하는 요소
:nth-child(n)	n번째 자식(들)
:eq(n) :gt(n) :lt(n)	n번째 요소 n번 초과 요소들 n번 미만 요소들
:has(f)	해당 선택자와 하나 이상 일치하는 요소들

 

-  래퍼세트

-  JQuery는 선택자를 통해 찾은 DOM 객체들을, 래퍼세트에 담아 반환한다

-  래퍼세트는 다양한 메소드를 지원해 DOM 처리를 돕는다

 

-  요소 반복

-  $.each(array, function(index, item) { } );

-  array의 각 요소들마다 foreach를 돈다. index : 배열 인덱스, item : array의 각 객체들

 

-  $(selector).each( function(index, item) { } );

-  $(selector)의 결과가 array역할을 한다

 

-  filter() : 기존 래퍼세트에서 DOM요소를 추가로 거른 후 반환

-  내부에 선택자 / 함수가 온다

-  필터 선택자로도 불충분한 경우, 함수를 사용해 필터링 조건 명시

 

-  find() : 래퍼세트에 대해 find 선택자를 만족하는 모든 자손요소 반환

 

 

4. DOM 객체 제어

 

속성 제어 메소드

-  attr(name) name에 해당하는 속성 값을 반환

-  attr(name, value)는 해당 속성에 값을 설정

-  removeAttr(name) 해당 속성 제거

 

-  addClass(className) class 추가

-  removeClass(className) class 제거

-  toggleClass(className) 클래스가 있으면 제거, 없으면 추가

 

-  css(styleName) css값 조회

-  css(name, value) css 값 설정

 

-  html() html 반환 (태그 포함)

-  html(value) html 설정

 

-  text() text반환 (태그 제외)

-  text(value) text설정

 

-  DOM 객체 추가

-  $("<h2>hello world!</h2>").css(~~).appenndTo("body");

-  $() : DOM객체를 바로 생성

 

-  DOM 객체 삭제

-  $(selector).remove() 모든 요소를 삭제

-  $(selector).empty() 모든 요소, 하위 자식요소까지 삭제

 

-  DOM 객체 삽입

-  이미 존재하는 객체에 다른 객체 삽입

-  $(A).append(객체) A의 자식 맨 뒤에 객체 삽입

-  $(A).prepend(객체) A의 자식 맨 앞에 객체 삽입

-  $(A).after(객체) A의 형제 바로 앞에 객체 삽입

-  $(A).before(객체) A의 형제 바로 뒤에 객체 삽입

-  appendTo, prependTo, insertAfter, insertBefore : A와 B의 입장이 반대

-  $(B).appendTo(A);

 

 

5. JQuery Event

 

-  이벤트 핸들러를 할당,해제하는 메소드 제공

-  click함수로 클릭 처리 등

 

Event bind하기

-  bind(eventType, data, listener)

-  eventType : 핸들러를 할당할 이벤트 종류

-  data : 핸들러 함수에서 사용할 data

-  listener: 수행되는 핸들러 함수

 

-  unbind(eventType, handler)

-  bind된 핸들러 제거

 

-  on(eventType, listener)

-  동적 DOM 객체에도 적용 가능

-  기존 연결 방식은 동적 DOM 객체에는 적용되지 못한다

-  $().on("click", selector, function() { } );

-  selector에 해당하는 DOM 객체들도 이벤트 바인드 가능

 

-  off()

-  이벤트 등록 제거

 

Simple Event Bind

-  on함수 대신, eventType을 직접 사용할 수 있다

-  .on("click"~~)는

-  .click(~~)와 같다

 

MouseEvent

이벤트	발생조건
click	마우스로 클릭 시
dbclick	더블클릭
mousedown	버튼 누를 때
mouseup	버튼 뗄 때
mouseenter	커서가 들어올 때
mouseleave	커서가 나갈 때
mousemove	마우스가 움직일 때
mouseout	마우스가 벗어날 때
mouseover	마우스가 들어올 때

 

Keyboard Event

이벤트	발생조건
keydown	버튼 누를 때
keypress	글자 입력시
keyup	버튼 뗄 때

-  버튼 누름 -> 글자 입력됨 -> 버튼 떼짐 의 순서로 발생한다

 

Window Event

이벤트	발생조건
ready	DOM 객체가 준비되면
load	윈도우를 호출시
unload	윈도우 닫을 때
resize	윈도우 크기 변화시
scroll	스크롤시
error	에러발생시

 

Input Event

이벤트	발생조건
change	입력 내용 변경시
focusin	포커스가 들어갈 때 (버블링)
focusout	포커스가 나갈 때 (버블링)
focus	포커스가 들어갈 때
blur	포커스가 나갈 때
select	입력 선택할 때
submit	submit시
reset	reset시

 

버블링이란?

-  div - ul - li 구조의 태그가 있다고 할 때, 버블링이 적용되어 있으면

-  li에서 발생한 이벤트에 대해 ul -> div의 핸들러도 처리를 한다

-  ex) li에 포커스 발생시, ul div의 포커스 핸들러도 처리하는 식