티스토리 뷰

반응형

요약

[name] 
해당하는 속성을 가지고있는 노드

[name=value] 
주어진 문자열과 속성이 동일한 노드

[name~=value]
공백으로 구분된 단어와 속성이 일치하는 노드

[name*=value] 
주어진 문자열을 포함하고있는 노드

[name$=value] 
주어진 문자열로 끝나는 노드

[name!=value] 
주어진 문자열이 속성과 다른 노드

[name^=value] 
주어진 문자열로 시작하는 노드

[name=value][name2=value2] 
다중속성선택자

해당하는 속성을 가지고있는 노드 (" [name] ")


해당하는 attribute을  있는 노드를 가져옵니다.


html
1
2
3
4
5
6
7
<div>
    <ul>
        <li>1.<a href="example.html">링크</a>로연결</li>
        <li>2.<a href="example.html">링크</a>로연결</li>
    </ul>
</div>

js
1
$("[href]").css( "border", "3px solid purple" );


결과




주어진 문자열과 속성이 동일한 노드 (" [name=value] ")


주어진 문자열과 속성이 동일한 노드를 찾습니다.


html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
    <label>
        <input type="radio" name="married" value="Y">
        <span>Y</span>
    </label>
</div>
<div>
    <label>
        <input type="radio" name="married" value="N">
        <span>N</span>
    </label>
</div>
<div>
    <input type="text" name="name">
</div>

js
1
$("input[type=text]").css("border","1px solid #26FF5C");


결과





공백으로 구분된 단어와 속성이 일치하는노드(" [name~=value] ")


공백으로 구분되어진 단어가 포함되어있는 노드를 찾습니다.
아래와 같이 typeA 를 찾고자할때 "typeA" 양 옆으로 다른문자가 있어서는 안됩니다. 


html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div title="typeA">
    <ul>욕실
        <li>2인용</li>
        <li>4인용</li>
    </ul>
</div>
<div title="typeB">
    <ul>침대
        <li>2인용</li>
        <li>4인용</li>
    </ul>
</div>
<div title="typeA typeB">
    <ul>욕실+침대
        <li>2인용</li>
        <li>4인용</li>
    </ul>
</div>

js
1
$("div[title~=typeA]").css("color","red");


결과





주어진 문자열을 포함하고있는 노드(" [name*=value] ")


위의 (~=) 선택자는 공백으로 구분되어진 단어를 찾았다면 
해당 선택자는 어떤식으로든 단어가 포함되어있는 노드를 가져옵니다. 
간단하게 사용할수있지만 그만큼 원하지 않는 속성도 함께 가져올 위험이 커지니 유의해서 사용해야합니다.

html
1
2
3
4
5
<input type="text" name="a-example">
<input type="text" name="exampleSample">
<input type="text" name="example">
<input type="text" name="nameExample">

js
1
$("input[name*=example]").val("example");


결과



주어진 문자열로 끝나는 노드(" [name$=value] ")


주어진 문자열이 마지막에 위치하여야 하며 대소문자를 구분합니다.

html
1
2
3
4
5
<input type="text" name="a-example">
<input type="text" name="exampleSample">
<input type="text" name="example">
<input type="text" name="nameExample">

js
1
$("input[name$=example]").val("example");


결과



주어진 문자열이 속성과 다른 노드(" [name!=value] ")


주어진 문자열과 속성을 비교하여 동일하지않는 노드를 가져옵니다.
wc3 에 따르면 (!=) 선택자는 css 선택자를 사용한 querySelectorAll() 함수를 사용하지않는
jquery extension 이기 때문에 브라우저의 성능을 위해서는 $("css selector").not("name=value") 를 사용하도록 권고하고있습니다.


html
1
2
3
4
5
<input type="text" name="a-example">
<input type="text" name="exampleSample">
<input type="text" name="example">
<input type="text" name="nameExample">

js
1
$("input[name$=example]").val("example");


결과




주어진 문자열로 시작하는 노드 (" [name^=value] ")


주어진문자열로 시작하는 노드를 가져옵니다.


html
1
2
3
4
5
<input type="text" class="agroup-1">
<input type="text" class="agroup-2">
<input type="text" class="bgroup-1">
<input type="text" class="bgroup-2">

js
1
2
$("input[class^=agroup]").val("agroup");
$("input[class^=bgroup]").val("bgroup");


결과



다중속성선택자 Multi Attribute Selector (" [name=value] [name2=value2]")



위에서 사용했던 attibute selector 를 여러개 사용하여 좀더 세밀한 작업을 할수있습니다.
아래 예제에서는 아이디가 example1 이면서 name이 address 인 노드를 가져옵니다.

html
1
2
3
4
5
<input type="text" id="example1" name="id">
<input type="password" id="example2" name="password">
<input type="text" id="example1" name="address">
<input type="text" id="example2" name="etc">

js
1
$("input[id=example1][name=address]").val("edit address");


결과



출처: https://javacpro.tistory.com/38 [버물리의 IT공부]

반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함