UIUX _국비과정 0502 [제이쿼리 객체 조작과 이벤트]

백만두 2024. 6. 8. 17:34

2024. 6. 8. 17:34

제이쿼리에 대해 배우고 있는데 메서드들이 많아서 수업시간에 다루는 메서드들은 암기할 필요가 있습니다.

오늘은 웹페이지를 작성할 때 제이쿼리에서 많이 사용되는 것을 배움

→ 객체 조작

제이쿼리의 객체조작

html(), html(요소명)

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // 객체조작
                // 속성조작
                // html(),html(요소명) : 특정 태그를 포함한 텍스트까지를 범위로 하는 함수(메서드),(하위요소)
                // html() : 해당 대상을 읽어올 때 ()만 쓴다
                // html(요소명) : 해당 범위 안에 요소를 추가

                let result1 = $("#sec_1").html();
                console.log(result1)
                $("#sec_1 p").html("<a href=\"#\">Text1</a>");

                // text(), text("텍스트") 태그의 텍스트 부분만 범위로 사용한다

                let result2 = $("#sec_2").text();
                console.log(result2)
                $("#sec_2 h2").text("text()");
            });
        </script>
    </head>

    <body>
        <h1>
            <strong>객체 조작 및 생성</strong>
        </h1>
        <section id="sec_1">
            <h2>
                <em>html()</em>
            </h2>
            <p>내용1</p>
        </section>
        <section id="sec_2">
            <h2>
                <em>텍스트()</em>
            </h2>
            <p>내용2</p>
        </section>
    </body>
</html>

태그의 속성조작

attr("속성명"), attr("속성명", "새로운 값")
removeAttr("속성명") - 삭제

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // 태그의 속성 조작
                // attr("속성명"), attr("속성명", "새로운 값")
                // removeAttr("속성명") - 삭제

                let srcVal = $("#sec_1 img").attr("src");
                console.log(srcVal);

                // 여러개의 속성을 줄 때는 , 로 구분한다
                $("#sec_1 img").attr({
                    "width":200, 
                    "src":srcVal.replace("1.jpg","2.jpg"),
                    "alt":"바위"
                }).removeAttr("border");
            });
        </script>
    </head>

    <body>

        <h1>
            <strong>객체 조작 및 생성</strong>
        </h1>
        <section id="sec_1">
            <h2>이미지 속성</h2>
            <p><img src="images/math_img_1.jpg" alt="바위" border="2"></p>
        </section>

    </body>
</html>

class 속성을 조작하는 메서드

addClass("class값").removeClass("class값")
toggleClass("class값"),hasClass("class값")

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // class 속성을 조작하는 메서드 
                // addClass("class값").removeClass("class값")
                // toggleClass("class값"),hasClass("class값")

                $("#p1").addClass("aqua");
                $("#p2").removeClass("red");
                $("#p3").toggleClass("green"); // 없으면 들어가고 있으면 뺀다. -> 상태가 뭐냐에 따라 반대로 작업
                $("#p4").toggleClass("green"); // toggle 자체가 '없으면 들어가고 있으면 뺀다' 같은 개념
                $("#p6").text($("#p5").hasClass("yellow")); // 값이 있는지 없는지 판단. 있으면 true, 없으면 false
                // hasClass() 기존 값이 사라지고 새로운 값이 들어감

            });
        </script>
        <style>
            .aqua {
                background-color: #0ff;
            }
            .red {
                background-color: #f00;
            }
            .green {
                background-color: #0f0;
            }
            .yellow {
                background-color: #ff0;
            }
        </style>
    </head>

    <body>

        <p id="p1">내용1</p>
        <p id="p2" class="red">내용2</p>
        <p id="p3">내용3</p>
        <p id="p4" class="green">내용4</p>
        <p id="p5" class="yellow">내용5</p>
        <p id="p6"></p>

    </body>
</html>

폼태그의 값 조작

일반태그일 떄 text()
폼 태그일 땐 val() 
                
