find() / filter()

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

$("선택자").find("하위 요소 중 필터링 할 요소 선택") $("선택자").filter("선택한 요소 중 필터링 할 요소 선택")

요소 선택하기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_find</title>
    <script src="jquery.min_1.12.4.js.js" ></script>
    <script>
        $(function(){
            //내용1을 선택해서 백그라운드 빨간색으로 변경(선택자)
            // $(".txt1").css("backgroundColor","red");
            // $("p:contains('내용1')").css("backgroundColor","red");
            // $("#inner_1 p:eq(0)").css("backgroundColor","red");
            // $("#inner_1 p:first").css("backgroundColor","red");
            // $("p[class='txt1']").css("backgroundColor","red");
            // $("p[class^='txt1']").css("backgroundColor","red");
            // $("p[class*='txt1']").css("backgroundColor","red");
            // $("p[class~='txt1']").css("backgroundColor","red");
            // $("#inner_1 :nth-child(2)").css("backgroundColor","red");
            // $("#inner_1 p:nth-of-type(1)").css("backgroundColor","red");
            // $("#inner_1 p:first-of-type").css("backgroundColor","red");
            // $("#inner_1 .txt1").css("backgroundColor","red");
            // $("#inner_1 p:lt(1)").css("backgroundColor","red");

            //(메서드)
            $("#inner_1").find(".txt1").css("backgroundColor","red");
            $("#inner_1 p").filter(".txt2").css("backgroundColor","blue");
        });
    </script>

</head>
<body>
    <div id="outer_wrap">
        <h1>콘텐츠 탐색</h1>
        <section id="inner_1">
            <h2>find(), finlter()</h2>
            <p class="txt1">내용1</p>
            <p class="txt2">내용2</p>
        </section>
        <h1>콘텐츠 탐색</h1>
        <section id="inner_2">
            <h2>filter(function)</h2>
            <p>index 0</p>
            <p>index 1</p>
            <p>index 2</p>
            <p>index 3</p>
            <p>index 4</p>         
        </section>
    </div>
</body>
</html>

글자 쪼개고 마우스 오버하면 글씨 변경하기

구현화면 보기

  • 글자 쪼개기는 제이쿼리를 통하여 단어 단위에 일괄 <span>태그를 넣어줄 수 있다. ()

  • text메서드를 사용하게 되면 화면에 글자로 구현되고

  • html을 사용하게 되면 개발자창(F12)에서 마크업 태그 자체가 바뀐 것을 확인할 수 있다.

Previous탐색Nexteach()/$.each()

Last updated

Was this helpful?