[JQuery] 속성 셀렉터(1)

 

지난번에는 특정 ID 또는 class 이름으로 각 엘리먼트 및 자식 속성 요소를 찾는 방법을 알아보았습니다.

이번에는 JQuery 에서는 엘리먼트에 선언되어 있는 속성으로 해당 엘리먼트를 찾을 수 있게 해주는 기능에 대해서 알아보도록 하겠습니다.

 

 

1. 샘플 예제

 

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

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="product01">ARM-PC</div>
    <div id="product02">S100-S5PV210</div>
    <div id="product03">G100-S5PV210</div>
    <div id="product04">C221-S5PV210</div>
</body>
</html>

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

 

이번에는 속성 표현식으로 해당하는 엘리먼트를 선택해보는 것을 알아보도록 하겠습니다.

 

 

2. = 표현식

 

= 은 말 그대로 찾으려는 문자와 같은 것을 찾게 됩니다.

속성 표현식은 $('[표현식]') 와 같이 $() 안에 대괄호를 넣어서 사용하면 됩니다.

 

아래 예제에서 id 가 product01 인 것을 찾아보는 방법 입니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('[id=product01]').text();
     console.log(tmp);
});

 

위의 내용을 웹 브라우저에 띄우고, 크롬 개발자 도구에서 결과를 보면 아래와 같이 나타납니다.

 

[Console 결과창]
ARM-PC

 

id 가 product01 에 해당되는 내용인 ARM-PC 가 출력된 것을 확인할 수 있습니다.

 

$('[id=product01]').text(); 내용은 다음과 같이 변경할 수도 있습니다.

 

$('div[id=product01]').text();

 

<div> 엘리먼트 중 id 가 product01 인 것을 찾는 걸로 바꿀 수 있습니다. 앞에 div 라는 속성을 정해줘서 찾는 대상에 대해 조금 더 명확하게 나타낼 수 있습니다.

 

 

3. != 표현식

 

!= 은 같지 않다라는 뜻입니다.

product01 과 같지 않는 것을 출력해보도록 하겠습니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div[id!=product01]').text();
     console.log(tmp);
});

 

아래와 같이 나타납니다.

 

[Console 결과창]
S100-S5PV210G100-S5PV210C221-S5PV210

 

div 엘리먼트 중에서 product01을 제외한 나머지 값들이 연속으로 출력된 것을 확인할 수 있습니다.

 

 

4. ^= 표현식

 

^= 은 찾는 문자열로 시작하는 엘리먼트들을 선택하게 해줍니다.

위의 샘플에 보면 모든 엘리먼트의 id가 product## 으로 시작하고 있습니다.

^= 식에 product 로 시작되는 엘리먼트를 찾아보도록 하겠습니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div[id^=product]').text();
     console.log(tmp);
});

 

아래와 같이 나타납니다.

 

[Console 결과창]
ARM-PCS100-S5PV210G100-S5PV210C221-S5PV210

 

 

5. $= 표현식

 

$= 식은 ^= 과 반대로 찾는 문자열 이름으로 끝나는 엘리먼트를 찾아줍니다.

div 의 id 중에 01로 끝나는 문자열을 찾아보도록 하겠습니다.

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div[id$=01]').text();
     console.log(tmp);
});

 

아래와 같이 나타납니다.

 

[Console 결과창]
ARM-PC

 

 

^ㅇ^!!!

 

속성 셀렉터를 사용하면 다양한 조건으로 찾고 싶은 엘리먼트들을 찾을 수 있습니다.

다음 번엔 속성 셀렉터에 대해서 조금 더 알아보도록 하겠습니다.

 

 
이 게시물을...