jquery

jQuery - 속성 셀렉터

4월 28, 2019
속성 선택자로 사용할 수 있는 표현은 다음 표를 참고합니다.

선택자 설 명
[속성] 속성과 일치하는 요소.
[속성="값"] 속성과 값이 일치하는 요소.
[속성 ~="값"] 속성의 값을 포함하는 요소.
단어 기준으로 판단.
속성 값이 n 개라도 특정 단어와 일치하면 적용.
[속성 |= "a"] "a"와 일치하거나 "a-"로 시작되는 요소.
[속성 != "a"] “a”의 값이 아닌 모든 요소
[속성 ^= "a"] a로 시작하는 문자.
[속성 $= "a"] a로 끝나는 문자.
[속성 *= "a"] a가 어느 위치에 있든 포함하고 있으면 적용.
[속성1=”값”][속성2=”값”] 지정된 모든 속성과 값이 일치하는 모든 요소


[속성] 선택자

a 태그 안에 href 속성이 있는 태그를 찾습니다.

<script>
/* a 태그에 href 속성이 있는 요소 */
$(function(){
  $("a[href]").css("background", "yellow");
});
</script>

<!-- 일치 -->
<a href="">a 내용</a>

<!-- 불일치 -->
<div href="">b 내용</div>

<!-- 불일치 -->
<a name="하보니">c 내용</a>

name 속성을 가진 태그를 찾아 스타일을 적용합니다.

<script>
/* name 속성을 가진 요소 */
$(function(){
  $("[name]").css("background", "yellow");
});
</script>

<!-- 불일치 -->
<p title="">a 내용</p>

<!-- 일치 -->
<div name="">b 내용</div>

<!-- 일치 -->
<h4 href="" name="하보니">c 내용</h4>


[속성 = "값"] 선택자

이 선택자는 속성과 값이 정확히 일치하는 요소가 대상입니다.

<script>
$(function(){
  /* type 속성이 button 인 input 요소 */
  $("input[type='button']").css("background", "red");

  /* target 속성의 값이 _blank 인 요소 */
  $("[target='_blank']").css("background", "blue");

  /* div 태그에 title 속성의 값이 a 인 요소 */
  $("div[title='a']").css("background", "yellow");
});
</script>

<!-- 일치 -->
<input type="button" value="하보니">

<!-- 일치 -->
<a target="_blank">a 내용</a>

<!-- a 값만 갖고 있지 않아서 불일치 -->
<div title="a b">b 내용</div>


[속성 ~=“값”] 선택자

속성의 값을 포함하는 요소를 찾습니다. 여러 값 중에서 해당 값이 포함된 요소에 적용합니다. 단어 기준입니다.

<script>
$(function(){
  /* class 속성에 user 값을 포함하는 요소 */
  $("[class ~= 'user']").css("background", "yellow");
});
</script>

<!-- 일치 -->
<div class="container user">a 내용</div>

<!-- 단어 기준 user 가 아니므로 불일치 -->
<div class="user-fiter nav fot">b 내용</div>

<!-- 일치 -->
<a href="#" class="seleter user name">c 내용</a>


[속성 |= “a”] 선택자

a 값과 일치하거나 a 다음에 하이픈(-)으로 시작하는 요소, "a-" 를 대상으로 합니다.

<script>
$(function(){
  /* title 속성의 값이 a 인 요소 */
  $("[title |= 'a']").css("background", "red");
});
</script>


<!-- abc는 단어가 아니어서 불일치 -->
<h4 title="abc">a 내용</h4>

<!-- 하이픈(-)를 포함하는 단어이므로 일치 -->
<h4 title="a-name">b 내용</h4>

<!-- a 값만 갖고 있지 않아서 불일치 -->
<h4 title="a name">c 내용</h4>


[속성 != “a”] 선택자

a 값과 일치하지 않는 모든 요소를 선택합니다.

<script>
$(function(){
  /* href 속성의 값이 샵(#)이 아닌 값을 찾음 */
  $("a[href != '#']").css("background", "red");
});
</script>

<!-- 일치 -->
<a href="http://">a 내용</a>

<!-- 불일치 -->
<a href="#">b 내용</a>


[속성 ^= “a”] 선택자

a 로 시작하는 문자를 찾습니다.

<script>
$(function(){
  /* a 로 시작하는 문자를 찾음 */
  $("a[name ^= 'a']").css("background", "red");
});
</script>

<!-- a 로 시작하는 값이므로 일치 -->
<a name="abc">a 내용</a>

<!-- b 로 시작하는 값이므로 불일치 -->
<a name="bac">b 내용</a>


<script>
$(function(){
  $("[name ^= 'eng']").css("background", "yellow");
});
</script>

<!-- eng로 시작하므로 일치 -->
<h4 name="english">a 내용</h4>

<!-- 일치 -->
<h4 name="eng-hood">b 내용</h4>

<!-- eng로 시작하는 문자가 아니므로 불일치 -->
<h4 name="useeng">c 내용</h4>


[속성 $= “a”] 선택자

a 로 끝나는 문자를 찾습니다.

<script>
$(function(){
  /* a 로 시작하는 문자를 찾음 */
  $("h4[title $= 'abc']").css("background", "red");
});
</script>

<!-- abc로 끝나는 문자이므로 일치 -->
<h4 title="xyz-abc">a 내용</h4>


<script>
$(function(){
  $("[title $= '.xml']").css("background", "red");
});
</script>

<!-- .xml로 끝나는 문자이므로 일치 -->
<h4 title="abdcefg.xml">XML 내용</h4>


[속성 *= “a”] 선택자

어느 위치에 있든 그 값을 포함하면 선택합니다.

<script>
$(function(){
  /* abc 를 포함하는 문자를 찾음 */
  $("[name *= 'abc']").css("background", "red");
});
</script>

<!-- 일치 -->
<h4 name="abcdefg">a 내용</h4>

<!-- 일치 -->
<h4 name="http://habonyphp.com/abc.php">b 내용</h4>


[속성1 = “a”][속성2 = "b"] 선택자

다중 속성 선택자는 지정된 모든 속성과 일치하는 요소를 찾습니다. 다중 선택자는 원하는 n 개수 만큼 속성을 지정할 수 있습니다.

<script>
$(function(){
  // id 속성이 있고, 
  // name 속성의 값이 man 으로 끝나는 요소
  $("[id][name $= 'man']").css("background", "red");
});
</script>

<!-- 불일치 -->
<a id="man-news" name="man-news">하보니 1</a>
<!-- 불일치 -->
<a name="milkman">하보니 2</a>
<!-- 일치 -->
<a id="letterman" name="new-letterman">하보니 3</a>
<!-- 불일치 -->
<a name="newmilk">하보니 4</a>

Tag:

0 Comments

0 댓글