제이쿼리(JQuery)의 기본

1. 제이쿼리(JQuery)란?

제이쿼리(JQuery)는 자바스크립트(JavaScript)를 이용해 만든 다양한 함수들의 집합인 라이브러리 언어입니다.

그래서, 제이쿼리(JQuery)는 문서 객체 모델(DOM, Document Object Model)과 이벤트 객체(Event Object)의 호환성 문제를 해결해 줍니다.

 

2. 제이쿼리(JQuery) 선택자 사용하기

제이쿼리(JQuery)에서 선택자를 사용하기 위해서는 제일 먼저 문서 객체를 가져와야 합니다. 먼저 문서 객체를 가져온 다음에, 제이쿼리(JQuery)가 실행되어야 합니다. 제이쿼리(JQuery)가 먼저 실행되고, 문서 객체를 불러오면 정확한 정보가 출력되지 않습니다.

그래서, 아래의 코드를 사용하여 제이쿼리(JQuery)를 사용합니다.

<script> 
	$(document).ready(function(){ 
		$("#test").css("color","blue"); 
	}); 
</script>

<script> 
	$(function(){ 
    	$("#test").css("color", "blue"); 
    }); 
</script>

 

3. 제이쿼리(JQuery) 기본 선택자

제이쿼리(JQuery)의 기본 선택자는 직접 선택자와 인접 관계 선택자로 나눌 수 있습니다.

 

1) 직접 선택자

직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자입니다.

 

i) 전체 선택자

- $("*")

- 모든 요소를 선택

 

ii) 아이디 선택자

- $("#아이디명")

- id 속성에 지정한 값을 가진 요소 선택

 

iii) 클래스 선택자

- $(".클래스명")

- class 속성에 지정한 값을 가진 요소 선택

 

iv) 요소 선택자

- $("요소명")

- 지정한 요소명과 일치하는 요소들만 선택

 

v) 그룹 선택자

- $("선택 1, 선택2, 선택3")

- 선택에 지정된 요소들을 한 번에 선택

 

vi) 종속 선택자

- $("p.test_1")

- $("p#test_1")

- p 요소 중에 test_1이라는 class 또는 id 값을 가진 요소 선택

 

2) 인접 관계 선택자

인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고, 그 다음 선택한 요소와 가까이에 있는 요소를 선택할 때 사용합니다.

 

i) 부모 요소 선택자

- $("요소").parent()

- 선택한 요소의 부모 요소 선택

 

ii) 상위 요소 선택자

- $("요소").parents()

- 선택한 요소의 상위 요소 모두 선택

 

iii) 가장 가까운 상위 요소 선택자

- $("요소").closet("div")

- 요소에서 가까운 div 선택

 

iv) 하위 요소 선택자

- $("요소 하위요소")

- 선택한 요소의 하위 요소를 선택

 

v) 자식 요소 선택자

- $("요소>자식요소")

- 선택한 요소를 기준으로 자식 요소 선택

 

vi) 자식 요소들 선택자

- $("요소").children()

- 선택한 요소의 모든 자식 요소 선택

 

vii) 형(이전) 요소 선택자

- $("요소").prev()

- 선택한 요소의 바로 이전 요소 선택

 

viii) 형(이전) 요소들 선택자

- $("요소").prevall()

- 선택한 요소의 이전 요소 모두 선택

 

ix) 지정 형(이전) 요소들 선택자

- $("요소").prevUntil("요소명")

- 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택

 

x) 동생(다음) 요소 선택자

- $("요소").next()

- $("요소 선택+다음 요소")

- 선택한 요소의 다음 요소 선택

 

xi) 동생(다음) 요소들 선택자

- $("요소").nextall()

- 선택한 요소의 다음 요소 모두 선택

 

xii) 지정 동생(다음) 요소들 선택자

- $("요소 선택").nextUntil("h2")

- 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택

 

xiii) 전체 형제 요소 선택자

- $(".class1").siblings()

- class값이 class1인 요소의 형제 요소 전체 선택

 

3) 제이쿼리(JQuery) 탐색 선택자

