[JQuery] 표현식

 

예전에 eq 라는 표현식을 배운적이 있습니다. 나열된 엘리먼트 중에서 원하는 순서에 해당되는 엘리먼트의 정보를 가져올 수 있었습니다. 이번에는 eq과 비슷하게 사용되는 표현식에 대해서 알아보도록 하겠습니다.

 

 

1. 샘플 예제

 

테스트를 하기 위해 아래와 같이 예제를 만들었습니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

 

2. :gt(n) ~ 보다 큰 표현식

 

엘리먼트 중에서 인덱스 값이 n 보다 큰 엘리먼트를 선택합니다.

 

$('li:gt(2)');

 

위와 같이 사용할 경우, 인덱스 값 2는 3번째 엘리먼트를 가르킵니다. 즉, 세 번째보다 큰 네 번째 엘리먼트를 선택해서 나타내게 됩니다.

 

예를 들어 $(li:gt(1)'); 이라고 했을 경우엔 2번째 엘리먼트 보다 큰 3번째와 4번째 엘리먼트를 표시하게 됩니다.

 

 

3. :lt(n) ~ 보다 작은 표현식

 

엘리먼트 중에서 인덱스 값이 n 보다 작은 엘리먼트를 선택합니다.

 

$('li:lt(2)');

 

위와 경우, 인덱스 2는 3번째 엘리먼트를 가르킵니다. 3번째 보다 작은 1,2번째 엘리먼트를 선택합니다.

 

 

3. :first 첫 번째 엘리먼트

 

first 는 엘리먼트 중에 가장 첫 번째 엘리먼트를 선택합니다.

eq와 비교한다면 eq(0) 와 같은 표현식입니다.

 

$('li:first');

 

<li> 중에 1번째 엘리먼트를 선택합니다.

 

 

4. :last 마지막 엘리먼트

 

last 는 엘리먼트 중에 가장 마지막 엘리먼트를 선택합니다.

 

$('li:last');

 

<li> 중에 가장 마지막에 있는 4번째 엘리먼트를 선택합니다.

 

 

5. :even 짝수 엘리먼트

 

even 은 엘리먼트 중에서 인덱스 값이 짝수인 엘리먼트를 선택하게 됩니다.

 

$('li:even');

 

위의 예제에서 even 표현식을 사용할 경우, 2번째와 4번째 엘리먼트를 선택합니다.

 

 

6. :odd 홀수 엘리먼트

 

odd 은 even와 반대로 엘리먼트 중에서 인덱스 값이 홀수인 엘리먼트를 선택하게 됩니다.

 

$('li:odd');

 

위의 예제에서 odd 표현식을 사용할 경우, 1번째와 3번째 엘리먼트를 선택합니다.

 

^ㅇ^!!!

 

JavaScript에서 하기 힘들었던 표현식을 JQuery에서 편하게 할 수 있습니다.!!

 

 
이 게시물을...