본문 바로가기
기록/자바_국비

[배운내용정리] 0126 자바 국비교육_ jQuery

mois 2021. 2. 8. 04:16
728x90

2021년 01월 26일 9시 ~ 15시 30분 zoom으로 수업 진행

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        img{
            width: 100px;
            height: 100px;
        }
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        function resizeImg() {
            $("img").css({"width":"200px", "height":"200px"});
        }

        function idSelector() {
            //$("#selId").hide();
            $("#selId").css("display", "none");
        }

        function classSelector() {
            $(".selClass").css("opacity", "0.5");
        }

        function propSelector() {
            $("img[title*=02]").slideUp(2000);
        }

        function changeImg(){
            $("td > img").attr("src", "image/jin1.png");
        }
    </script>


</head>
<body>
    <h3>1.이미지들의 크기를 모두 200px*200px로 설정하자</h3>
    <button onclick="resizeImg();">클릭!</button>

    <h3>2.이미지들 중 id가 'selId'인 태그를 찾아, 숨기자</h3>
    <button onclick="idSelector();">클릭!!</button>

    <h3>3.이미지들 중 class가 'selClass'인 태그를 찾아, 투명도를 50%로 적용하자</h3>
    <button onclick="classSelector();">클릭!!!</button>

    <h3>4.이미지들 중 속성값으로 탐색하여 slideUp 기능을 적용하자.
        (title 속성값 중, '02'를 포함하는 img태그를 찾아서 적용)
        (slideUp은 default:400ms -> 2000ms로 적용)
    </h3>
    <button onclick="propSelector();">클릭!!!!</button>

    <h3>5.이미지 바꾸기(td의 자식요소인 img만 선택해서 바꾸자)</h3>
    <button onclick="changeImg();">클릭!!!!!</button>

    <table>
        <tr>
            <td><img id="selId" title="img01" alt="test01" src="image/pkinJin.png" ></td>
            <td><img title="img02" alt="test01" src="image/pkinJin.png" ></td>
            <td><img class="selClass" title="img03" alt="test01" src="image/pkinJin.png" ></td>
            <td><img class="selClass" title="img04" alt="test01" src="image/pkinJin.png" ></td>
        </tr>
        <tr>
            <td><img id="selId" title="img05" alt="test01" src="image/pkinJin.png" ></td>
            <td><span><img title="img06" alt="test01" src="image/pkinJin.png" ></span></td>
            <td><span><img class="selClass" title="img07" alt="test01" src="image/pkinJin.png" ></span></td>
            <td><img class="selClass" title="img08" alt="test01" src="image/pkinJin.png" ></td>
        </tr>
    </table>

</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 type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        function click01() {
            var value = $("input:text").val();
            alert(value);
            //js에서 값을 가져올때는 .value(); 였지만
            //제이쿼리에선 val(); 을 사용한다.
        }

        function click02() {
            var value = $("input:radio").val();
            $("#view").html(value);
        }

        function click03() {
            var value = $("input:checkbox").val();
            $("#view").html(value);
        }

        $(function() {
            var selEle = document.getElementsByTagName("select")[0];
            selEle.onchange = function() {
                alert(selEle.options[selEle.selectedIndex].value);
            }
        });
    </script>
</head>
<body>
    <form>
        <input type="text">
        <input type="button" value="선택" onclick="click01();">
        <input type="radio" value="20.11.03~" onclick="click02();">20년 11월 03일 ~
        <input type="checkbox" value="스마트 컨텐츠 융합" onclick="click03();">스마트 컨텐츠 융합
        
        <div id="view"></div>
        
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </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 type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#signal").submit(function() {
                if($(".infobox").val() == null || $(".infobox").val() == "") {
                    $(".error").show();
                    //페이지가 넘어가면 안되니까 return false;
                    return false;
                } 
            });


            $("#confirm").click(function() {

                //내용을 지운다
                $("#result").empty();

                if($("input[name=chk]:checked").length == 0) {
                    //아무것도 선택하지 않았을 경우
                    alert("하나 이상 선택해주세요");
                }
                else {
                    $("input[name=chk]:checked").each(function(i) {
                        var chk = $("input[name=chk]:checked").eq(i);
                        var book = chk.next().text();
                        var price = chk.val();
                        $("#result").append(book + " : " + price + " <br> ");

                    });
                }
            });


            $("input[name=chk]").click(function() {
                if( $("input[name=chk]").length == $("input[name=chk]:checked").length ) {
                    //체크박스의 개수와 체크된 체크박스의 갯수가 같을 경우 모두 선택처리
                    $("input[name=all]").prop("checked", true);
                }
                else {
                    $("input[name=all]").prop("checked", false);
                }
            });

        });


        function allchk(bool) {
            $("input[name=chk]").each(function() {
                $(this).prop("checked", bool);
            });

        }

    </script>
