✨
JQuery
  • 제이쿼리
  • 제이쿼리 기본
  • 선택자
    • 기본 선택자
    • 계층 선택자
    • 속성 선택자
    • 기본 필터 선택자
    • 내용 필터 선택자
    • 보임 필터 선택자
    • 자식 요소 필터 선택자
    • 폼 요소 필터 선택자
  • 탐색
    • find() / filter()
    • each()/$.each()
  • 속성
    • position() / offset()
    • scrollTop() / scrollLeft()
    • addClass() / removeClass()
    • toggleClass()
    • hasClass()
    • Attr() / removeAttr()
  • 변경
    • append() / prepend ()
    • remove() / empty ()
    • text() / html()
  • 애니메이션
    • show() / hide()
    • fadeIn() / fadeOut()
    • slideUp() / slideDown()
    • animate()
  • 이벤트
Powered by GitBook
On this page
  • find()
  • find(), filter()
  • 글자 쪼개기
  • 마우스 오버 효과내기

Was this helpful?

  1. 탐색

find() / filter()

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

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

find()

find(), filter()

<!DOCTYPE html>
<html lang="ko">
<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"></script>
    <script>
        $(function(){
            // $(".txt1").css("background","#455525")
            // $("p:contains('내용1')").css("background","#455525")
            // $("#inner_1 p:eq(0)").css("background","#455525");
            // $("p[class='txt1']").css("background","#455525");
            // $("p[class^='txt1']").css("background","#455525");
            // $("p[class*='txt1']").css("background","#455525");
            // $("p[class~='txt1']").css("background","#455525");
            // $("#inner_1 :nth-child(2)").css("background","#455525");
            // $("#inner_1 p:first-of-type").css("background","#455525");
            // $("#inner_1 .txt1").css("background","#455525");
            // $("#inner_1 p:lt(1)").css("background","#455525");

            // $("#inner_1").find(".txt1").css("background","#455525");
            $("#inner_1 p").filter(".txt2").css("background","red");
        })
    </script>
</head>
<body>
    <div id="outer_wrap">
        <h1>콘텐츠 탐색 선택자</h1>
        <section id="inner_1">
            <h2>find(), filter()</h2>
            <p class="txt1">내용1</p>
            <p class="txt2">내용2</p>
        </section>
        <section id="inner_2">
            <h2>filter(function)</h2>
            <p>index 0</p>
            <p>index 1</p>
            <p>index 2</p>
            <p>index 3</p>
        </section>
    </div>
</body>
</html>

글자 쪼개기

<!DOCTYPE html>
<html lang="ko">
<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"></script>
    <script>
        // $(".desc strong").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"});

        // $(".desc").find("em").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"});

        // $(".desc").find("strong").mouseover(function(){
        //     $(".desc").find("strong").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"})
        // });
        // $(".desc").find("strong").mouseout(function(){
        //     $(".desc").find("strong").css({color:"#000", background:"#transparent", fontSize:"100%", padding:"0px", boderRadius:"0px"})
        // });

        // $(".desc").find(":contains('친화도법')").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"});

        //글자 쪼개기
        let text = $(".desc").text().split(" ").join("</span><span>")
        text = "<span>" + text + "</span>";

        $(".desc").html(text).find("span").mouseover(function(){
            $(this).css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"});
        })
    </script>
</body>
</html>

마우스 오버 효과내기 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <style>
        @font-face {
            font-family: 'TTTogether';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }   
        .section {width: 700px; margin: 50px auto;
            text-align: center;
            font-family: "TTTogether";
        }
        .section h1 {font-size: 40px;}
        .section p {font-size: 30px;}
        .section p span {padding: 5px; display: inline-block;}
    </style>
</head>
<body>
    <div class="section">
        <h1>친화도법(affinity diagram)</h1>
        <p class="desc">아이디어를 정리하는 압축 기법이다. 보통 아이디어를 발화하는 방법으로 많이 사용되는 것이 <em>브레인스토밍</em>이다 그러나 <em>브레이스토밍</em>으로 많은 아이디어나 생각들이 도출되있어도 정돈되지 않아 핵심 파악이 어려울 때가 있다. <strong>친화도법</strong>은 많은 아이디어나 생각을 관련있는 것끼리 분류하여 전체적인 구조를 파악하는 문제 해결 방법이다.동일한 주제에 대한 의견이나 미래에 일어날 상황등을 예측하여 유사성, 연관성이 높은 순으로 재분류하고 파악한 후 해결안을 만든다</p>
    </div>
    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
        // $(".desc strong").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"});

        // $(".desc").find("em").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"});

        // $(".desc").find("strong").mouseover(function(){
        //     $(".desc").find("strong").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"})
        // });
        // $(".desc").find("strong").mouseout(function(){
        //     $(".desc").find("strong").css({color:"#000", background:"#transparent", fontSize:"100%", padding:"0px", boderRadius:"0px"})
        // });

        // $(".desc").find(":contains('친화도법')").css({color:"#c7254e", background:"#f9f2f4", fontSize:"90%", padding:"4px 6px 2px 6px", boderRadius:"5px"});

        //글자 쪼개기
        let text = $(".desc").text().split(" ").join("</span><span>")
        text = "<span>" + text + "</span>";

        // $(".desc").html(text).find("span").mouseover(function(){
        //     $(this).css({color:"#c7254e", background:"#f9f2f4", boderRadius:"5px"});
        // })

        $(".desc").html(text).find("span").hover(function(){
            $(this).css({color:"#c7254e", backgroundColor:"f9f2f4", borderRadius:"#000"})
        }, function(){$(this).css("color","#000")})
    </script>
</body>
</html>
Previous탐색Nexteach()/$.each()

Last updated 4 years ago

Was this helpful?

https://dohaeun.github.io/dothome1/jquery/jquery04.htmldohaeun.github.io