[Traversing] JQ - has() 메서드 - 내부에 하나 이상의 요소가 있는 모든 요소 반환 (= has메서드 = 해즈 메서드)

1. has() 예제 - 내부에 <span> 있는 모든 <p> 요소 반환
2. has() 정의
3. has() 구문
4. has() 예제 - 여러 요소 중 하나라도 포함하는지 체크
5. has() 예제 - 내부에 <span> 있는 모든 <p>, <h3>, <div> 반환
6. 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>

 

결과보기