</head>
<body>
    <form id="signal">
        <div>
            <span class="label">userId</span>
            <input type="text" class="infobox" name="userId">
            <span class="error" style="color: red; display: none;">반드시 입력하세요!</span>
        </div>
        <input type="submit" class="submit" value="입력하기">
    </form>

    <hr>

    <fieldset>
        <legend>체크 여부 확인</legend>
        <input type="checkbox" name="all" onclick="allchk(this.checked);">전체 선택<br>
        <input type="checkbox" name="chk" value="20000"><b>Java</b><br>
        <input type="checkbox" name="chk" value="25000"><b>javascript</b><br>
        <input type="checkbox" name="chk" value="30000"><b>Spring</b><br>

        <input type="button" value="확인" id="confirm"><br>
        <span>선택한 책 가격</span>
        <div id="result"></div>
    </fieldset>
    
</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 type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">

        $(function() {
            $("div > p").eq(0).click(function() {
                $("pre b").eq(0).toggle();
            });

            $("div > p").eq(1).click(function() {
                $("pre b").slice(1, 2).toggle();
                //$("pre b").slice(1, 3).toggle();
                //slice(시작인덱스, 종료인덱스) : 실제로 선택되는 것은 시작 ~ (종료-1)
                //slice(시작인덱스) : 시작위치서부터 끝까지 전부 선택
            });

            $("div > p").eq(2).click(function() {
                $("pre b").first().css("color", "red");
                $("pre b").eq(2).toggle();
            });

            $("div > p").eq(3).click(function() {
                $("pre b").last().css("color", "blue");
                $("pre b").eq(3).toggle();
            });

        });


    </script>

</head>
<body>
    <pre>
        <b>eq() : 선택한 엘리먼트들 중에 인덱스로 탐색</b>
        <b>slice() : 선택한 엘리먼트들 중에 인덱스 길이로 탐색</b>
        <b>first() : 선택한 엘리먼트들 중에 첫번째 요소 탐색</b>
        <b>last() : 선택한 엘리먼트들 중에 마지막 요소 탐색</b>
    </pre>

    <div>
        <p>eq()</p>
        <p>slice()</p>
        <p>first()</p>
        <p>last()</p>
    </div>
    
</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 type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("div").find("b").css({"font-size" : "30px", "color" : "red"});

            $("div").children("#chd").text("2. children()");

            $("p").parent().css("background-color", "skyblue");

            $("p>b").parents().css("background-color", "khaki");

            $("p").eq(0).next().css({"font-size" : "30px", "color" : "blue"});
        });
        

    </script>

</head>
<body>
    <pre>
        <b>find("selector") : 선택한 엘리먼트의 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다.</b>
        <b>children() : 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다.</b>
        <b>parent() / parents() : 선택한 엘리먼트의 부모요소를 찾는다. </b>
        <b>next("selector") : 선택한 엘리먼트의 다음에 따라오는 요소를 찾는다.</b>
    </pre>

    <div>
        <p><b>1</b></p>
        <p id="chd">2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
    
</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 type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("p:eq(0)").add("span").css("color", "red");

            $("div").children().click(function() {
                if($(this).prop("tagName") == "SPAN") {
                    alert("SPAN 태그 클릭");
                    $(this).css("color", "blue");
                }

                if($(this).is("p")) {
                    $(this).css("background-color", "skyblue");
                }

            });

        });

    </script>

