순회 탐색메소드2번

<style>
    .wrap * {
        border: 1px solid lightgray;
        display: block;
        padding: 5px;
        margin: 15px;
        color: gray;
    }

    .type {
        width: 500px;
    }
</style>

<h1>순회(탐색) 메소드</h1>
<h3>decendants(자손,후손) 메소드 : 선택된 요소의 하위요소들을 선택할 수 있는 메소드</h3>

<pre>
    $('요소명').children([매개변수])
    - 선택 된 요소의 모든 자식 객체 리턴
    - 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
    
    $('요소명').find(매개변수)
    - 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴
</pre>

<div class="wrap">

    <div class="type">div(great-grand parent)
        <ul>ul ( grand parent)
            <li>li (direct parent)
                <span>span</span>
            </li>
        </ul>
    </div>

    <div class="type">div ( great parent)
        <p>P ( direct parent)
            <span>span</span>
        </p>
    </div>

</div>


<p id="test">테스트</p>
<script>
    // id가 test인 요소의 테두리를 2px 빨간실선, 글자를 파란색으로 변경
    $(document).ready(function () {
        // $("#test").css("border","2px solid red").css("color","blue")

        // JavaScript 객체를 매개변수로 전달하는 방법
        $("#test").css({ "border": "2px solid red", "color": "red" });
        // 갯수의 상관없이 계속 작성가능
    });
    const style1 = { "border": "2px solid red", "color": "red" };
    const style2 = { "border": "2px solid orange", "color": "orange" };
    const style3 = { "border": "2px solid yellow", "color": "yellow" };
    const style4 = { "border": "2px solid green", "color": "green" };
    const style5 = { "border": "2px solid blue", "color": "blue" };

    $(function () {
        $("#test").css(style4);
    })

    //000000000000000000000000000000000000000000000000000000000000000

    // 클래스가 wrap인 요소인 자식을 style1로 설정

    $(".wrap").children().css(style1);

    // ul, p태그의 스타일을 style2로 설정 (.wrap 기준(출발))

    // $(".type").children().css(style2);
    $(".wrap").children().children().css(style2);
    // 두개가 같은결과를 출력함

    // 클래스가 type인 요소의 자식 태그 중 ul태그의 스타일만 style3 설정
    $(".type").children("ul").css(style3);

    // 클래스가 wrap인 요소를 기준으로 li태그의 스타일을 style4로 설정
    $(".wrap").children().children("ul").children("li").css(style4);

    // $(".wrap").children().children("ul").children("li").children("span").css(style5);

    // 클래스가 wrap인 요소의 후손 중 모든 span태그의 스타일을 style5로 설정

    $(".wrap").find("span").css(style5);
</script>

순회탐색 메소드3번

<script src="https://code.jquery.com/jquery-3.6.0.js"
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<style>
    .wrap,
    .wrap * {
        display: block;
        border: 1px solid lightgray;
        color: lightgray;
        padding: 5px;
        margin: 15px;
    }
</style>

순회(탐색) 메소드

sideways(옆으로, 옆에서) 메소드 : 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드

<pre>
    $('요소명').siblings([매개변수])
    - 선택 된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
    - 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴

    $('요소명').next() 
    - 선택 된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴
    
    $('요소명').nextAll()
    - 선택 된 요소의 같은 레벨 중 선택된 요소 다음 모든 요소 리턴

    $('요소명').nextUntil(매개변수)
    - 선택 된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴(동생)

    ------------------------------------------------------------------

    $('요소명').prev() 
    - 선택 된 요소의 같은 레벨 중 선택된 요소 이전 한 개 요소 리턴
    
    $('요소명').prevAll()
    - 선택 된 요소의 같은 레벨 중 선택된 요소 이전 모든 요소 리턴

    $('요소명').prevUntil(매개변수)
    - 선택 된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴(형)

    ------------------------------------------------------------------

</pre>

<div class="wrap">div (parent)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>

<ul>
    <p>위 p</p>
    <li>1</li>
    <li>2</li>
    <li class="until">3</li>
    <li>4</li>
    <li>5</li>
    <p>아래 p</p>
</ul>

<span>테스트용 span 태그</span>
<h2>테스트용 h2태그</h2>


