[Selector] JQ - :has() 선택자 - 지정 요소 포함 요소 선택. (= has선택자 = 해즈 선택자)

목차

1. :has() 예제 - 내부에 지정 요소 갖는 요소 선택.
2. :has() 정의
3. :has() 구문
4. :has() 예제 - 내부에 여러 요소 갖는 요소 선택.
5. :has() 예제 - 내부에 지정 요소 없는 요소 선택.

:has() 예제 - 내부에 지정 요소 갖는 요소 선택.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p:has(span)").css("border", "solid red");

});

</script>

<p><span>홈짱닷컴</span></p>

<p>Homzzang.com</p>

 

결과보기

:has() 정의

 

내부에 지정 요소 갖는 모든 요소 선택.

 

---

 

※ 내부의 여러 요소 선택하려면 쉼표로 나열.

※ 내부 요소는 자식이든 자손이든 상관 없음.

 

:has() 구문

 

$(":has(selector)")

 

---

[매개변수]

 

selector

필수. 내부 요소 지정.

※ 어떤 종류든 가능.

 

:has() 예제 - 내부에 여러 요소 갖는 요소 선택.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div:has(p, span)").css("border", "solid red");

});

</script>

<div>

  <p>홈짱닷컴

    <span>Homzzang.com</span>

  </p>

</div>

<div>홈페이지 제작관리 강의</div>

 

결과보기

:has() 예제 - 내부에 지정 요소 없는 요소 선택.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div:not(:has(h1))").css("background-color", "yellow");

});

</script>

<div>

  <h1>홈짱닷컴 (h1)</h1>

  <p>Homzzang.com</p>

</div>

<div>

  <h2>HTML (h2)</h2>

  <p>구조</p>

</div>

<div>

  <h3>CSS (h3)</h3>

  <p>디자인</p>

</div>

 

결과보기