Javascript & JQuery & CSS

JQuery는 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리 이다.
JQuery란 이름도 자바스크립트에서 DOM 엘리먼트를 질의한다 라는 의미다.
손쉽게 엘리먼트에 접근하게 해준다.
JQuery는 브라우저의 이벤트에 대한 처리, DOM 애니메이션 , Ajax 상호작용 등을 또한 쉽게 해준다.

JQuery는 Document Element에 접근하기 위해 셀렉터(Selector)를 제공한다.
Document구조를 명료하면서 읽기 쉬운 형식으로 표현하는 CSS 셀렉터로 페이지의 엘리먼트를 찾을 수 있다.
(CSS = Cascading Style Sheets : 는 HTML문서에 적용하여 HTML 문서의 스타일을 통일되게 작성할 수 있도록 웹 기술에 도입된 개념이다.
JQuery에서는 CSS의 셀렉터로 HTML페이지 내의 엘리먼트를 참조한다)
예를 들어, HTML문서 내에 출력되는 내용의 가독성을 높이기 위해 테이블의 행 단위로 번갈아가며 짝수와 홀수 행에 서로 다른 배경색을 넣으려 한다.

이 때 , 짝수와 홀수 행을 조회해야 한다.

$(document).ready(function() {
     $('tr:even').css('backgroundColor','red');
     $('tr:odd').css('backgroundColor','blue');
});

이 중 $() 가 JQuery 메소드이며, tr:even와 tr:odd가 셀렉터이다.


셀렉터란 무엇인가?

엘리먼트를 찾는 것.

JQuery의 수많은 기능을 활용하기 위해서는 제일 먼저 내가 원하는 엘리먼트(element, 요소, HTML페이지 내에서 대상 객체)를 찾아내는 것이 우선이다.
그래야지만 얻어지는 결과로 원하는 동작을 할 수 있기 때문이다.

기본 CSS 셀렉터 -

*	모든 엘리먼트와 일치
E	태그명이 E인 모든 엘리먼트와 일치
E F	E의 자손이면서 엘리먼트의 이름이 F인 모든 엘리먼트
E>F	E의 바로 아래 F엘리먼트
E+F	E의 형제 엘리먼트로 바로 다음 형제 F엘리먼트
E~F	E의 형제 엘리먼트로 다음에 나오는 모든 F엘리먼트
E:has(F)	엘리먼트 F의 자손을 하나 이상 가지고 있는 모든 E엘리먼트
E.C	클래스명 C를 가지고 있는 모든 E엘리먼트
*.C	클래스명 C를 가지고 있는 모든 엘리먼트
E#I	아이디가 I인 모든 E엘리먼트
*#I	아이디가 I인 모든 엘리먼트
E[A]	어트리뷰트 A를 가지는 모든 E엘리먼트
E[A=V]	어트리뷰트 A의 값이 V인 모든 E엘리먼트
E[A^=V]	어트리뷰트 A의 값이 V로 시작하는 모든 E엘리먼트
E[A$=V]	값이 V로 끝나는 어트리뷰트 A를 가지고 있는 모든 E엘리먼트
E[A*=V]	값이 V를 포함하는 어트리뷰트 A를 가지고 있는 모든 E엘리먼트

위치기반 셀렉터 -

:first	페이지에서 처음으로 일치하는 엘리먼트를 반환
:last	마지막으로
:even	페이지 전체의 짝수 번째 엘리먼트를 반환
:odd	홀수
:eq(n)	n번째로 일치하는 엘리먼트는 반환
:gt(n)	n번째 엘리먼트(포함하지 않음) 이후의 일치하는 엘리먼트를 반환
:lt(n)	n번째 엘리먼트(포함하지 않음) 이전의 일치하는 엘리먼트를 반환
:first-child	첫 번째 자식 엘리먼트를 반환
:last-child	마지막
:only-child	형제가 없는 모든 엘리먼트를 반환
:nth-child(n)	n번째 자식 엘리먼트를 반환
:nth-child(even)	짝수 엘리먼트를 반환
:nth-child(odd)	홀수
:nth-child(Xn+Y)	전달된 공식에 따른 n번째 자식 엘리먼트를 반환. Y가0인 경우 생략 가능하다.

위치기반 셀렉터 -

:animated	현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
:button	모든 버튼을 선택한다.
checkbox	체크박스 엘리먼트만 선택한다
checked	선택된 체크박스나 라디오 버튼만 선택한다.
contains(foo)	텍스트 foo를 포함하는 엘리먼트만 선택한다.
disabled	인터페이스에서 활성화/비활성화 상태인 모든 폼 엘리먼트를 선택한다.
disabled	인터페이스에서 활성화/비활성화 상태인 모든 폼 엘리먼트를 선택한다.
enabled
selected	선택된 엘리먼트만 선택한다.
visible	보이는 엘리먼트만 선택한다
hidden	:) 선택한다.
image
input
not(fiter)
parent
password
radio
reset
file
submit
text
header