# find() / filter()

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

### 요소 선택하기&#x20;

```javascript
<!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>
```

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

### &#x20;                                               [`구현화면 보기`](https://chohyunjung0107.github.io/dothome1/jQuery/jq04_find2.html)

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
</head>
<body>

    <h1>친화도법(affinity diagram)</h1>    
    <p class="desc">아이디어를 정리하는 압축 기법이다. 보통 아이디어를 발화하는 방법으로 많이 사용되는 것이 <em>브레인스토밍</em>이다. 그러나 <em>브레인스토밍</em>으로 많은 아이디어나 생각들이 도출되었어도 정돈되지 않아 핵심 파악이 어려울 때가 있다. <strong>친화도법</strong>은 많은 아이디어나 생각을 관련 있는 것끼리 분류하여 전체적인 구조를 파악하는 문제 해결 방법이다. 동일한 주제에 대한 의견이나 미래에 일어날 상황 등을 예측하여 유사성, 연관성이 높은 순으로 재분류하고 파악한 후 해결안을 만든다.</p>

    <!-- script -->
    <script src="jquery.min_1.12.4.js.js" ></script>
    <script>
        //선택자 선택 
        // $(".desc strong").css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
        // $(".desc").find(":contains('친화도법')").css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});

        //메서드 선택 
        // $(".desc").find("em").css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});

        //마우스 효과 
        // $(".desc").find("strong").mouseover(function(){
        //     $(this).css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
        // });
        // $(this).mouseout(function(){
        //     $(".desc").find("strong").css({color: "#000", backgroundColor: "transparent", fontSize: "100%", padding: "0px", borderRadius: "0px"});
        // });

        //글자 쪼개고 마우스 오버 효과주기
        let text = $(".desc").text().split(" ").join("</span><span>")
        text = "<span>" + text + "</span>";
             
        $(".desc").html(text).find("span").mouseover(function(){
            $(this).css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
        })  
        
        //마우스 효과 한 번에 써주기     
        $(".desc").html(text).find("span").hover(function(){
            $(this).css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
        }, function(){
            $(this).css({color: "#000"});
        })
    </script>
</body>
</html>
```

* 글자 쪼개기는 제이쿼리를 통하여 단어 단위에 일괄 \<span>태그를 넣어줄 수 있다. \
  ()
* text메서드를 사용하게 되면 화면에 글자로 구현되고&#x20;
* html을 사용하게 되면 개발자창(F12)에서 마크업 태그 자체가 바뀐 것을 확인할 수 있다.&#x20;

![](https://1686368321-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJPDmBW1ppF03ulXNry%2F-MJUyT8zCXhNaT2JQdnf%2F-MJUzk-Ekny5pD8ncCQU%2Fimage.png?alt=media\&token=07d72309-19b5-4900-b0f0-e6095d6374c0)
