[제이쿼리] - 컨텐츠 탐색 선택자 contains/ contents/ has / not / end / find / filter / is

컨텐츠 탐색 선택자

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

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

1. contains()
: 선택한 요소 중 지정한 텍스트를 포함하는 요소만 선택한다. 

[기본형]
$('요소선택:contains(텍스트)')

        
2. contents()
: 선택한 요소의 하위 요소 중 자손의 텍스트와 태그 노드를 선택한다.

[기본형]
$('요소선택').contents()

        
3. has()
: 선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다. 

 [기본형]
$("요소선택:has(요소명)") 또는 $('요소선택').has()

 

 

4. not() 
: 선택한 요소 중 지정한 태그만 제외하고 선택한다. 

[기본형]
$("요소선택:not(요소명)") 또는 $('요소선택').not()

       
5. end()
: 필터링 되기 이전 선택자를 다시 선택한다. (잘 안쓰긴 하지만 웹 기능사 시험에 자주 나온다.)

[기본형]
$('요소선택').탐색선택자().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>

    </div>

 //inner_1안에 있는 p태그 중 내용1이라는 텍스트를 포함하는 태그 선택하기

        $("#inner_1 p:contains(내용1)").css("color", "red");

        //inner_1안에 있는 p태그 중 strong태그를 포함하고 있는 태그 선택

        $("#inner_1 p:has(strong)").css("color", "green");

        //#outer의 자손 태그 노드에 보더 적용

        $("#outer").contents().css({

          border: "2px solid blue",

        });

        //#inner_2 p중에 첫번째 얘를 제외하고 css 속성 적용

        $("#inner_2 p").not(":first").css("background-color", "pink");

        //#inner_2 안에 p태그 중 인덱스번호 1번 요소를 선택했다가 .end()로 취소한 후 css 적용

        //end선택자는 바로 앞에 있는 선택자를 취소한다.

        $("#inner_2 p").eq(1).end().css({ color: "blue" });

        //$("#inner_2 p").css({ color: "blue" }); 이것과 같다. end선택자는 앞에 eq를 취소시켜버린다.

 

---

find() / filter() 선택자

1. find()
: 선택한 하위 요소 중 find로 필터링한 요소만 선택한다. 

 [기본형]
$("요소선택").find('하위요소 중 필터링할 요소')

        
       
2. filter()
: 선택한 요소 중에서 filter()로 필터링한 요소만 선택한다. 

[기본형]
$("요소선택").filter('선택한 요소 중 필터링할 요소')

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

부모를 선택해서 자식을 찾을 때 사용한다.

 

<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_3안의 자식요소중 클래스txt1인 요소를 필터링함.

        $("#inner_3").find(".txt1").css("color", "red");

        //#inner_3 안의 p태그 중 .txt2인 요소를 필터링함

        $("#inner_3 p").filter(".txt2").css("background-color", "#999");

        //#inner_4안의 p태그 중 index번호가 짝수라면 return(강제종료)해라 이후 css를 적용해라

        $("#inner_4 p")

          .filter(function (idx, obj) {

            console.log(idx);

            console.log(obj);

            return idx % 2 !== 0;

          })

          .css({ color: "tomato" });

 

---

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, 아니면 flase를 반환

 

<section id="inner_5">

        <h2>is()</h2>

        <h3>문단태그영역</h3>

        <p>내용1</p>

        <p style="display: none">내용2</p>

      </section>

      <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="chk2" />

          <label for="chk2">체크2</label>

        </div>

      </section>

 

  //inner_5안의 p태그 중 0번째 요소가 보이는 상태인지 여부 확인

        let result1 = $("#inner_5 p").eq(0).is(":visible");

        console.log(result1); //true

        //inner_5안의 p태그 중 1번째 요소가 안보이는 상태인지 여부 확인

        let result2 = $("#inner_5 p").eq(1).is(":hidden");

        console.log(result2); //true

        // #chk1 체크박스가 체크되었는지 여부 확인

        let result3 = $("#chk1").is(":checked");

        console.log(result3); //true

        let result4 = $("#chk2").is(":checked");

        console.log(result4); //false 체크가 안되어있다고 나옴