jQuery(탐색 선택자 1)

안녕하세요 19살 IT 개발자 포돌이입니다. 

 

지난 시간에는 jQuery(인접 관계 선택자)에 대해서 알아보았습니다.  오늘은 jQuery(탐색 선택자 1)을 나가려고 합니다. 자 그러면 시작해보겠습니다.

 

제이쿼리 탐색 선택자

탐색 선택자

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

 

위치 탐색 선택자

기본 선택자로 선택한 요소는 배열에 담깁니다. 이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있습니다.

first/last 선택자

first 선택자는 선택된 요소 중 첫 번째 요소만 선택합니다. 이와 반대로 last 선택자는 선택된 요소 중 마지막 요소만 선택합니다.

 

기본형

 $("요소 선택:first") 또는 $("요소선택").first();

 $("요소 선택:last") 또는 $("요소선택").last();

 

코딩해보기

 

even/odd 선택자

even 선택자는 선택한 요소 중 홀수 번째 요소만 선택하고 이와 반대로 cold 선택자는 짝수 번째 요소만 선택합니다.

 

기본형

$("요소 선택:even");

$("요소 선택:odd");

 

eq(index)/ lt(index)/gt(index) 탐색 선택자

eq(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택하고 lt(index) 선택자는 선택한 요소 중 지정한 인덱스보다 작은(lt, Less Than) 인덱스를 참조하는 요소만 선택합니다.

 

기본형

$("요소 선택:eq(index)") 또는 $("요소 선택").eq(index);

$("요소 선택:it(index)");

$("요소 선택:gt(index)");

 

코딩해보기

 

이번 예제는 제가 많이 틀렸던 문제네요.. 문법적 요소를 잘 틀리는 문제이므로 천천히 그리고 자세히 보셔야 합니다~

 

first-0f-type / last-of-type 탐색 선택자

first-of-type 선택자는 선택한 요소의 무리 중 첫 번째 요소만 선택합니다. 이와 반대로 last-of-type은 선택한 요소의 무리 중 마지막에 위치한 요소만 선택합니다

 

기본형

 $("요소 선택:first-of-type");

 $("요소 선택:last-of-type");

 

코딩해보기

 

 

nth - child(숫자n) / nth-last-of-type(숫자) 선택자

 

기본형과 설명

 

 $("요소 선택:nth-child(숫자)"); // 1 선택한 요소 중 지정한 숫자에 위치한 요소를 선택한다.

 

 $("요소 선택:nth-child(숫자n)"); // 2 선택한 요소 중 지정한 배수에 위치한 요소를 선택한다.

 

 $("요소 선택:nth-last-child(숫자)"); // 3 선택한 요소 중 마지막 위치에서 지정한 숫자에 위치한 요소를 선택한다. 

 

 

only-child/ slice(index) 선택자

 

only-child 선택자는 선택한 요소가 "부모 요소에게 하나뿐인 자식 요소"인 경우에 선택합니다

slice 선택자는 선택한 요소의 지정 구간 인덱스의 요소를 선택합니다.

 

기본형

 $("요소 선택:only-child"); 

 $("요소 선택").slice(start index, end index);

 

코딩해보기

 

이것으로 jQuery (탐색 선택자 1)을 모두 마쳤습니다 수고하셨습니다 선택자는 거의 다 외워야 해요... 어쩔 수가 없습니다. 위에 나온 예제들과 기본형을 보면서 잘 활용하시고 공부해 나가셨으면 좋겠습니다.^^

 

19살 IT 개발자 포돌이였습니다.

 

-Coding is an Art-

 

코딩을 예술이라 생각하는 사람