탐색 선택자를 사용하면 기본 선택자로 선택한 요소에서 한 번 더 탐색하여 좀 더 정확하게 선택할 수 있습니다. 탐색 선택자에서는 대표적으로 배열의 인덱스(index)를 사용하여 선택하는 위치 탐색 선택자와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 속성 탐색 선택자가 있습니다.

 

I) 위치 탐색 선택자

i) $("요소:first") or $("요소").first()

- 요소 중 첫 번째 요소만 선택

 

ii) $("요소:last") or $("요소").last()

- 요소 중 마지막 번째 요소만 선택

 

iii) $("요소:odd")

- 요소 중 짝수 번째 요소만 선택

 

iv) $("요소:even")

- 요소 중 홀수 번째 요소만 선택

 

v) $("요소:first-of-type")

- 요소 무리 중 첫 번째 요소만 선택

 

vi) $("요소:last-of-type")

- 요소 무리 중 마지막 번째 요소만 선택

 

vii) $("요소:nth-child(숫자)")

- 요소 무리 중 숫자 번째 요소만 선택

 

viii) $("요소:nth-child(숫자n)")

- 요소 무리 중 n배수 번째 요소만 선택

 

ix) $("요소:nth-last-of-type(숫자)")

- 요소 무리 중 마지막 번째에서 숫자 번째 요소만 선택

 

x) $("요소:only-child")

- 부모 요소 내에 1개 뿐인 요소 선택

 

xi) $("요소:eq(index)") or $("요소").eq(index)

- 요소 중 인덱스가 참조하는 요소 선택

 

xii) $("요소:gt(index)")

- 요소 중 인덱스보다 큰 인덱스가 참조하는 요소 가져옴

 

xiii) $("요소:lt(index)")

- 요소 중 인덱스보다 작은 인덱스가 참조하는 요소 가져옴

 

xiv) $("요소").slice(index)

- 요소 중 인덱스부터 참조하는 요소 가져옴

 

II) 속성 탐색 선택자

- 속성 탐색 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자입니다.

 

i) $("요소[속성]")

- 선택한 요소 중 특정 속성이 포함된 요소만 선택

 

ii) $("요소[속성=값]")

- 선택한 요소 중 특정 속성이 값인 요소만 선택

 

iii) $("요소[속성^=텍스트]")

- 선택한 요소 중 특정 속성이 텍스트로 시작하는 요소만 선택

 

iv) $("요소[속성$=텍스트]")

- 선택한 요소 중 특정 속성값이 텍스트로 끝나는 요소만 선택

 

v) $("요소[href*=텍스트]")

- 선택한 요소 중 href 속성값이 텍스트를 포함하는 요소만 선택

 

vi) $("요소:hidden")

- 선택한 요소 중 숨겨져 있는 요소만 선택

 

vii) $("요소:visible")

- 선택한 요소 중 보이는 요소만 선택

 

viii) $(":text")

- input 요소 중 type 속성값이 text인 요소만 선택

 

ix) $(":selected")

- selected 속성이 적용된 요소만 선택

 

x) $(":checked")

- checked 속성이 적용된 요소만 선택

 

5. 제이쿼리(JQuery) 배열 메소드

 

$("요소").each(function) or $.each($("요소").function)

배열에 저장된 문서 객체만큼 메소드 반복 실행

 

$.map(Array, function)

배열에 저장된 데이터 수만큼 메소드 반복 실행

함수에서 반한된 데이터는 새 배열에 저장되고, 새로 저장된 배열 객체를 반환

 

$.grep(Array, function)

배열에 저장된 데이터 수만큼 메소드 반복 실행

반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 반환

 

$.inArray(data, Array, start index)

Array 안에서 data를 찾는데, start index부터 데이터를 찾음

데이터를 찾지 못하면 -1 반환

데이터를 찾으면 가장 맨 앞 데이터의 인덱스 반환

 

$.isArray(object)

입력한 객체가 배열 객체라면 true, 아니면 false 반환

 

$.merge(Array1, Array2)

Array1과 Array2를 합쳐 1개의 배열로 그룹화

 

$("요소").index("지정 요소")

선택자로 요소를 먼저 선택 후, 지정한 요소의 인덱스 정보를 가져옴