티스토리 뷰
속성 선택자
태그의 속성을 사용하여 선택하는 방법입니다.
속성 선택자(Hierarchy)
속성 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| [name="value"] | $("li a[href='#page']") | 속성 중에 '#page'와 일치하는 태그를 선택합니다. |
| [name^="value"] | $("li a[href^='http']") | 속성 중에 'http'로 시작하는 태그를 선택합니다. |
| [name$="value"] | $("li a[href$='.com']") | 속성 중에 '.com'로 끝나는 태그를 선택합니다. |
| [name~="value"] | $("li a[href~='.com']") | 속성 중에 '.com'이 포함되는 바로 옆 형제 태그를 선택합니다. |
| [name*="value"] | $("li a[href*='web']") | 속성 중에 'web'가 포함되어 있는 태그를 선택합니다. |
| [name|="value"] | $("li a[href|='web']") | 속성 중에 'web'으로 시작하는 속성의 태그를 선택합니다. |
| [name!="value"] | $("li a[href!='naver.com']") | 속성 중에 'naver.com'와 일치하지 않는 태그를 선택합니다. |
| [name="value"][name="value"] | $("li a[href][class]") | 속성 중에 'href' 속성과 'class' 속성이 모두 있는 태그를 선택합니다. |
Sample : 속성 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li a[href='#page']").css({ backgroundColor:"#90caf9", border:"1px dashed #01584d" });
$("li a[href^='http']").css({ backgroundColor:"#9fa8da", border:"1px dashed #01584d" });
$("li a[href$='.com']").css({ backgroundColor:"#26a69a", border:"1px dashed #01584d" });
$("li a[href*='w']").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
$("img[src !='../css3.png']").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d"});
$("[src][alt]").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d"});
});
</script>
</head>
<body>
<h3>기본 태그를 선택하는 방법</h3>
<div class="list">
<ul class="list2">
<li class="one1"><a href="#page">one1</a></li>
<li class="one2"><a href="http://daum.net">one2</a></li>
<li class="one3"><a href="//naver.com">one3</li>
<li class="one4"><a href="//webstoryboy.com">one4</li>
<li class="one5">one5</li>
<li class="one6">one6</li>
<li class="one7">one7</li>
<li class="one8">one8</li>
<li id="one10">one9
<ul>
<li><img src="../css3.png" alt="이미지" /></li>
<li><img src="../html5.png"></li>
<li>one9-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
댓글