Liooos-출발은 작은 한걸음부터

[jQuery] 속성 지시자(Attribute Selector) 본문

Development/jQuery

[jQuery] 속성 지시자(Attribute Selector)

Cozy.Han 2019. 5. 26. 23:33

대표 이미지

안녕하세요.

빅한입니다.

 

이번에는 제이쿼리(jQuery)의 속성 지시자(Attribute Selector)의 예제를 해볼 차례입니다.

이전에는 JSFiddle로 실행을 했지만 이번에는 html을 실제로 만들어서 진행하도록 하겠습니다.

 

그전에 jQuery 라이브러리가 필요한데요.

다운로드 및 적용 방법은 이곳을 통하여 확인해 주세요.

 

그럼 jQuery 라이브러리를 다운받았다는 가정하에 진행하도록 하겠습니다.

폴더 구조는 아래와 같습니다.

 

예제 폴더 구조

- folder : 폴더

   +- lib : 폴더

      +- jquery-3.4.1.min.js : 다운받았던 jquery 라이브러리

   +- selector : 폴더

      +- attribute_selector.html : 예제 HTML 파일

 

atribute_selector.html 파일 내용은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../lib/jquery-3.4.1.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <input name="apple" id="apple" value="apple"/><br>
                <input name="prefix-apple" value="prefix-apple"/><br>
                <input name="apple-suffix" value="apple-suffix"/><br>
                <input name="prefix-apple-suffix" value="prefix-apple-suffix"/><br>
                <input name="prefix apple" value="prefix apple"/><br>
                <input name="apple suffix" value="apple suffix"/><br>
                <input name="prefix apple suffix" value="prefix apple suffix"/><br>
                <input name="apple2" value="apple2"/><br>
                <input name="prefix-apple2" value="prefix-apple2"/><br>
                <input name="apple2-suffix" value="apple2-suffix"/><br>
                <input name="prefix-apple2-suffix" value="prefix-apple2-suffix"/><br>
                <input name="appl-suffix" value="appl-suffix"/><br>
            </td>
            <td>
                <button id="example1">1:[attribute|=value]</button><br>
                <button id="example2">2:[attribute*=value]</button><br>
                <button id="example3">3:[attribute~=value]</button><br>
                <button id="example4">4:[attribute$=value]</button><br>
                <button id="example5">5:[attribute=value]</button><br>
                <button id="example6">6:[attribute!=value]</button><br>
                <button id="example7">7:[attribute^=value]</button><br>
                <button id="example8">8:[attribute]</button><br>
                <button id="example9">9:[attribute=value][attribute*=value]</button><br>
            </td>
        </tr>
    </table>
<script>
$("#example1").click(function(e){
    $("*").css('background-color','white')
    $("[name|=apple]").css('background-color','skyblue')
})
$("#example2").click(function(e){
    $("*").css('background-color','white')
    $("[name*=apple]").css('background-color','skyblue')
})
$("#example3").click(function(e){
    $("*").css('background-color','white')
    $("[name~=apple]").css('background-color','skyblue')
})
$("#example4").click(function(e){
    $("*").css('background-color','white')
    $("[name$=apple]").css('background-color','skyblue')
})
$("#example5").click(function(e){
    $("*").css('background-color','white')
    $("[name=apple]").css('background-color','skyblue')
})
$("#example6").click(function(e){
    $("*").css('background-color','white')
    $("[name!=apple]").css('background-color','skyblue')
})
$("#example7").click(function(e){
    $("*").css('background-color','white')
    $("[name^=apple]").css('background-color','skyblue')
})
$("#example8").click(function(e){
    $("*").css('background-color','white')
    $("[name]").css('background-color','skyblue')
})
$("#example9").click(function(e){
    $("*").css('background-color','white')
    $("[id][name*=apple]").css('background-color','skyblue')
})
</script>
</body>
</html>

<table>의 첫번째 <td>안에는 표현하고자 하는 엘리먼트들을 나열해 놓았고

<table>의 두번째 <td>안에는 각 속성 선태자들의 차이를 보고자 각 선택자들의 표현방식의 차이를 보고자 <button>을 나열하였습니다.

마지막으로 <script>안에는 <table>의 두번째 <td>의 이벤트를 적용하는 내용을 넣었습니다.

