개발노트 :: 제이쿼리(Jquery) 속성 선택자#2

개발노트 :: 제이쿼리(Jquery) 속성 선택자#2

제이쿼리를 이용해 특정 요소를 선택하는 방법에 대해 알아보겠습니다.

이번에는 요소에 해당하는 속성값을 이용해 선택을 해보겠습니다.

 

1. 속성 선택자 표

선택자	예시	설명
element[attribute]	$("element[title]")	title 속성을 가진 요소
element[attribute=text]	$("element[title = 'text']")	title 속성 값이 'text'로 된 요소
element[attribute!=text]	$("element[title != 'text']")	title 속성 값이 'text'가 아닌 요소
element[attribute$=text]	$("element[title $= 'text']")	title 속성 값이 'text'로 끝나는 요소
element[attribute|=text]	$("element[title |= 'text']")	title 속성 값이 'text' 일치 또는 'text-'시작하는 요소
element[attribute^=text]	$("element[title ^= 'text']")	title 속성 값이 'text'로 시작하는 요소
element[attribute~=text]	$("element[title ~= 'text']")	title 속성 값이 'text'단어가 포함된 요소
element[attribute*=text]	$("element[title *= 'text']")	title 속성 값이 'text'이 포함된 요소

 

2. 속성 선택자 사용

2-1 element[attribute] attribute속성을 가진 요소 선택

<span id="text1" title="text1" >Header1</span>
<script type="text/javascript">
   $("span[id]").css("color",'red');
</script>

결과값

Header1

 

 

2-2 element[attribute=value] attribute속성이 value값인 된 요소 선택

<span title="text2">Header2</span>
<script type="text/javascript">
   $("span[title = 'text2']").css("color",'red');
</script>

결과값

Header2

 

 

2-3 element[attribute!=value] attribute속성이 value값이 아닌 요소 선택

<span title="text1">Header2</span>
<script type="text/javascript">
  $("span[title != 'text2']").css("color",'red');
</script>

결과값 

Header2

 

 

2-4 element[attribute$=value]  attribute속성이 value값으로 끝나는 요소 선택

<span title="valueText1">Header2</span>
<script type="text/javascript">
 $("span[title $= 'Text1']").css("color",'red');
</script>

결과값

Header2

 

 

2-5 element[attribute|=value] attribute속성이 'value'일치 또는 'value-'으로 시작하는 요소

<span title="text1">Header2</span><br/>
<span title="text1-text2">Header2</span> 
<script type="text/javascript">
 $("span[title |= 'text1']").css("color",'red');
</script>

결과값

Header2 Header2

 

 

 

2-6 element[attribute^=value] attribute속성이 value값으로 시작하는 요소 선택

<span title="text1text2">Header2</span> 
<script type="text/javascript">
 $("span[title ^= 'text1']").css("color",'red');
</script>

 

결과값

Header2

 

 

2-7 element[attribute~=value] attribute 속성이 value 단어를 포함되어 있는 요소 선택

<span title="text1 text2">Header2</span> 
<script type="text/javascript">
 $("span[title ~= 'text1']").css("color",'red');
</script>

결과값

Header2

 

 

2-8 element[attribute*=value] attribute속성이 value 값을 포함되어 있는 요소 선택

<span title="text1text2">Header2</span>  
<script type="text/javascript">
 $("span[title *= 'text1']").css("color",'red');
</script>

결과값

Header2