국비 46-1

냐아암·2023년 6월 26일

JavaScript

국비

목록 보기

59/114

jQuery 메소드와 이벤트

html(): 요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML
text(): 요소에 작성된 내용을 얻어옴(태그 미포함) == innerText
val(): value 속성 값을 얻어옴
html("내용") : 요소의 내용 출력(태그 인식 O)
text("내용") : 요소의 내용 출력(태그 인식 X)
val("내용") : value 속성 값 지정

📍 선택자 요소(A)를 기준으로 삽입 메소드 매개변수에 생성된 요소(B) 또는 함수의 리턴값을 추가

$(A).append(B) : A요소 내 뒷부분에 B를 추가(자식)
$(A).prepend(B) : A요소 내 앞부분에 B를 추가(자식)
$(A).after(B) : A의 요소 뒷부분에 B를 추가(형제)
$(A).before(B) : A의 요소 앞부분에 B를 추가(형제)

📍 empty() : 자식 요소들을 모두 제거하는 메소드 -> 특정 요소 내부를 비움

📍 remove() : 요소 잘라내기, 관련 이벤트 삭제

📍 detach() : 요소 잘라내기, 관련 이벤트도 같이 잘라냄

📍 태그 관련 이벤트

focus : input 태그에 포커스가 맞춰 졌을 때
ex) text인 경우 커서가 깜빡 거릴 때
blur : 포커스가 해제되었을 때
change : input 태그의 값이 변했을 때
1) checkbox, radio, select (마우스 선택 요소) -> 값이 변했을 때 change 이벤트 발생

2) text 관련 요소 (키보드로 값 변경하는 요소) -> 포커스가 해제되었을 때 이전 값과 다를 경우 change 이벤트 발생
select : 선택한 요소 입력 영역 값에 블럭이 설정된 경우
input : 입력과 관련된 모든 이벤트

🔑 CF.

정적 & 동적 요소
- 정적 요소 : HTML 문서 로딩 전부터 이미 작성되어 있는 요소
  -> 기본 방법 on("click", function(){}) 사용 가능
- 동적 요소 : JS 또는 jQuery에 의해 HTML 문서 로딩 이후 추가되는 요소
  -> 기존 방법 불가
  -> $(document).on("이벤트", "선택자", function(){})

effect 메소드

📍 시각적 효과를 위한 Effect 메소드

show() : 요소 점점 커지게 하면서 화면에 나타남
hidden() : 요소 점점 작게 하면서 화면에 숨김
fadeIn() : 점점 불투명해지면서 나타남
fadeOut() : 점점 투명해지면서 사라짐
slideDown()
slideUp()
slideToggle()

06_jQuery메소드와 이벤트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06_jQuery메소드와 이벤트1</title>

    <script src="js/jquery-3.7.0.min.js"></script>

    <style>
        .cls1{color: red;}

        .lime{background-color: lime;}
    </style>
</head>
<body>
    
    <h3>html(), text(), val()</h3>

    <pre>
        html(): 요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML 
        text(): 요소에 작성된 내용을 얻어옴(태그 미포함) == innerText
        val(): value 속성 값을 얻어옴

        html("내용") : 요소의 내용 출력(태그 인식 O)
        text("내용") : 요소의 내용 출력(태그 인식 X)
        val("내용") : value 속성 값 지정
    </pre>

    <div id="area">
        <p class="cls1">기존에 작성되어 있는 요소</p>
    </div>

    <button type="button" id="btn1">html() 메소드</button>
    <button type="button" id="btn2">text() 메소드</button>

    <input type="text" id="inputId" value="apple">
    <button id="btn3">val() 메소드</button>

    <hr>

    <pre>
        선택자 요소(A)를 기준으로 삽입 메소드 매개변수에
        생성된 요소(B) 또는 함수의 리턴값을 추가

        $(A).append(B) : A요소 내 뒷부분에 B를 추가(자식)
        $(A).prepend(B) : A요소 내 앞부분에 B를 추가(자식)
        $(A).after(B) : A의 요소 뒷부분에 B를 추가(형제)
        $(A).before(B) : A의 요소 앞부분에 B를 추가(형제)
        
        생성된 요소(B)를 매개변수로 지정한 선택자(A) 요소에 추가
        (part1의 메소드와 선택자, 생성구문의 순서가 반대) 

        $(B).appendTo(A) : B를 A의 요소 내 뒷부분에 추가(자식)
        $(B).prependTo(A) : B를 A의 요소 내 앞부분에 추가(자식)
        $(B).insertAfter(A) : B를 A의 요소 뒤에 추가(형제)
        $(B).insertBefore(A) : B를 A의 요소 앞에 추가(형제)
    </pre>

    <div id="area2">

        <ul id="list2"></ul>   <!-- 기준 -->

    </div>


    <hr>

    <button id="btn2-1">empty()</button>
    <button id="btn2-2">remove()</button>
    <button id="btn2-3">detach()</button>
    
    <div id="area3">
        <div class="item" id="div3">
            안녕하세요.
        </div>
        <div class="item" id="div4">
            안녕하세요.
        </div>
    </div>

    <hr>

    <div id="area4">
        <div class="item" id="div5">
            안녕하세요.
        </div>
    </div>




    <script src="js/06_jQuery메소드와 이벤트1.js"></script>