이벤트의 내용은 모든 요소(element)들을 흰색으로 처리한 다음 선택자에 의하여 선택된 요소(element)들의 배경을 하늘색으로 변경하는 이벤트 입니다.

즉 각 버튼을 클릭할 경우 각 버튼에 표현한 선택자들에 의하여 선택된 요소에 대하여 배경이 하늘색으로 변경이 됩니다.

 

다음 예제를 attribute_selector.html 파일명으로 만들고 브라우저에 띄어보면 다음과 같은 화면이 출력 될 것입니다.

(파일명은 어떤것으로 해도 무관합니다.)

처음 로드 화면

이젠 각각의 버튼을 활용하여 다음과 같은 속성을 주었을 경우 어떤 결과가 나타나는지 확인해보도록 하겠습니다.

확인하기에 앞서서 script에서 확인할수 있듯이 버튼의 attribute는 name으로 단정지어서 하도록 하겠습니다.

(적용하실때에는 name뿐만 아니라 다른 속성도 가능하니 다른 방법으로 만들어서 테스트 해보셔도 좋습니다.)

 

 

먼저 1번 버튼을 클릭해 보겠습니다.

1번 버튼의 경우는 '[속성|=값]'의 표현을 가지고 있는데 

한마디로 표현하면 '-'구분값으로 가질 경우 처음 구분된 내용이 값과 동일 할 경우 해당 모든 요소(element)를 선택합니다.

스크립트에서는 '[name|=apple]'이라는 표현을 사용하였습니다.

1:[name=apple]

결과를 먼저 살펴보면 속성이 [name=apple], [name=apple-suffix]라는 두 요소(element)가 선택되어졌습니다.

위 설명대로 <input>의 name속성의 값을 '-'구분하여 제일 처음의 내용을 살펴보면 

[name=apple]의 경우 'apple'

[name=apple-suffix]의 경우 'apple', 'suffix'중 처음 단어 'apple'이고

jQuery 선택자의 값(value)가 apple이므로 선택되어진 것입니다.

예를 들어 [name=prefix-apple] 속성은 '-'구분 하였을 경우 내용이 'prefix','apple'이 되어 값과 동일한 'apple'이 있지만 첫번째 내용인 'prefix'와 jQuery선택자의 값 'apple'은 맞지 않기 때문에 선택되지 않은 것입니다.

 

다음 2번 버튼을 클릭해 보겠습니다.

2번의 버튼의 경우에는 '[속성*=값]'의 표현을 가지고 있습니다.

해당 표현을 설명하자면 '요소의 속성의 값'중에서 '선택자의 속성의 값'이 순서에 무관하게 포함이 모든 요소(element)를 선택하라는 뜻 입니다.

스크립트에서는 '[name*=apple]' 표현을 사용하였습니다.

2:[name*=apple]

결과를 보면 마지막 요소를 제외한 모든 요소(element)들이 선택되어진 것을 확인할수 있습니다.

그 이유는 마지막 요소를 제외한 모든 input의 name 속성의 값에는 선택자의 값 'apple'이 포함되어있기 때문입니다.

 

다음 3번 버튼을 클릭해 보겠습니다.

3번의 버튼의 경우에는 '[속성~=값]'의 표현을 사용하였습니다.

해당 표현은 '요소의 속성의 값'중에서 공백을 구분점을 사용하여 구분되어진 값들중에 '선택자의 속성의 값'이 일치하는 모든 요소(element)를 선택하라는 뜻입니다.

예를 들면 요소의 속성이 '[name~=prefix apple]'이고 jQuery 선택자가 '[name~=apple]'일 경우 요소의 속성을 공백을 기준으로 구분하면 'prefix', 'apple'이라는 값을 가지고 되고 여기서 선택자의 값이 'apple'이 존재하므로 해당 요소는 선택되어져야 합니다.

3:[name~=apple]

결과를 보면 확인 하실수 있듯이 선택되어진 요소의 속성을 공백을 구분해보았을 경우 'apple'이라는 내용을 확인 할수 있고 그 외 나머지 요소(element)들은 'apple2', 'appl'등 유사하긴 하나 같지 않으므로 제외가 되어있는 것을 확인 할수 있습니다.

 

4번재 버튼을 클릭한 결과 입니다.

4:[name=$=apple]

4번째 버튼의 표현은 '[속성$=값]'입니다.

이 표현식은 요소의 속성이 가지고있는 값의 제일 끝 부분이 표현하는 값과 동일할 경우 선택되는 것입니다.

