[JQuery] 속성 셀렉터(2)

 

지난번에 JQuery 에서는 엘리먼트에 선언되어 있는 속성으로 해당 엘리먼트를 찾을 수 있게 해주는 기능에 대해서 알아보았습니다. 몇가지 남은 명령에 대해서 조금 더 알아보도록 하겠습니다.

 

 

1. 샘플 예제

 

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

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="product01" style="background-color:#3399FF;">ARM-PC</div>
    <div id="product02" class="sampleClass">S100-S5PV210</div>
    <div id="product03">G100-S5PV210</div>
    <div id="product04">C221-S5PV210</div>
</body>
</html>

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

 

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

 

 

2. *= 표현식

 

*= 찾으려는 문자열이 들어간 엘리먼트를 선택하는 것 입니다.
=가 의미가 비슷하지만, 포함되어 있는 속성값을 구분할 수 있는 방식입니다.

 

예제에 보면 div 안에 id가 product01 인 엘리먼트 안에 style 이라는 속성값이 들어가 있습니다.

이러한 속성값을 찾을 때, *= 이 사용됩니다.

<div id="product01" style="background-color:#3399FF;">ARM-PC</div>

 

$(function() {
     // 스크립트를 넣을 부분
     tmp = $('div[style*=background-color]').text();
     console.log(tmp);
});

 

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

 

[Console 결과창]
ARM-PC

 

 

3. ~= 표현식

 

~=은 속성값 안에 찾으려는 단어가 포함되어 있는 것을 선택해줍니다.

위의 style, class 와 같이 포함된 속성값을 찾을 때 사용됩니다.

 

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

 

아래와 같이 나타납니다.

 

[Console 결과창]
S100-S5PV210

 

 

4. |= 표현식

 

|= 은 찾는 문자열과 같은 문자열이거나 찾는 문자열로 시작하는 엘리먼트들을 선택해줍니다.

예를 들어 product를 찾는 다고 할 경우,

id가 똑같이 product 이거나 product-으로 시작하는 엘리먼트들을 찾아줍니다.

 

테스트를 위해 샘플 코드를 약간 변경하도록 하겠습니다.

product 다음에 -(하이픈)을 넣었습니다.

 

<body>
    <div id="product-01" style="background-color:#3399FF;">ARM-PC</div>
    <div id="product-02" class="sampleClass">S100-S5PV210</div>
    <div id="product-03">G100-S5PV210</div>
    <div id="product-04">C221-S5PV210</div>
</body>

 

 

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

 

아래와 같이 나타납니다.

product- 로 시작하는 모든 엘리멘트의 값을 출력하였습니다.

 

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

 

 

^ㅇ^!!!

 

속성 셀렉터를 알아두면 분류 및 엘리먼트를 찾을 때 유용하게 사용할 수 있을거 같습니다. ^^

 

 
이 게시물을...