1. 다운로드
제이쿼리 공식 홈페이지에서 다운로드 할 수 있습니다. [ www.jquery.com/download ]
다운로드 페이지에는 두가지 버전이 존재합니다.
uncompressed : 주석, 설명들이 친절하게 나와있고 들여쓰기도 잘 되있는 버전. 공부용..?
compressed: 용량을 최소화 하기 위해 주석,들여쓰기,설명 등을 제거한 버전. 배포용, 개발용으로 많이 쓰임
2. 선택자
선택자를 사용하면 지정한 문서(HTML) 객체를 선택해 올 수 있다.
직접 선택자, 인전관계선택자, 탐색 선택자가 있다.
|
선택자 사용을 준비하기 위해 제이쿼리를 먼저 로딩해야한다. jquery 라이브러리를 풀러온 후, $(document).ready(function(){실행문}); 또는 $(function(){실행문}); 과 같이 사용한다.
<script type="text/javascript" src="제이쿼리 라이브러리.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ }); //]]> </script>
|
0) 제이쿼리 기본 문법
$(선택자).메서드 : 선택자는 (X)HTML에 있는 요소를 선택해오고, 메서드로 요소에 다양한 명령을 내립니다.
1) 직접 선택자
직접선택자는 특정 개체를 직접 선택하는 것을 말한다.
$("*") : 전체 선택자
$("#아이디명") : 아이디 선택자
$(".클래스명") : 클래스 선택자
$(요소명) : 요소 선택자
$("선택1, 선택2, 선택3...") : 그룹 선택자
2) 인접 관계 선택자
특정 선택자에 인접한 요소들을 선택하는 것을 말한다
$("요소 선택").parent() : 요소의 부모를 선택
$("요소 선택").parents() : 한단계 상위에 있는 요소를 모두 선택함(부모의 형제 모두 선택)
$("요소 선택 하위 요소") : 선택한 요소에 지정한 하위 요소를 선택합니다.(depth 신경 안씀) ex) $("table li")
$("요소 선택>자식 요소") : 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택합니다.(바로 한단계 아래 depth만 선택)
$("요소 선택").children() : 선택한 요소의 자식을 모두 선택
$("요소 선택").prev() : 선택한 요소의 바로 이전 요소를 선택
$("dyth tjsxor").prevAll() : 선택한 요소의 모든 이전 요소 선택
3) 탐색 선택자
탐색 선택자를 사용시 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한번 더 탐색해서 정확히 선택할 수 있습니다.
$("요소선택:first") or $("요소선택").first() 요소 중 첫 번째 요소만 선택
$("요소선택:last") or $("요소선택").last() 요소 중 마지막 요소만 선택
$("요소선택:odd") 요소 중 홀수 번째 요소만 선택 (주의사항 : 요소의 인덱스는 0부터 시작)
$("요소선택:even") 요소 중 짝수 번째 요소만 선택 (주의사항 : 요소의 인덱스는 0부터 시작)
$("요소선택:first-of-type") 요소 무리중 첫번째 요소만 선택
$("요소선택:last-of-type") 요소 무리 중 마지막 요소만 선택
$("요소선택:nth-child(숫자") 요소 무리 중 숫자번째 요소만 선택
$("요소선택:nth-child(숫자n)") 요소 무리 중 숫자 배수 번째에 있는 요소만 선택
$("요소선택:nth-last-of-type(숫자") 요소 무리 중 마지막 위치로부터 숫자번째에 있는 요소 선택
$("요소 선택:only-child") 부모 요소 내에 요소가 1개뿐인 요소만 선택
$("요소선택:eq(index)") or $("요소선택").eq(index) 요소 중 인덱스에 참조하는 요소를 불러옵니다
$("요소선택:gt(index)") 요소 중 인덱스보다 큰 인덱스가 참조하는 요소를 불러옵니다(인덱스보다 큰것들 선택)
$("요소선택:lt(index)") 요소 중 인덱스보다 작은 인덱스가 참조하는 요소를 불러옵니다(인덱스보다 작은것들 선택)
$("요소선택").slice(index) 요소 중 인덱스 2부터 참조하는 요소를 불러옵니다
4. 속성 탐색 선택자
선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해 오는 선택자이다.
$("요소 선택[속성]") 요소 중 속성이 포함된 요소를 선택
$("요소 선택[속성=값]") 요소중 속성의 값이 일치하는 요소만 선택
$("요소 선택[속성^=텍스트]") 요소중 속성 값이 텍스트로 시작하는 요소 선택
$("요소 선택[속성$=텍스트]") 요소 중 속성값이 텍스트로 끝나는 요소 선택
$("요소 선택[href*=텍스트]") 요소 중 href 속성값이 텍스트를 포함하는 요소를 선택
$("요소 선택:hidden") 요소 중 숨겨져 있는 것만 선택
$("요소 선택:visible") 요소 중 보이는 것만 선택
$(":text") input요소 중 type 속성값이 text인 요소만 선택
$(":selected") selected 속성이 적용된 요소만 선택
$(":checked") checked 속성이 적용된 요소만 선택
체이닝기법
jquery는 자바스크립트에서 처럼 var 객체에 오브젝트를 넣어서 다중 속성을 넣을 수 없기 때문에 체이닝 기법을 이용합니다.
$(요소 선택).css(속성1,값1).css(속성2,값2).css(속성3,값3) ... ; 이런식으로요