요약
[name]
해당하는 속성을 가지고있는 노드
[name=value]
주어진 문자열과 속성이 동일한 노드
[name~=value]
공백으로 구분된 단어와 속성이 일치하는 노드
[name*=value]
주어진 문자열을 포함하고있는 노드
[name$=value]
주어진 문자열로 끝나는 노드
[name!=value]
주어진 문자열이 속성과 다른 노드
[name^=value]
주어진 문자열로 시작하는 노드
[name=value][name2=value2]
다중속성선택자
해당하는 속성을 가지고있는 노드 (" [name] ")
해당하는 attribute을 있는 노드를 가져옵니다.
html
js
$("[href]").css( "border", "3px solid purple" );
결과
주어진 문자열과 속성이 동일한 노드 (" [name=value] ")
주어진 문자열과 속성이 동일한 노드를 찾습니다.
html
js
$("input[type=text]").css("border","1px solid #26FF5C");
결과
공백으로 구분된 단어와 속성이 일치하는노드(" [name~=value] ")
공백으로 구분되어진 단어가 포함되어있는 노드를 찾습니다.
아래와 같이 typeA 를 찾고자할때 "typeA" 양 옆으로 다른문자가 있어서는 안됩니다.
html
욕실
- 2인용
- 4인용
침대
- 2인용
- 4인용
욕실+침대
- 2인용
- 4인용
js
$("div[title~=typeA]").css("color","red");
결과
주어진 문자열을 포함하고있는 노드(" [name*=value] ")
위의 (~=) 선택자는 공백으로 구분되어진 단어를 찾았다면
해당 선택자는 어떤식으로든 단어가 포함되어있는 노드를 가져옵니다.
간단하게 사용할수있지만 그만큼 원하지 않는 속성도 함께 가져올 위험이 커지니 유의해서 사용해야합니다.
html
js
$("input[name*=example]").val("example");
결과
주어진 문자열로 끝나는 노드(" [name$=value] ")
주어진 문자열이 마지막에 위치하여야 하며 대소문자를 구분합니다.
html
js
$("input[name$=example]").val("example");
결과
주어진 문자열이 속성과 다른 노드(" [name!=value] ")
주어진 문자열과 속성을 비교하여 동일하지않는 노드를 가져옵니다.
wc3 에 따르면 (!=) 선택자는 css 선택자를 사용한 querySelectorAll() 함수를 사용하지않는
jquery extension 이기 때문에 브라우저의 성능을 위해서는 $("css selector").not("name=value") 를 사용하도록 권고하고있습니다.
html
js
$("input[name$=example]").val("example");
결과
주어진 문자열로 시작하는 노드 (" [name^=value] ")
주어진문자열로 시작하는 노드를 가져옵니다.
html
js
$("input[class^=agroup]").val("agroup"); $("input[class^=bgroup]").val("bgroup");
결과
다중속성선택자 Multi Attribute Selector (" [name=value] [name2=value2]")
위에서 사용했던 attibute selector 를 여러개 사용하여 좀더 세밀한 작업을 할수있습니다.
아래 예제에서는 아이디가 example1 이면서 name이 address 인 노드를 가져옵니다.
html
js
$("input[id=example1][name=address]").val("edit address");
결과
'개발 > Jquery' 카테고리의 다른 글
[제이쿼리/jQuery] append() , appendTo() 새로운 요소 삽입 (0) | 2017.11.28 |
---|---|
[제이쿼리/jQuery] 요소 갯수 구하기 .length (2) | 2017.06.15 |
[제이쿼리/jQuery] 필터셀렉터(:) . :first :last :even :odd :eq :gt :lt :has :not (3) | 2017.06.14 |
[제이쿼리/jQuery] 자식노드, 다음 인접노드, 다음 형제노드 찾기( Child selector, Next Adjacent Selector, Next Siblings Selector ) (0) | 2017.06.14 |
[ jQuery ] 셀렉터 기본 (0) | 2016.07.17 |