댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[강좌4] 제이쿼리 셀렉터 기초 강좌3
이번에도 셀렉터 기초 강좌입니다.

셀렉터 - :first, :last, :even, :odd, :not, :eq, :gt, :lt

이번 강좌는 조금더 심오한 셀렉터를 배워보겠습니다.


예제1
제이쿼리 : $('[name="title"]:first')
name 이 title 것들중 첫번째 것을 찾습니다. :first 를 붙여주면 됩니다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>
<div name="title">제목 4</div>



예제2
제이쿼리 : $('[name="title"]:last')
name 이 title 것들중 마지막인 것을 찾습니다. :last 를 붙여주면 됩니다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>
<div name="title">제목 4</div>



예제3
제이쿼리 : $('[name="title"]:first, [name="title"]:last')
처음과 마지막을 같이 찾아봅시다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>
<div name="title">제목 4</div>



예제4
제이쿼리 : $('[name="title"]:even')
:even 은 짝수번째 것을 찾습니다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>
<div name="title">제목 4</div>

그런데 !! 왜 1, 3 이 찾아졌을까요? even 은 0 포함 시작입니다. 0이 짝수인가라는 논란도 있다던데요.
마무튼 0, 2 번째 것을 찾은것인데, 순서는 0 부터 시작이니 1, 3 이 찾아진 것이죠.
얼핏봐서는 홀수번째 것처럼 보이지만 그게 아닙니다.


예제5
제이쿼리 : $('[name="title"]:odd')
:odd 는 홀수번째 것을 찾습니다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>
<div name="title">제목 4</div>

0부터 시작이므로 1, 3 홀수의 것은 2, 4 가 됩니다. 이게 은근 헷갈리네요.
홀수번째 것을 찾았지만 시작은 0 부터 이므로 보기엔 짝수번째 이네요.
뭐 그렇습니다. 좀 혼동이 오겠지만 그냥 그렇구나 하면됩니다. ㅋㅋ


예제6
- 이번에는 살짝 어려운(?) :not 입니다.
제이쿼리 : $('[name="title"]:not([dev=hrad])')
name 속성 값이 title 인것중 속성이 dev 이고 값이 hard 인것은 찾지않습니다. :not(표현식) 이런식으로 제외할것을 지정합니다.
표현식은 지금까지 배운 셀렉터구문을 그대로 사용하면 됩니다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title" dev="hard">제목 3</div>
<div name="title">제목 4</div>



예제7
- :not 응용
제이쿼리 : $('[name="title"]:not([dev=hard]):first')
name 속성값이 title인 것중에서 dev 속성값이 hard 가 아닌것을 찾아서 그중 중 첫번째것 찾기
이렇게 순서대로 붙여가면서 사용할 수 있습니다. 응용이 중요한 이유죠.

<div name="title" dev="hard">제목 1</div>
<div name="title">제목 2</div>
<div name="title" dev="hard">제목 3</div>
<div name="title">제목 4</div>

좀 바보 같지만 $('[name="title"]:not([dev=hard]):first:first:first:first:first:first:first:first:first:first') 이렇게 해도 위와 결과는 같죠.
이런식으로 돌아가는구나 그것을 이해 해야합니다.



예제7 - 지정한 순서로 찾기
제이쿼리 : $('div:eq(0)') 또는 $('div:eq(2)')
:eq(숫자)
형식을 이용하여 순서대로 찾습니다. 0부터 시작합니다.

이 셀렉터는 메서드도 있습니다. $('div:eq(0)') 은 $('div').eq(0) 과 같습니다. eq() 라는 메서드가 따로 있습니다.
나중에 예제를 올릴 때 다루겠습니다. eq는 은근히 많이 사용했습니다. ^^;

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>
<div name="title">제목 4</div>



예제8 - 지정한 순서 보다 큰것 찾기
제이쿼리 : $('div:gt(0)')
:gt(숫자)
형식을 이용하여 사용합니다. 순서는 0부터 시작합니다. gt 는 Greater than 을 의미합니다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>
<div name="title">제목 4</div>



예제9 - 지정한 순서 보다 작은것 찾기. 큰게 있으니 작은것도 있겠죠. !
제이쿼리 : $('div:lt(3)')
:lt(숫자)
형식을 이용하여 사용합니다. 순서는 0부터 시작합니다. lt 는 Less than 을 의미합니다.

<div name="title">제목 1</div>
<div name="title">제목 2</div>
<div name="title">제목 3</div>

<div name="title">제목 4</div>



현재 이 강좌는 존재하는 모든 셀렉터를 다 다루지는 않습니다. 많이 사용하는것 위주로 강좌진행중 입니다.
기초 강좌가 끝날때 모든 셀렉터를 정리해 보겠습니다.

참고 : http://api.jquery.com/category/selectors/

셀렉터를 응용하여 원하는 것을 잘 찾아내는 능력을 키운다면 제이쿼리의 반은 먹고 들어간다고 해도 될 것 같습니다. ^^;
최대한 짧은 코드로 잘 찾아내는게 중요합니다. 익혀두면 스크립트를 많이 사용하는 기교가 들어간 페이지를 만들때 빛을 발하죠.

 

댓글1▼ 덧보기
관리맨 (2015-06-19 12:26)
:even, :odd 의 설명이 잘못되어 수정하였습니다.
댓글 쓰기
이름 : 패스워드 :

그럼 이번 강좌는 여기 까지입니다. 역시 간단한 예제로 끝 맺겠습니다.



지금 현재 페이지의 너비가 넓어졌다가 다시 돌아옵니다.

$('.biketago').animate({width:'+=100'}, 1000).animate({width:'-=100'}, 1000)

위 버튼의 onclick 소스입니다.

제이쿼리 : animate({width:'+=100'}, 1000)

CSS width 속성의 값을 현재 값에서 +100 시켜줍니다. += 은 현재값에 더하라는 의미입니다.
그리고 animate 라는 메서드명에서 알 수 있듯이 넓어지는 모습이 보이게 됩니다. 에니메이션 효과죠.
1000 이라는 값은 1초를 의미합니다. 1초 동안 에니메이션 되어라 입니다.

그리고 뒤에 같은 메서드를 수치만 -=100 으로 다르게 하여 100 만큼 커진 것을 다시 작아지게 만들었습니다.
이런것을 직접 만들때 어려운점은 브라우저별로 고려를 해야한다는 것인데. 제이쿼리를 쓰면 그런거 필요없습니다. (만세!)

그럼 다음 강좌에서 뵈요 ^^

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :