반응형
유용하게 사용할 수 있는 특정 단어로 시작하거나 끝나거나 포함하는 셀렉터 사용법이다.
$("태그[속성 부호 '특정 문자']")
$("div[id!='test']") div 에 id가 test가 아닌 태그들 선택
$("div[id^='test']") div 에 id가 test로 시작하는 태그들 선택
$("div[id$='test']") div 에 id가 test로 끝나는 태그들 선택
$("div[id*='test']") div 에 id가 test가 포함된 태그들 선택
$( "li[id^='start-'][id$='-end']" ) and 개념
$( "li[id^='start-'],li[id$='-end']" ) or 개념
- 소스코드
/TEST/html/selector.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selector</title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="../js/selector.js"></script>
<p id="test_1">1. id test_1</p>
<p id="test_2">2. id test_2</p>
<p id="test_3">3. id test_3</p>
<p id="test_4">4. id test_4</p>
<p id="test_5">5. id test_5</p>
<p id="abcde">6. id abcde</p>
<p id="">7. id 없음</p>
<hr>
<div id="result">
</div>
</body>
</html>
/TEST/js/selector.js
$(document).ready(function(){
var resultHtml="총 p태그는 " + $("p").length + "개 있습니다.<br>";
//id가 'test_1' 인 p태그
if($("p[id='test_1']").length > 0){
resultHtml += "id가 test_1인 p태그가 "+ $("p[id='test_1']").length + "개 있습니다.<br>";
}
//id가 'test_1'이 아닌 p태그
if($("p[id!='test_1']").length > 0){
resultHtml += "id가 test_1이 아닌 p태그가 " + $("p[id!='test_1']").length + "개 있습니다.<br>";
}
//id가 'test'로 시작하는 p태그
if($("p[id^='test']").length > 0){
resultHtml += "id가 test_1이 아닌 p태그가 " + $("p[id^='test']").length + "개 있습니다.<br>";
}
//id가 'cde'로 끝나는 p태그
if($("p[id$='cde']").length > 0){
resultHtml += "id가 cde로 끝나는 p태그가 " + $("p[id$='cde']").length + "개 있습니다.<br>";
}
//id에 'test'가 포함되는 p태그
if($("p[id*='test']").length > 0){
resultHtml += "id가 test가 포함되는 p태그가 " + $("p[id*='test']").length + "개 있습니다.<br>";
}
$("#result").html(resultHtml);
});
- 결과
반응형