목차
- :contains() 예제 - 지정 문자열 포함 p 요소 선택
- :contains() 정의
- :contains() 구문
- :contains() 예제 - 지정 문자열 포함 요소에 클래스 추가
:contains() 예제 - 지정 문자열 포함 p 요소 선택
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:contains(홈페이지)").css("background-color", "yellow");
});
</script>
<h1>홈짱닷컴 Homzzang.com</h1>
<p class="a">홈페이지 제작관리 강의</p>
<p>가</p>
<p>나</p>
<ul id="b">
<li>다</li>
<li>라</li>
<li>마</li>
</ul>
결과보기
:contains() 정의
지정 문자열 포함 요소 선택.
1.
- 문자열은 해당 요소에 직접 또는, 하위 요소에 포함된 경우 모두 해당.
- 주로 다른 선택자와 함께 사용해, 선택 범위를 제한할 때 사용.
- 문자열은 대소문자 구분하며, 한글이나 영문 모두 가능.
- CSS엔 없는 jQuery 고유 선택자임.
2. cf.
:has() 선택자 : 지정 요소 포함 요소 선택.
:contains() 구문
$(":contains(text)")
[매개변수]
text
필수. 포함 여부 체크할 문자열.
- 따옴표로 감싸지 않거나, 선택자 감싸는 따옴표와 다른 따옴표로 묶어야 함.
- 선택자 감싸는 따옴표와 동일 따옴표로 묶으려면 회피문자(\) 사용 필요. (예) \", '
:contains() 예제 - 지정 문자열 포함 요소에 클래스 추가
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
.highlight {
background:yellow;
}
</style>
<ul>
<li>홈짱닷컴 Homzzang.com</li>
<li>홈페이지 제작관리 강의</li>
<li>그누보드 서버관리 강의</li>
</ul>
<script>
$(document).ready(function() {
$("li:contains('홈짱')").addClass("highlight");
});
</script>
결과보기