200129 JavaScript, jQuery

JavaScript

배열 Deep copy

간편하게 rest parameter 를 이용한다.

const arr1 = [1,2,3,4,5]

const arr2 = [...arr1]

카피 완료 ㅎㅎ;

CSS

margin : 10px 20px 30px 40px; (top right bottom left 순서)

margin은 요소 외부 간격

padding은 요소 내부 간격

jQuery

- $(document).ready vs window.onload

$(document).ready는 여러개 선언해서 써도 됨. 순차적으로 실행된다.

window.onload 는 브라우저 창에 필요한 모든 것들이 로딩된 후에 실행된다.

- 선택자

$("*") ⇒ 전체 선택자, all selector

$(".class") ⇒ 클래스 선택자

$("#id") ⇒ 아이디 선택자

$("element") ⇒ 요소(태그, element) 선택자

$("selector1, selector2, … , selectorN") ⇒ 다중 선택자(multiple selector)

P423 자식 선택자, 후손 선택자

https://api.jquery.com/child-selector

자식 -> $("parent > child")

후손 -> $("parent child")

P426 속성 선택자

- each 메소드

ex) 

$('div.num').each( function(index, item) {

console.log($(item).attr('class'))

// div.num 안에 있는 item에서 class 속성값을 리턴

}

- mouseover, mouseleave

해당 요소에 마우스가 올려지면 배경을 검정색으로,

빠져나오면 원래 색깔로 하는 jQuery 코드

$(this).css('background', 'black') 에서 'background' 는 getter, 'black'은 setter로 느끼면 됨 ㅎㅎ

$('div:odd').css('background', 'red')

$('div:even').css('background', 'blue')

$('div:first').css('background', 'yellow')

$('div:last').css('background', 'green')

let orgColor;

$('div').mouseover(function() {

orgColor = $(this).css('background')

$(this).css('background', 'black')

                

}).mouseleave(function() {

       $(this).css('background', orgColor)

    })

- css class 정의해서 사용하기

    <script>

        $(document).ready(function () {

            $('div').mouseover(function () {

                $(this).attr('class', 'mycolor1')

            }).mouseleave(function () {

                $(this).attr('class', 'mycolor2')

            })

        })

    </script>

    <style>

        div {

            width: 100px;

            height: 100px;

            border: 1px solid blue;

            float: left;

            margin: 20px;

        }

        .mycolor1 {

            background: red;

        }

        .mycolor2 {

            background: blue;

        }

Ajax

json 파일을 요청해서 출력하는 예제

    <script src="/jquery-ui-1.12.1/external/jquery/jquery.js"></script>

    <script>

        $(document).ready(function () {

            $('button').click(function () {

                $('table').html('')

                $.ajax({

                    url: "http://127.0.0.1:5500/students.json",

                    type: "GET",

                    dataType: "json"

                }).done(function (res) {

                    res.students.forEach((student) => {

                        let x = `

                        <tr>

                            <td>${student.name}</td>

                            <td>${student.age}</td>

                            <td>${student.score}</td>

                        </tr>

                    `

                        $('table').html($('table').html() + x)

                    })

                })

            })

        })

    </script>