프로젝트에 맞춰 nuxt만 사용하다보니 제이쿼리 프로젝트를 하려니 머리가 텅 비어버렸다.

헷갈리는 것들부터 차근차근 복습...

for 문

<h6>for문</h6>
        <ul class="soccerList">
            <li>리버풀</li>
            <li>레알마드리드</li>
            <li>AS로마</li>
        </ul>

        <script>
            $(".soccerList li").each((index, item) => {
                console.log([$(item).text()]);
                // item > $(item) 제이쿼리 객체
            });
        </script>

        <ul id="myList">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>

        <script>
            let items = ["item 4", "item 5", "item 6"];

            items.forEach((item) => {
                let newItem = $("<li>").text(item);
                $("#myList").append(newItem);
            });
        </script>

        <!-- script -->
        <script>
            let arr = [
                { name: "선미", backnumber: "1" },
                { name: "소녀시대", backnumber: "9" },
            ];

            //for문
            for (var i = 0; i < arr.length; i++) {
                console.log("element", i, arr[i]);
                console.log(arr[i].name);
                console.log(arr[i].backnumber);
                console.log(arr[i].name + arr[i].backnumber);
                console.log("====for문====");
            }

            //foreach

            arr.forEach(function (el, index) {
                console.log("element", i, el);
                console.log(el.name);
                console.log(el.backnumber);
                console.log(el.name + el.backnumber);
                console.log("====foreach====" + `${index + 1}`);
            });

            //$.each
            $.each(arr, function (index, el) {
                console.log("element", index, el);
                console.log(el.name);
                console.log(el.backnumber);
                console.log(el.name + el.backnumber);
                console.log("====$.each====" + `${index + 1}`);
            });
        </script>

document ready

<h2>클릭으로 스타일</h2>
        <p>마우스로 글씨 클릭</p>
        <script>
            $(() => {
                $("p").on("click", () => {
                    $("p").css("color", "red");
                });
            });
        </script>

        <h2>아직 생성되지 않은 HTML 요소에 속성 추가</h2>
        <button onclick="func()">속성 추가!</button>
        <p id="text"></p>
        <script>
            function func() {
                //순서 중요
                createElement(); // 아이디가 "para"인 HTML 요소를 생성함.
                addAttribute(); // 아이디가 "para"인 HTML 요소에 속성을 추가함.
            }
            function createElement() {
                var criteriaNode = document.getElementById("text");

                console.log(criteriaNode);

                var newNode = document.createElement("p");
                newNode.innerHTML = "새로운 단락입니다.";
                newNode.setAttribute("id", "para");
                document.body.insertBefore(newNode, criteriaNode);
            }
            function addAttribute() {
                document
                    .getElementById("para")
                    .setAttribute("style", "color: red");
            }
        </script>

        <p>메소드를 이용하여 문서가 모두 로드된 뒤 코드가 실행</p>
        <i>
            window.onload = function(){<br />
            자바스크립트 코드;<br />
            }<br />
        </i>
        <p>
            Document 객체의 ready() 메소드를 이용하여 같은 결과를 보장하고
            있습니다.
        </p>
        <i>
            $(document).ready(function(){<br />
            제이쿼리 코드;<br />
            });
        </i>
        <p>
            문서가 모두 로드되는 시점과 창이 모두 로드되는 시점의 차이를
            보여주는 예제
        </p>
        <i>
            window.onload = function(){<br />
            $("#doc").text("문서가 전부 로드됐어요!");<br />
            }<br />
        </i>
        <i>
            $(document).ready(function(){<br />
            $("#win").text("창이 모두 로드됐어요!");<br />
            });
        </i>
        <div id="doc"></div>
        <div id="win"></div>
        <script>
            window.onload = function () {
                $("#doc").text("문서가 전부 로드됐어요!").css("color", "red");
                console.log("window");
            };
            $(document).ready(function () {
                $("#win").text("창이 모두 로드됐어요!").css("color", "blue");
                console.log("document");
            });
        </script>

if, switch

<h6>if문</h6>
        <i
            >if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며,
            거짓(false)이면 아무것도 실행하지 않습니다.</i
        >
        <p>
            if (표현식) {<br />
            표현식의 결과가 참일 때 실행하고자 하는 실행문;<br />
            } else {<br />
            표현식의 결과가 거짓일 때 실행하고자 하는 실행문;<br />
            }
        </p>
        <button onclick="countNum()">클릭</button>
        <span class="countPara"></span>
        <script>
            var x = 0;
            function countNum() {
                $(".countPara").text(x++);

                let num = Number($(".countPara").text());

                if (num % 2 == 0) {
                    $(".countPara")
                        .css("color", "red")
                        .attr("title", "색상은 빨강");
                } else {
                    $(".countPara")
                        .css("color", "green")
                        .attr("title", "색상은 초록");
                }
            }
        </script>

        <h6>switch, break</h6>
        <div id="obResult"></div>
        <script>
            // let y = 10;
            let y = { name: "john", age: 30 }; //객체
            let yArray = Object.entries(y);

            let ul = $("<ul>");

            for (let prop in y) {
                let li = $("<li>").text(prop + " : " + y[prop]);
                ul.attr("title", "스크립트로 추가된 ul입니다");
                ul.append(li);
            }

            yArray.forEach(function (item, idx) {

                // el, number 은 매게변수의 이름으로 사용되는 것, 이름 붙이는 건 자유
                let li = $("<li>").text(
                    item[0] + ":" + item[1] + " (index: " + `${idx + 1}` + ")"
                );
                //el[0] 속성의 키
                //el[1] 속성의 값
                li.css("color", "blue");
                ul.append(li);
            });

            $("#obResult").append(ul);

            // switch (typeof y) {
            //     case "number":
            //         document.write("변수 x의 타입은 숫자입니다.");
            //         break;
            //
            // break : 루프 내에서 사용하여 해당 반복문을 완전히 종료.루프 내에서 표현식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용 
            //
            //     case "string":
            //         document.write("변수 x의 타입은 문자입니다.");
            //         break;
            //     case "object":
            //         document.write("변수 x의 타입은 객체입니다.");
            //         break;
            //     default:
            //         document.write("변수 x의 타입은 잘 모르겠네요");
            //         break;
            // }
        </script>