폼태그의 값 조작
val(), val("새로운 값")
prop() -> true, false : 선택상자, 체크박스, 라디오버튼 이런 것들을 활용하고 싶을 때
prop() -> 선택되었을 때 true, 선택되지 않았을 때 false , 선택 유무를 알려준다. 상태 체크!
prop("defalutValue")

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // 일반태그일 떄 text()
                // 폼 태그일 땐 val() 
                
                // 폼태그의 값 조작
                // val(), val("새로운 값")
                // prop() : 선택상자, 체크박스, 라디오버튼 이런 것들을 활용하고 싶을 때
                // prop("defalutValue")

                let result1 = $("#user_name").val();  // 값을 읽어온다
                console.log(result1);

                let result2 = $("#user_id").val("javascript"); // () 안의 새로운 값으로 바뀐다
                console.log($("#user_id").val());

                let result3 = $("#user_id").prop("defaultValue");
                console.log(result3);
            });
        </script>
    </head>

    <body>
        <h1>객체 조작 및 생성</h1>
        <form action="#" id="form_1">
            <p>
                <label for="user_name">이름</label>
                <input type="text" name="user_name" id="user_name" value="용대리">
            </p>
            <p>
                <label for="user_id">아이디</label>
                <input type="text" name="user_id" id="user_id" value="hello">
            </p>
        </form>
    </body>
</html>

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {

                let result1 = $("#chk1").prop("checked"); 
                console.log(result1);  // false

                let result2 = $("#chk2").prop("checked"); 
                console.log(result2);  // true

                // 동적처리를 통해 스크립트에서 체크 표시를 변경 가능
                let result3 = $("#chk3").prop("checked",true); 

                // 그룹으로 묶여있을 때
                // 부모그룸을 지정하면 하위 그룹을 반환해준다
                // selected 되어진 인덱스 번호를 반환해준다.
                let result4 = $("#se_1").prop("selectedIndex");
                console.log(result4);  // 2

            });
        </script>
    </head>

    <body>

                <h1><strong>객체 조작 및 생성</strong></h1>
            <form action="#" id="form_1">
            <p>
                <input type="checkbox" name="chk1" id="chk1">
                <label for="chk1">chk1</label>
                <input type="checkbox" name="chk2" id="chk2" checked>
                <label for="chk2">chk2</label>
                <input type="checkbox" name="chk3" id="chk3">
                <label for="chk3">chk3</label>
            </p>
            <p>
                <select name="se_1" id="se_1">
                    <option value="opt1">option1</option>
                    <option value="opt2">option2</option>
                    <option value="opt3" selected>option3</option>
                </select>
            </p>
        </form>
    </body>
</html>

수치조작 메서드

객체조작 메서드 ( 수치 조작 메서드 )

객체 조작 메서드 ( 수치 조작 메서드 )

velog.io

width(), height() ....
width("새로운 값"), height("새로운 값") : 크기 변경

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // 수치조작 메서드
                // width(), height() ....
                // width("새로운 값"), height("새로운 값") : 크기 변경

                let w1 = $("#p1").height();
                console.log(w1); // 50

                let w2 = $("#p1").innerHeight();
                console.log(w2); // 90

                let w3 = $("#p1").outerHeight();
                console.log(w3); //100

                $("#p2").outerWidth(100).outerHeight(100);

                
            });
        </script>
        <style>
            *{padding: 0;}
            #p1, #p2{
               width: 100px;
               height: 50px;
               padding:20px;
               border: 5px solid #000;
               background-color: #ff0;
            }
         </style>
    </head>

    <body>
        <h1>수치 조작 메서드</h1>
         <p id="p1">내용1</p>
         <p id="p2">내용2</p>
    </body>
</html>

요소의 위치 조작

position().[left, top, right, bottom] : 상대 위치값 
offset().[left, top]: 절대 위치값 -> 브라우저로 부터 떨어진 거리

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
               // 요소의 위치 조작
               // position().[left, top, right, bottom] : 상대 위치값 
               // offset().[left, top]: 절대 위치값 -> 브라우저로 부터 떨어진 거리

               let $txt1 = $(".txt_1 span"), 
                   $txt2 = $(".txt_2 span"), 
                   $box = $(".box");

                let off_t = $box.offset().top;  // 100 브라우저가 기준
                let pos_t = $box.position().top;  // 50 부모, 현재 자신이 기준

                $txt1.text(off_t);
                $txt2.text(pos_t);

            });
        </script>
        <style>
            *{margin:0;padding:0;}
            #box_wrap{
               width:300px;
               height:200px;
               margin:50px auto 0;
               position: relative; 
               background-color:#ccc;
            }
            .box{
               width:50px;height:50px;
               position:absolute;
               left:100px;top:50px;
               background-color:#f00;
            }
         </style>


    </head>

    <body>
        <div id="box_wrap">
            <p class="box">박스</p>
         </div>
         <p class="txt_1">절대 top위칫값: <span></span></p>
         <p class="txt_2">상대 top위칫값: <span></span></p>
    </body>
