jquery 컨텐츠 탐색 선택자

📖 컨텐츠 탐색 선택자

컨텐츠 탐색 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자이다.

contains()/ contents() /has()/ not()/end()선택자

ontains()선택자는 선택한 요소 중 지정한 텍스트를 포함하는 요소만 선택하고,
contents()선택자는 선택한 요소의 하위 요소 중 자손의 텍스트와 태그 노드를 선택한다.
has()선택자는 선택한 요소 중 지정한 태그를 포함하는 요소만 선택하고
not()선택자는 선택한 요소 중 지정한 태그만 제외하고 선택한다.
end()선택자는 필터링 되기 이전 선택자를 다시 선택한다.

    [기본형]
    1. $('요소선택:contains(텍스트)')
    2. $('요소선택').contents()
    3. $('요소선택:has(요소명)') 또는 $("요소선택").has()
    4. $('요소선택:has(요소명)') 또는 $("요소선택").not()
   ★기능사문제 5. $("요소선택").탐색선택자().end()

<div id="outer">
     <h1>컨텐츠 탐색 선택자</h1>
     <section id="inner_1">
       <h2>contains(),contents(),has()</h2>
       <p>
         <span>내용1</span>
       </p>
       <p>
         <strong>내용2</strong>
       </p>
       <p>
         <span>내용3</span>
       </p>
     </section>
     <section id="inner_2">
       <h2>not(),end()</h2>
       <p>내용4</p>
       <p>내용5</p>
       <p>내용6</p>
     </section>
     <section id="inner_3">
       <h2>find(),filter()</h2>
       <p class="txt1">내용7</p>
       <p class="txt2">내용8</p>
     </section>      

    <section id="inner_4">
    <h2>filter(function)</h2>
    <p>내용9</p>
    <p>내용10</p>
    <p>내용11</p>
    <p>내용12</p>
  </section>
  
  
   $("#inner_4 p")
      .filter(function (idx, obj) {
        console.log(idx);
        console.log(obj);
        return idx % 2 !== 0;
      })
      //짝수인 애들을 만나면 강제종료한다.
      .css({ color: "tomato" });
    //인수로 함수를 넘길때에는 매개변수가 반드시 필요하다.
  });

*🔍ruturn:
1.함수 중단
2.주어진 값을 함수 호출 지점으로 반환

---

find() / filter()선택자

find()선택자는 선택한 하위 요소 중 find로 필터링한 요소만 선택한다.
filter()선택자는 선택한 요소 중에서 filter()로 필터링한 요소만 선택한다.

즉, 둘의 차이점은 필터링 할 대상이 선택 요소를 기준으로 '하위요소'인지 '선택한 요소'인지로 구분한다.

[기본형]

$("요소선택").find('하위 요소 중 필터링할 요소') 자식들 중에서 필터링할것인지
$("요소선택").filter('선택한 요소 중 필터링할 요소') 형제들 중에서 필터링할 것인지로 구분한다. 

---

is()메서드★

선택한 요소의 상태가 지정한 속성과 일치하면 true를, 그렇지 않으면 false를 반환한다.
is()메서드는 폼 요소 중 체크박스나 셀렉트 박스의 '선택여부' 또는 '보이는지에 대한 여부'
를 주로 알아볼때 사용한다.

[기본형]
$("요소선택").is(':checked / :selected / :visible / :hidden / :animated')

1. :checked -> 선택한 체크박스 또는 라디오 버튼 요소가 체크된 상태면 true, 아니면 false를 반환한다.
2. :selected -> 선택한 셀렉트 박스가 선택된 상태면 true 아니면 false를 반환한다. 
3. :visible -> 선택한 요소가 보이면 true 아니면 false를 반환한다.  
4. :hidden  -> 선택한 요소가 안보이면 true 아니면 false를 반환한다.  
5. :animated -> 선택한 요소가 애니메이션 동작 상태면 true 아니면 false를 반환한다.

<section id="inner_6">
        <h3>폼 태그 영역</h3>
        <div>
          <input type="checkbox" name="chk1" id="chk1" checked />
          <label for="chk1">체크1</label>
          <input type="checkbox" name="chk2" id="chk12" />
          <label for="chk2">체크2</label>
        </div>
      </section>

  //#inner_5안의 p태그 중 인덱스 0번째 요소가 보이는 상태인지 여부 확인
        let result1 = $("#inner_5 p").eq(0).is(":visible");
        console.log(result1);

        //#inner_5안의 p태그 중 인덱스 1번째 요소가 안보이는 상태인지 여부 확인
        let result2 = $("#inner_5 p").eq(1).is(":hidden");
        console.log(result2);

        let result3 = $("#inner_6 input").eq(0).is(":checked");
        console.log(result3);
        checked이기 때문에 console.log에서  true로 나온다. 
        let result4 = $("#chk2").is(":checked");
        console.log(result4);