<script>
    const style1 = { "border": "2px solid red", "color": "red" };
    const style2 = { "border": "2px solid orange", "color": "orange" };
    const style3 = { "border": "2px solid black", "color": "black" };
    const style4 = { "border": "2px solid green", "color": "green" };
    const style5 = { "border": "2px solid blue", "color": "blue" };


    //h2 태그의 형제요소에 style1 설정하기
    $("h2").siblings().css(style1);

    //h2태그의 형제 요소 중 p태그만 style2 설정하기
    $("h2").siblings("p").css(style2);

    // span태그 다음에 오는 형제 요소 스타일을 style3으로 변경하기
    $("span").next().css(style3);

    // h2 태그 다음에 오는 모든 형제의 요소의 스타일 style4로 설정하기
    $("h2").nextAll().css(style4);


    // until의 이전 형들요소의 폰트사이즈바꾸기?
    $('.until').prevUntil("p").css("fontSize", "30px");

    // until의 다음 형들요소의 폰트굵기 바꾸기
    $('.until').nextUntil("p").css("fontWeight", "bold");

    // is ( "css선택자")
    // 지정 된 범위 내에 매개변수로 지정 된 선택자와 일치하는 요소가
    // 존재하는지 확인하는 메소드
    // 존재하면 true, 없으면 false를 반환한다.

    //h2 태그 이전에 있는 모든 형제 요소 중 p태그가 있는지 확인
    console.log($("h2").prevAll().is("p"));
    console.log($("h2").prevAll().is("pre"));

    $("span").on("click", function () {
        console.log("span태그 클릭 됨");
        console.log($(this));
        console.log(this);
    })

    // 이벤트 핸들러 ( 이벤트 발생 시 동작을 지정하는 함수)
    // 내부에 작성 된 this라는 단어는
    // 이벤트가 발생한 요소를 나타낸다.

    // h2태그 클릭했을 때
    // 클릭한 요소의 이전 요소의
    // 배경색을 red, 글자색을 white로 설정

    $("h2").on("click", function () {
        $(this).prev().css({ "backgroundColor": "red", "color": "white" });
        // const style6 = { "backgroundColor": "red", "color": "white" };
        // $("h2").prev().css(style6);
    })
</script>

메소드와 이벤트

change 1 :

change 2 :

select :

<hr>

<h3>동적으로 글자 수 세기</h3>
<div>
    <p>
        <span id="counter">0</span>/150
    </p>
    <textarea id="input-content" cols="50" rows="5" style="resize:none;"></textarea>
</div>

<script>
    $("#input-content").on("input",function(){
        //#counter의 글자색 변경하기
        // 글자수가 0~130이면 글자색이 검은색
        // 131~149주황색
        // 150은 빨강색 출력

        if($(this).val().length <= 130){
            $("#counter").css("color","black");
        }
        else if($(this).val().length<=149){
            $("#counter").css("color","orange");
        }else{
            $("#counter").css("color","red");

            // 150글자 이상 작성 불가능하게 만들기

            // 1) textarea에 작성된 값을 변수에 저장
            const str= $(this).val();
            
            // 2) substr을 이용해서 글자를 150글자 까지만 잘라내기
                // 문자열.substr(시작인덱스,종료인덱스);
                // -> 문자열을 시작인덱스이상부터, 종료인덱스 미만까지 잘라내어 반환
                // str.substr(0,150) 0~149=150개;
         
            // 3) 150글자만 잘라내어 textarea값으로 세팅하기
                //
            $(this).val(str.substr(0,150));
        }
    
        $("#counter").text($(this).val().length);
        // $(this) : 입력(input) 이벤트가 발생한 현재요소 (textarea)
        // val() : textarea에 입력 된 값 ( 문자열 )
        // length : 문자열의 길이
        // test("문자열") : 요소의 내용을 문자열로 출력
    
    })

</script>

effect메소드

<style>
    .area {
        width: 400px;
        height: 300px;
        border: 1px solid black;
    }

    img {
        width: 100%;
        height: 100%;
    }
</style>

<h1>
    시각적 효과를 위한 Effect 메소드
</h1>
<p>
    요소에 애니메이션 효과를 만들기 위한 메소드 집합
</p>

<pre>
    1.$('요소명').메소드명();
    2.$('요소명').메소드명([speed]);
    3.$('요소명').메소드명([speed], [easing], [callback]);
    speed:실행속도 (ms) / 숫자 or slow, fast
    easing : 변경되는 지점별 속도 / linear, swing가능
    callback : 메소드 실행 후 실행 할 함수
</pre>

<h3>show(), hide() 메소드</h3>

<pre>
    요소를 점점 커지게 하면서 화면에 나타나거나
    요소를 점점 작게 하면서 화면에서 숨기는 메소드
</pre>

<button type="button" id="show-btn">show()</button>
<button type="button" id="hide-btn">hide()</button>

<div class="area">
    <img id="img1" src="../img/피카츄.gif" alt="피카츄">
</div>

<script>

    $("#show-btn").on("click", function () {
        $("#img1").show(500);
    })

    $("#hide-btn").on("click", function () {
        $("#img1").hide(500);
    })
</script>
<hr>
<h3>fadein/fadeout</h3>
<pre>
    fadeIn() :점점 불투명해지면서 나타남
    fadeOut() : 점점 투명해지면서 사라짐

</pre>

<button type="button" id="fadeIn-btn">fadeIn()</button>
<button type="button" id="fadeOut-btn">fadeOut()</button>
<div class="area">
    <img id="img2" src="../img/cat.gif" alt="꼬냥이">
</div>

<script>

    $("#fadeIn-btn").on("click", function () {
        $("#img2").fadeIn(500);
    })

    $("#fadeOut-btn").on("click", function () {
        $("#img2").fadeOut(500);
    });
</script>