</html>

브라우저의 스크롤 수치 조작

scrollTop(), scrollLeft() : 수치를 읽어올 때
scrollTop(새로운 값), scrollLeft(새로운 값)

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // 브라우져의 스크롤 수치 조작
                // scrollTop(), scrollLeft() : 수치를 읽어올 때
                // scrollTop(새로운 값), scrollLeft(새로운 값)

                // let topNum = $("h1").offset().top; 
                // console.log(topNum);  // 2000px
                // $(window).scrollTop(topNum);

                // let sct =  $(window).scrollTop();
                // console.log(sct);  // 2000px 만큼 위치 이동

                $(window).scroll(function(){
                    let sct = $(window).scrollTop();
                    console.log(sct);

                    if(sct <= 2000){
                        $("body").css({"background-color":"tomato"});
                    }else if(sct > 2000 && sct <= 3000){
                        $("body").css({"background-color":"orange"});
                    }else{
                        $("body").css({"background-color":"yellow"});
                    }
                });
            });
        </script>
        <style>
            *{
                margin:0;
                padding:0;
            }

            body{
                line-height:1;
            }

            #wrap{
                  height:5000px;
                  padding-top:2000px;
            }
         </style>
    </head>

    <body>
        <div id="wrap">
            <h1>위치 메서드</h1>
      </div>
    </body>
</html>

객체 요소 편집

생성

before(), after(), 
append(), appendTo(), 
prepend(), prependTo(), 
insertBefore(), insertAfter()

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
              // 객체 요소 편집
              // 생성, ...
              // before(), after(), 
              // append(), appendTo(), 
              // prepend(), prependTo(), 
              // insertBefore(), insertAfter()
              // remove()

            // 동위
            //   $("#wrap p:eq(2)").after("<p>After</p>"); // 기준을 앞에 정의
            //   $("<p>insertAfter</p>").insertAfter("#wrap p:eq(1)"); // 기준을 뒤에 정의

            //   $("#wrap p:eq(1)").before("<p>Before</p>"); 
            //   $("<p>insertBefore</p>").insertBefore("#wrap p:eq(0)");

            // 하위
            $("<li>appendTo</li>").appendTo("#listZone");  // 가장 마지막에 위치한다
            $("#listZone").prepend("<li>prepend</li>");  // 가장 앞쪽에 위치한다.


            });
        </script>

    </head>

    <body>

        <ul id="listZone">
            <li>리스트</li>
         </ul>

        <!-- <div id="wrap">
            <p>내용1</p>
            <p>내용2</p>
            <p>내용3</p>
         </div> -->
    </body>
</html>

복제, 삭제 ...
clone() : 복제
remove() : 삭제(해당요소를 포함한 모두 삭제)
empty() : 삭제(해당요소의 하위 요소만 삭제, 해당요소 자체는 남겨둔다.)

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
              // 객체 요소 편집
              // 복제, 삭제 ...
              // clone() : 복제
              // remove() : 삭제(해당요소를 포함한 모두 삭제)
              // empty() : 삭제(해당요소의 하위 요소만 삭제, 해당요소 자체는 남겨둔다.)

              // children() 자식요소들을 가지고 옴
              let copyObj = $(".box1").children().clone();
              $(".box2").remove();

              $(".box3").empty();
              $(".box3").append(copyObj);

            });
        </script>

    </head>

    <body>
        <div class="box1">
            <p>내용1</p>
            <p>내용2</p>
         </div>
         <div class="box2">
            <p>내용3</p>
            <p>내용4</p>
         </div>
         <div class="box3">
            <p>내용5</p>
            <p>내용6</p>
         </div>
    </body>
</html>

제이쿼리의 이벤트

참고)

[jQuery]이벤트(Event) 종류

