2nd week/0706_jQuery2.html

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="../jquery-ui-1.13.1.custom/jquery-ui.js"></script>
        <link rel="stylesheet" href="../jquery-ui-1.13.1.custom/jquery-ui.css">
        <script>
            function append() {
                // jQuery에 creatElemt 없음
                var li = document.createElement("li");
                li.innerText="append";
                // document.querySelector("ul").appendChild("li");
                $( "ul" ).append(li);
            }
            function prepend() {
                var li = document.createElement("li");
                li.innerText="prepend";
                $( "ul" ).prepend(li);
            }
            function before() {
                // 중간에 값 넣고 싶은 경우
                var li = document.createElement("li");
                li.innerText="before";
                $( "#li2" ).before(li);
            }
            function after() {
                // 중간에 값 넣고 싶은 경우
                var li = document.createElement("li");
                li.innerText="after";
                $( "#li2" ).after(li);
            }
            function search() {
                // ** 한번 선택할 건데 계속 id 만드는 거는 좋지 않아서!! 
                console.log($("#li2").parent());
                // parent : 특정한 요소의 부모를 가져올 수 있음
                console.log($("#li2").next());
                // next : 특정한 요소의 바로 다음 형제를 가져올 수 있음
                console.log($("#ul").children());
                // children : 특정한 요소의 자식요소들 모두 가져옴
            }
            function removeElement() {
                // remove : 특정한 요소 하나만 삭제
                $("#li2").remove();
            }
            function emptyElemnt() {
                // empty : 태그 내 모든 요소들을 삭제
                $("ul").empty();
            }
            function addClass() {
                $("div").addClass("css1");
            }
            function removeClass() {
                $("div").removeClass("css1");
            }
            function hasClass() {
                if ($("div").hasClass("css1")) {
                    alert( "css1!!!!" );
                } else if (!$("div").hasClass("css1")) {
                    // ! -> 아니라면!! 
                    alert( "css1 no!!!")
                }
            }
            function switchClass() {
                    $("div").switchClass("css1", "css2", 3000);
                }
        </script>
        <style>
            .css1 {
                width: 100px;
                height: 100px;
                background-color: darkslateblue;
            }
            .css2 {
                width: 200px;
                height: 200px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div></div>
        <button type="button" onclick="addClass();">addClass</button>
        <button type="button" onclick="removeClass();">removeClass</button>
        <button type="button" onclick="hasClass();">hasClass</button>
        <button type="button" onclick="switchClass();">switchClass</button>
        <ul>
            <li>1</li>
            <li id="li2">2</li>
            <li id="li3">3</li>
        </ul>
        <button type="button" onclick="append();">append</button>
        <button type="button" onclick="prepend();">prepend</button>
        <button type="button" onclick="before();">before</button>
        <button type="button" onclick="after();">after</button>
        <button type="button" onclick="search();">search</button>
        <button type="button" onclick="removeElement();">remove</button>
        <button type="button" onclick="emptyElemnt();">empty</button>
    </body>
</html>