티스토리 뷰

jQuery

[jQuery] 속성 선택자

속성 선택자

태그의 속성을 사용하여 선택하는 방법입니다.


속성 선택자(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> 
댓글
댓글쓰기 폼