</body>
</html>

06_jQuery메소드와 이벤트.js

// html() 버튼
$("#btn1").on("click", function(){
    

    // 아이디가 area인 요소의 내용 모두 삭제
    $("#area").html("");

    // 아이디가 area인 요소의 내용 출력(태그 인식 O)
    $("#area").html("<p class='cls1'>html() 메소드로 작성된 내용</p>") // 만들어진 class 활용
})

// text() 버튼
$("#btn2").on("click", function(){
    // 아이디가 area인 요소의 내용 모두 삭제
    $("#area").text("");
    
    // 아이디가 area인 요소의 내용 출력(태그 인식 X)
    $("#area").text("<p class='cls1'>text() 메소드로 작성된 내용</p>") // 만들어진 class 활용

})

// val() 버튼
$("#btn3").on("click", function(){

    // 아이디가 inputId인 요소의 값 삭제
    $("#inputId").val("");
    
    // 아이디가 inputId인 요소에 값 대입
    $("#inputId").val("banana");
})

$(document).ready(function(){

    let count = 1;

    // append() : 마지막 자식 요소로 추가
    $("#list2").append("<li>리스트 " + count++ +"</li>");
    $("#list2").append("<li>리스트 " + count++ +"</li>");
    $("#list2").append("<li>리스트 " + count++ +"</li>");
    
    // prepend() : 첫 번째 자식 요소로 추가
    $("#list2").prepend("<li>리스트 " + count++ +"</li>");
    $("#list2").prepend("<li>리스트 " + count++ +"</li>");
    $("#list2").prepend("<li>리스트 " + count++ +"</li>");

    for( let i = 0; i < 3; i++){
        const el = "<p>새로 추가된 요소" + i + "</p>";

        // before() : 바로 이전 형제 요소 추가
        $("#list2").before(el);

        // after() : 바로 다음 형제 요소 추가
        $("#list2").after(el); // 순서 유의
    }

})

// empty() 버튼
$("#btn2-1").on("click", function(){
    // empty() : 자식 요소들을 모두 제거하는 메소드
    //          -> 특정 요소 내부를 비움

    // id area3의 요소의 내부를 비움
    $("#area3").empty();
})

// id div3인 요소에 마우스가 들어왔다 나갔다 할 때 동작
// $("#div3").hover(function(){}, function(){})
        //          들어왔을 때     나갔을 때
$("#div3").hover(function(){
    // console.log($("#div3"))

    // 마우스가 들어왔을 때 현재 요소에 lime 클래스를 추가
    $(this).addClass("lime");
    
},  function(){

    // 마우스가 나갔을 때 현재 요소에서 lime 클래스를 제거
    $("#div3").removeClass("lime");
});

// remove() 버튼
$("#btn2-2").on("click", function(){
    // remove() : 요소 잘라내기, 관련 이벤트 삭제
    const el = $("#div3").remove();
    console.log(el);

    $("#area4").append(el);
})

// detach() 버튼
$("#btn2-3").on("click", function(){
    // detach(): 요소 잘라내기, 관련 이벤트도 같아 잘라냄
    const el = $("#div3").detach();
    $("#area4").append(el);
})

07_jQuery메소드와 이벤트2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07_jQuery메소드와 이벤트2</title>

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

        .text1{
            color: red;
            cursor: pointer;
        }
    </style>

    <script src="js/jquery-3.7.0.min.js"></script>