결과에 선택된 요소(하늘색 배경을 가진 요소)의 제일 끝 부분을 살펴보면 표현식의 속성값과 동일한 것을 확인할수 있습니다.

 

apple

prefix-apple

prefix apple

 

물론 나머지 요소의 name 속성값의 제일 끝부분을 확인하더라도 'apple'과 동일한 내용이 없는 것을 확인할수 있습니다.

 

5번째 버튼의 표현식인 [속성=값]은 정확하게 요소의 속성값과 선택자의 속성값이 동일할 경우 선택되어집니다.

제일 무난하게 많이쓰는 속성 성택자입니다.

5:[name=apple]

 

결과를 보면 jQuery 선택자의 값과 요소들의 속성값이 완전히 동일한 값일 경우 선택되어진 것을 확인 할수 있습니다.

 

6번째 표현식은 '[속성!=값]'입니다.

이 표현식은 선택자의 속성값 동일한 요소의 속성값을 가지는 요소를 제외한 모든 요소(element)를 선택합니다.

다르게 표현하면 선택자의 속성값과 요소의 속성값이 동일하지 않는 모든 요소를 선택합니다.

6:[name!=apple]

결과를 보면 선택자의 속성이 name이고 값이 'apple' 요소는 첫번째 input요소의 name속성이 'apple' 제외하고 모든 요소가 선택되어진 것을 볼수 있다. 심지어 버튼과 body까지도 선택이 되어진다.

쉽게 설명하면 5번째 표현식 [속성=값]의 정반대의 개념이라 볼수 있다.

 

7번째 표현식은 [속성^=값]으로

요소의 속성값에서 제일 앞부분이 선택자의 속성값과 동일한 모든 요소를 선택하는 것을 의미합니다.

7:[name^=apple]

결과에서 볼수 있든이 그 어떤 속성값이든 제일 앞에 선택자의 속성값인 'apple'이 포함된 모든 요소들이 선택되어진 것을 볼수 있습니다.

 

8번째 표현식은 '[속성]'으로

속성값과 상관없이 해당 속성만 존재하는 모든 요소를 선택합니다.

8:[name]

결과에서 볼수 있든이 모든 input태그에 name속성이 있으므로 선택되어 졌지만 button태그에는 name속성이 없으므로 선택되지 않은 것을 볼수 있습니다.

 

9번째 표현식은 '[속성=값][속성=값]'으로 지금까지 했던 표현식을 한번이상 사용가능하다는 것을 말합니다.

이는 '[속성][속성=값]', '[속성^=값][속성=값]' 등 표현은 다양하며 2개이상도 사용가능합니다. 단 이들의 조건이 교집합으로서 성립되는 모든 요소들을 선택합니다.

9:[id][name*=apple]

결과에서는 보시는 바와 같이 첫번째 요소만 선택되어졌습니다.

이는 두가지 조건이 모두 성립된 모든 요소들을 선택합니다.

 

조건1 : 'id'라는 속성이 존재하며 값은 어떤값이 있어도 없는 모든 요소

조건2 : 'name'이라는 속성이 있고 그 값들 중 'apple'이 포함된 모든 요소

 

이 두가지 조건이 성립되는 요소는 첫번째 요소인 (조건1) id속성이 있고, (조건2) name 속성중 값이 apple이 포함이 되므로 성립이 된다.

나머지 요소들은 조건2는 성립이 되지만 조건1은 성립되지 않아 선택되지 않을 것을 확인 할수 있다.

 

 

여기까지 속성 선택자에 대한 설명이였습니다.

혹시 속성 선택자에 한에서 궁금하신 내용이 있으시다면 아래 댓글에 남겨주세요.

 

감사합니다.

 

그외 선택자(Selector)에 관심있으신 분들은 여기서 확인하시면 될듯합니다.

 

저작자표시

'Development > jQuery' 카테고리의 다른 글

[jQuery] 자식 필터 선택자(Child Filter)  (0) 2019.09.01
[jQuery] 기본 필터 선택자(Basic Filter)  (0) 2019.06.30
[jQuery] 다운로드 및 적용 방법  (4) 2019.05.23
[jQuery] 선택자 - 기본 선택자 예제  (0) 2019.05.23
[jQuery] 선택자(Selector)  (2) 2019.05.20
'Development/jQuery' Related Articles more
Comments