목차
- has() 예제 - 내부에 <span> 있는 모든 <p> 요소 반환
- has() 정의
- has() 구문
- has() 예제 - 여러 요소 중 하나라도 포함하는지 체크
- has() 예제 - 내부에 <span> 있는 모든 <p>, <h3>, <div> 반환
- has() 예제 - 내부에 링크 있는 <span> 요소 반환
has() 예제 - 내부에 <span> 있는 모든 <p> 요소 반환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").has("span").css("background-color", "yellow");
});
</script>
<p>ko - <span>홈짱닷컴</span></p>
<p>en - <span>Homzzang.com</span></p>
<p>No.1 코딩 강의 사이트</p>
결과보기
has() 정의
내부에 지정 선택자 1개 이상 갖는 모든 요소 반환.
1.
여러 선택자 중 1개라도 갖는지 체크하려면, 쉼표(,)로 나열.
2. 예제 더 보기
https://api.jquery.com/has/
has() 구문
$(selector).has(contained)
[매개변수]
contained
필수. 내부에 포함되는지 체크할 대상. (가능값 종류)
- selector : 선택자 표현식
- Element : DOM 요소명
has() 예제 - 여러 요소 중 하나라도 포함하는지 체크
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").has("span,b").css("background-color", "yellow");
});
</script>
<p>ko - <b>홈짱닷컴</b></p>
<p>en - <span>Homzzang.com</span></p>
<p>코딩 배우기</p>
결과보기
has() 예제 - 내부에 <span> 있는 모든 <p>, <h3>, <div> 반환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p, h3, div").has("span").css("background-color", "yellow");
});
</script>
<h1>h1</h1>
<p><span>span</span> 갖는 p</p>
<p><span>span</span> 갖는 p</p>
<p>p</p>
<h3><span>span</span> 갖는 p</h3>
<div><span>span</span> 갖는 div</div>
결과보기
has() 예제 - 내부에 링크 있는 <span> 요소 반환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p span").has("a[href]").css("background-color", "yellow");
});
</script>
<h1>h1</h1>
<p><span>span</span> 갖는 p</p>
<p><span><a href="#">링크</a></span> 갖는 p</p>
<p><span>span</span> 갖는 p</p>
결과보기