</head>
<body>

    <div>
        <p>add()</p>
        <span>add() : 선택한 엘리먼트에 추가적으로 selector 표현식을 저장할 때 사용</span>
        <p>is()</p>
        <span>is() : 선택한 엘리먼트들 중에 구하는 엘리먼트가 있는지 확인</span>
    </div>
    
</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>
    <style type="text/css">
        .menu{
            width: 150px;
            background-color: plum;
            position: absolute;
        }
        #menu2 {
            left: 170px;
        }
        #menu3 {
            left: 340px;
        }
        a {
            text-decoration: none;
        }
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function() {

            $(".menu div").css("display", "none");

            //hover
            $(".menu").hover(
                /*
                function() {
                    $(this).children("div").show();
                }, 
                function() {
                    $(this).children("div").hide();
                }
                //hover 이벤트 발생 시 show가 있는 구문이 실행되고ㅓ , 해당 구문이 종료됐을때 hide가 있는 구문 실행
                */
                function() {
                    $(this).children("div").toggle();
                }
            );

        });
       
    </script>

</head>
<body>

    <div id="menu1" class="menu">
        <a href="jq06_dom01.html">필터링</a>
        <div>.eq()</div>
        <div>.slice()</div>
        <div>.first()</div>
        <div>.last()</div>
    </div>

    <div id="menu2" class="menu">
        <a href="jq07_dom02.html">트리 탐색</a>
        <div>.find()</div>
        <div>.children()</div>
        <div>.parent()</div>
        <div>.next()</div>
    </div>

    <div id="menu3" class="menu">
        <a href="jq08_dom03.html">기타 탐색</a>
        <div>.all()</div>
        <div>.is()</div>
    </div>
    
</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>
    <style type="text/css">
        div {
            width: 400px;
            height: 200px;
            border: 2px solid red;
            padding: 20px;
            overflow: auto;
        }

        div p:first-child {
            float: left;
            border: 1px solid blue;
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
        }

        div p:last-child {
            float: right;
            border: 1px solid blue;
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
        }
       
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("a:eq(0)").click(function() {
                alert("a 클릭");
                //e.stopPropagation(); : 이벤트 요소의 전파 막기
                //e.preventDefault(); : 기본 동작 막기
                return false;//이벤트 요소의 전파 막기, 이벤트에 의한 기본 동작 막기
            });

            $("p").click(function() {
                alert("p 클릭");
            });

            $("div").click(function() {
                alert("div 클릭");
            });

            $("a:eq(1)").bind({
                "mouseover":function() {
                    $(this).css("background-color", "pink");
                }, 
                "mouseout":function() {
                    $(this).css("background-color", "skyblue");
                }
            });

            $("span").click(function() {
                alert("span클릭");
                $("a:eq(1)").unbind();
            });
            
            
            $("button").click(function() {
                $("body").append("<p>새로 추가된 p태그</p>");
            });

            $("body").on("click", ">p", function() {
                alert("새로 추가된 요소에도 이벤트 적용");
                //새로 추가된 p태그를 클릭했을때 해당 alert 창이 뜬다.
            });
            //on() 이벤트를 바인딩 시킨다. 요소가 새로 추가되어도 이벤트가 적용된다.


        });
       

    </script>

</head>
<body>
    <span>unbind() : 이벤트 해제</span>
    <div>
        <p>
            <a href="https://www.naver.com">클릭</a>
        </p>
        <p>
            클릭
        </p>
    </div>
    <div>
        <p>
            <a href="https://www.google.com">클릭</a>
        </p>
        <p>
            클릭
        </p>
    </div>

    <br><hr><br>

    <button>요소 추가</button>
    
</body>
</html>
저작자표시 비영리 변경금지

'기록 > 자바_국비' 카테고리의 다른 글

[배운내용정리] 0128 자바 국비교육_ jQuery_ajax  (0) 2021.02.14
[배운내용정리] 0127 자바 국비교육_ jQuery  (0) 2021.02.13
[배운내용정리] 0125 자바 국비교육_ Javascript_jQuery  (0) 2021.02.07
[배운내용정리] 0122 자바 국비교육_ Javascript  (0) 2021.02.07
[배운내용정리] 0121 자바 국비교육_ Javascript  (0) 2021.02.07

'기록/자바_국비' Related Articles

티스토리툴바