</head>
<body>
    
    <h1 class="area"></h1>
    <button type="button" id="stop">정지</button>

    <hr>

    <h3>input 태그 관련 이벤트</h3>

    <pre>
        focus : input 태그에 포커스가 맞춰 졌을 때
                ex) text인 경우 커서가 깜빡 거릴 때

        blur : 포커스가 해제되었을 때

        change : input 태그의 값이 변했을 때
            1) checkbox, radio, select (마우스 선택 요소)
                -> 값이 변했을 때 change 이벤트 발생

            2) text 관련 요소 (키보드로 값 변경하는 요소)
                -> 포커스가 해제되었을 때 이전 값과 다를 경우
                    change 이벤트 발생
        
        select : 선택한 요소 입력 영역 값에 블럭이 설정된 경우

        input : 입력과 관련된 모든 이벤트
    </pre>

    focus / blur : <input type="text" id="focus-blur"> <br>

    change 1 : <input type="checkbox" id="change1"> <br>
    change 2 : <input type="text" id="change2"> <br>

    select : <input type="text" id="select"> <br>

    <hr>

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

    <script src="js/07_jQuery메소드와 이벤트2.js"></script>
</body>
</html>

07_jQuery메소드와 이벤트2.js

let count = 0; // 숫자가 0~9까지 증가하는 것을 세기 위한 변수

let interval; // setInterval을 저장할 변수

$(function(){           // 반복 수행할 기능, 지연시간(ms)
    interval = setInterval(function(){

        if(count < 10){
            // 0~9까지 출력할 span 태그 작성
            const span = "<span class='text1'>"+ count++ +"</span>";
            $(".area").append(span);
        } else{ // count가 9 초과인 경우
            // 클래스가 area인 요소 내부에 있는 내용을 모두 삭제
            $(".area").empty();

            // count를 다시 0으로 초기화하여 
            // 다시 0~9까지 카운트 가능하도록 함
            count = 0;
        }

    }, 300)

    // HTML 문서의 로딩이 완료된 후
    // 아이디가 stop인 요소가 클릭되었을 때의 동작을 추가
    $("#stop").on("click", function(){
        clearInterval(interval);
        console.log($(this).text());
    });

    // 클래스가 text1인 요소를 클릭했을 때
    // 콘솔에 요소의 내용(text)출력
    // $(".text1").on("click", function(){

    $(document).on("click", ".text1", function(){
        console.log($(this).text());
    });

    /* 
    
        1. HTML 문서는 위에서 아래로 해석
        2. on(), addEventListener() 는
           요소에 이벤트가 발생했을 때 동작(기능)을 추가하는 메소드이다.

        (중요) 기존의 on(), addEventListener()를 이용하여
        이벤트 동작을 추가할 때는
        이미 화면에 로딩이 완료된 상태인 요소에 추가를 했었다.

        지금 같은 경우는 기존 화면에 없던 요소(span)에
        이벤트 동작을 추가하려 했지만 되지 않았다.

        정적 요소 : HTML 문서 로딩 전부터 이미 작성되어 있는 요소
                -> 기본 방법 on("click", function(){}) 사용 가능
        
        동적 요소 : JS 또는 jQuery에 의해 HTML 문서 로딩 이후 추가되는 요소
                -> 기존 방법 불가
                -> $(document).on("이벤트", "선택자", function(){})
    */
    
});

// id focus-blur인 요소에 초점이 맞춰진 경우
// 배경색을 pink로 바꾸는 동작 추가
$("#focus-blur").on("focus", function(){
    $(this).css("backgroundColor", "pink");
})

// 아이디가 focus-blur인 요소에 초점이 해제된 경우
// 배경색을 원래대로 바꾸는 동작 추가
$("#focus-blur").on("blur", function(){
    $(this).css("backgroundColor", ""); // 빈칸으로 놔둘 시 -> backgroundColor 없애겠다.
})

// 아이디가 change1인 요소의 체크/해제 될 때마다
// 콘솔에 "checkbox 값이 변경되었습니다." 출력
$("#change1").on("change", function(){
    console.log("checkbow값이 변경되었습니다.")
})

// 아이디가 change2인 요소의 입력값이 변한 상태로 포커스가 해제될 때마다
// 콘솔에 "입력값이 변경되었습니다." 출력
$("#change2").on("change", function(){
    console.log("입력값이 변경되었습니다.")
})