⊙ 이벤트(Event) •기본적으로 전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 바로 실행되...

blog.naver.com

제이쿼리 이벤트를 주는 두 가지 방식

mouseover, mouseout, focus, blur

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // 제이쿼리 이벤트를 주는 두 가지 방식
                // 단독 이벤트, 그룹 이벤트

                // 단독 이벤트
                // $("선택자").이벤트(익명함수 방식의 핸들러 function(){});

                // 그룹 이벤트 만드는 방식 두 가지.
                // 이벤트 나열할때 스페이스로 구분
                // $("선택자").on("이벤트종류1 이벤트종류2 이벤트종류n" , 익명함수 방식의 핸들러 function(){});
                // $("선택자").on({"이벤트종류1 이벤트종류2 이벤트종류n":function(){
                // }
                // });

                $(".btn1").click(function(){
                    $(".btn1").parent().next().css({"color":"red"});
                });

                // mouseover 마우스를 해당요소에 올려놓았을 때 
                // mouseout 마우스를 해당 요소에서 다른 곳에 두었을 때
                // focus 노드가 포커스를 획득했을 때
                // blur 포커스가 해당 요소를 벗어날때 -> tap으로 실행해볼 수 있음
                $(".btn2").on({
                    "mouseover focus":function(){
                        $(".btn2").parent().next().css({"color":"red"});
                    },
                    "mouseout blur":function(){
                        $(".btn2").parent().next().css({"color":"blue"});
                    }
                });

                // 이벤트 제거(이벤트를 동결시킬 때 사용)
                $(".btn1").off("click"); 
                
            });
        </script>
    </head>
    <body>
        <p>
            <button class="btn1">버튼1</button>
            </p>
            <p>내용1</p>
            <p>
               <button class="btn2">버튼2</button>
            </p>
            <p>내용2</p>
    </body>
</html>

hover

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            $(function () {
                // mouseover 마우스를 해당요소에 올려놓았을 때 
                // mouseout 마우스를 해당 요소에서 다른 곳에 두었을 때

                // mouseover와 mouseout 사용
                $(".btn1").on({
                    "mouseover":function(){
                        $(".txt1").css({"background-color":"yellow"});
                    },
                    "mouseout":function(){
                        $(".txt1").css({"background":"none"});
                    }
                });

                // mouseover와 mouseout를 같이 처리해주는 hover
                // hover => mouseover + mouseout
                // hover는 focus와 같은 그륩이벤트 적용이 안된다.
                $(".btn2").hover(
                    function(){  // mouseover
                        $(".txt2").css({"background-color":"skyblue"});
                    },
                    function(){  // mouseout
                        $(".txt2").css({"background":"none"});
                    }
                );

            });
        </script>
    </head>
    <body>
        <p><button class="btn1">Mouse Over/Mouse Out</button></p>
        <p class="txt1">내용1</p>
        <p><button class="btn2">Hover</button></p>
        <p class="txt2">내용2</p>
    </body>
</html>

mousemove 이벤트

<!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="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            // mousemove
            // mouse가 움직이는 좌표값을 받아서 이벤트를 발생
            // function(e) -> e 는 event 객체, X축과 Y축의 값을 받아올 수 있다
            // 키보드와 마우스는 운영체제가 관리
            // 윈도우를 띄웠을 때 보이는 흰색 배경을 document라고 한다.
            $(function () {
                $(document).on("mousemove",function(e){
                    $(".posX").text(e.pageX);
                    $(".posY").text(e.pageY);
                });
            });
            
        </script>
    </head>
    <body>
        <h1>mousemove</h1>
        <p>X : <span class="posX">0</span>px</p>
        <p>Y : <span class="posY">0</span>px</p>
    </body>
</html>

저작자표시 비영리 변경금지

'2024_UIUX 국비 TIL' 카테고리의 다른 글

UIUX _국비과정 0507 [파워포인트 목업] (1)	2024.06.08
UIUX _국비과정 0503 [제이쿼리 이벤트] (1)	2024.06.08
UIUX _국비과정 0430 [제이쿼리 선택자] (1)	2024.06.08
UIUX _국비과정 0429 [제이쿼리 입문] (1)	2024.06.04
UIUX _국비과정 0426 (0)	2024.06.03

개발(자)되어가는 일지