// 아이디가 select인 요소의 입력값에 블럭이 잡힌 경우
// 콘솔에 "입력값에 블럭이 잡힙." 출력
$("#select").on("select", function(){
    console.log("입력값에 블럭이 잡힘") // 블럭 == 드래그
})

$("#input-content").on("input", function(){

    let length = $(this).val().length;
    console.log(length);

    // #counter의 글자색 변경하기
    // 글자수가 0에서 130 사이이면 글자색이 검은색
    // 131 ~ 149 주황색
    // 150 부터는 빨간색으로 출력
    $("#counter").html(length);

    if(length<=130){
        $("#counter").css("color", "black");
    } else if(length<=149){
        $("#counter").css("color", "orange");
    } else{ // 150글자 이상인 경우
        $("#counter").css("color", "red");

        // 150 글자 이상 작성 불가능하게 만들기
        // 내 코드
        /* $(this).val($(this).val().substring(0,150)); */

        // 쌤 코드
        
        // 1. textarea에 작성된 값(문자열)을 변수에 저장
        const str = $(this).val();

        // 2. substring을 이용해서 글자를 150글자까지만 잘라내기
        // 문자열.substring(시작인덱스, 종료인덱스)
        // -> 문자열을 시작 인덱스 이상부터, 종료 인덱스 미만까지 잘라내어 반환
        // str.substring(0,150);

        // 3. 150 글자만 잘라내어 textarea의 값으로 세팅하기
        $(this).val(str.substring(0,150));

        $("#counter").text(150); // 자르기 전에 글자 수를 count해서 문제점 발생 -> 해결 코드
    }
})

08_effect메소드

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

    <script src="js/jquery-3.7.0.min.js"></script>

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

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

    <h1>시각적 효과를 위한 Effect 메소드</h1>

    <h3>show() / hidden()</h3>

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

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

    <div class="area">
        <img src="../images/흰둥이.jpg" id="img1">
    </div>

    <h3>fadeIn / fadeOut() 메소드</h3>
    <pre>
        fadeIn() : 점점 불투명해지면서 나타남
        fadeOut(): 점점 투명해지면서 사라짐
    </pre>

    <button id="fadeIn-btn">fadeIn()</button>
    <button id="fadeOut-btn">fadeOut()</button>

    <div class="area">
        <img src="../images/짱구.jpg" id="img2">
    </div>

    

    <script src="js/08_effect메소드.js"></script>
</body>
</html>

08_effect메소드.js

// show(), hide()

$("#show-btn").on("click", function(){
    $("#img1").show(500); // 1000ms == 1s
})
$("#hide-btn").on("click", function(){
    $("#img1").hide(500);
})


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

09_effect메소드2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09_effect메소드2</title>

    <style>
        div{
            width: 300px;
            height: 30px;
            background-color: pink;
            color: white;
            border-radius: 10px;
            text-align: center;
            line-height: 30px;
            border: 1px solid hotpink;
            cursor: pointer;
        }

        .contents{
            border: 1px solid lightgray;
            width: 300px;
            height: 200px;
            display: none; /* 화면에서 보이지 않는다. */
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
    
    <h1>slide 메소드</h1>
    <h3>slideDown()과 slideUp()</h3>

    <div>첫 번째 메뉴</div>
    <p class="contents">1</p>
    <div>두 번째 메뉴</div>
    <p class="contents">2</p>
    <div>세 번째 메뉴</div>
    <p class="contents">3</p>
    <div>네 번째 메뉴</div>
    <p class="contents">4</p>
    <div>다섯 번째 메뉴</div>
    <p class="contents">5</p>


    <script src="js/09_effect메소드2.js"></script>
</body>
</html>

09_effect메소드2.js

$("div").on("click", function(){

    /* if($(this).next().is("p")){
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    } */

    /* if($(this).next().is(":none")){
        $(this).next().slideDown();
    }else {
        $(this).next().slideUp();
    } */
   
    
    if($(this).next("p").css("display")=="none"){
        $(this).siblings(".contents").slideUp();
        $(this).next().slideDown();

    } else{
        $(this).next().slideUp();
    }



   /* $(this).next().slideToggle(); */

})

냐아암

개발 일지

이전 포스트