Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

230918_jQuery 강의 본문

대덕인재개발원_Front End

230918_jQuery 강의

Unlimited00 2023. 9. 18. 08:35

[jQueryTest19.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="제이쿼리19" />
        <meta name="keywords" content="대덕인재개발원, html, 제이쿼리19" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>제이쿼리19</title>
        <link href="css/style04.css" rel="stylesheet" />
        <script src="js/jquery-3.7.1.min.js"></script>
        <style>
            div {
                border: 3px dotted yellowgreen;
                margin: 20px;
                padding: 20px;
                font-size: 1.2rem;
                word-break: break-all;
            }
            input[type=button],
            button[type=button] {
                display: inline-block;
                padding: 5px 10px;
                text-align: center;
                font-size: 1.2em;
                font-weight: 700;
                background-color: blue;
                color: white;
                border: none;
                border-radius: 4px;
                margin-right: 10px;
                cursor: pointer;
            }
        </style>
        <script>
            $(function(){
                
                // 조사하기 버튼 클릭시
                $("#btnview").click(function(){
                    $("#info").empty();
                    // 입력한 내용 가져오기
                    var nameVal = $("#user").val();
//                    console.log(nameVal);
                    var gendVal = $(".gend:checked").val();
//                    console.log(gendVal);
                    var introval = $("#intro").val(); // 엔터기호가 포함 (\r\n)
                    introval = introval.replace(/\n/g, "<br />");
//                    console.log(introval);
                    var workVal = $("#work option:selected").val();
//                    console.log(workVal);
                    
                    var str = `이름 : ${nameVal} <br />`;
                    str += `성별 : ${gendVal} <br />`;
                    str += `소개 : ${introval} <br />`;
                    str += `직업 : ${workVal} <br />`;
                    
                    $("#info").append(str);
                });
                
                // 이름변경 버튼 클릭시
                $("#btnchange").click(function(){
                    // 이름을 입력받는다.
                    var nameVal = window.prompt("이름을 입력하세요...");
                    // 입력받은 이름값으로 id=user의 값을 변경한다.
                    $("#user").val(nameVal);
                });
                
            });
        </script>
    </head>
    <body>

        <hr color="red" />
        
        <h1>
            jQuery 실습 19-1
            <br />
            조작관련(Manipulation) 메소드들
            <br />
            form의 정보 가져오기
            <br />
            val() : input, textarea, select/option 에서 입력하거나 선택한 값을 가져올 때
        </h1>
        
        <br />
<!--        <input id="btn1" type="button" value="확인" />-->
        <br />
        
        <div id="result1">
            <form>
<!--            <form action="maniputInput.jsp" method="get">-->
                <label for="user">이름</label>
                <input type="text" id="user" value="korea"><br>
                
                <label>성별</label>
                <input type="radio" class="gend" name="gend" value="남자" checked>남자
                <input type="radio" class="gend" name="gend" value="여자">여자<br>
                
                <label for="intro">소개</label>
                <textarea id="intro" cols="40" rows="4"></textarea> <br>
                
                <label for="work">직업</label>
                <select id="work" name="work">
                    <option value="programmer">프로그래머</option>
                    <option value="progammer" selected>프로게이머</option>
                    <option value="whitehand">백수</option>
                </select><br><br>
                
                <button type="button" id="btnview">조사하기</button>
                <button type="button" id="btnchange">이름변경</button>
            </form>
        </div>
        
        <div id="info"></div>
        
        <hr color="red" />
   
    </body>
</html>

[jQueryTest20.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="제이쿼리20" />
        <meta name="keywords" content="대덕인재개발원, html, 제이쿼리20" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>제이쿼리20</title>
        <link href="css/style04.css" rel="stylesheet" />
        <script src="js/jquery-3.7.1.min.js"></script>
        <style>
            div, p {
                border: 3px dotted yellowgreen;
                margin: 20px;
                padding: 20px;
                font-size: 1.2rem;
                word-break: break-all;
            }
            input[type=button],
            button[type=button] {
                display: inline-block;
                padding: 5px 10px;
                text-align: center;
                font-size: 1.2em;
                font-weight: 700;
                background-color: blue;
                color: white;
                border: none;
                border-radius: 4px;
                margin-right: 10px;
                cursor: pointer;
            }
            div, p {
                overflow: auto;
            }
            img {
                display: block;
                width: 20%;
                height: 100px;
                float: left;
            }
        </style>
        <script>
            
            var arr = ["Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "computer1.jpg", "computer2.jpg", "computer3.jpg"];
            
            var rand = null;
            
            $(function(){
                
                $("#append").click(function(){
                    rand = Math.floor(Math.random() * arr.length);
                    // 이미지 태그 생성
                    var imgTag1 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    // result1 추가
//                    $("#result1").append(imgTag1);
                    $(imgTag1).appendTo($("#result1"));
                });
                
                $("#prepend").click(function(){
                    rand = Math.floor(Math.random() * arr.length);
                    // 이미지 태그 생성
                    var imgTag2 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    // result2 추가
//                    $("#result2").prepend(imgTag2);
                    $(imgTag2).prependTo($("#result2"));
                });
                
                $("#before").click(function(){
                    rand = Math.floor(Math.random() * arr.length);
                    // 이미지 태그 생성
                    var imgTag3 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    // result3 추가
//                    $("#result3").before(imgTag3);
                    imgTag3.insertBefore($("#result3"));
                });
                
                $("#after").click(function(){
                    rand = Math.floor(Math.random() * arr.length);
                    // 이미지 태그 생성
                    var imgTag4 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    // result4 추가
//                    $("#result4").after(imgTag4);
                    imgTag4.insertAfter($("#result4"));
                });
                
                $("#append2").click(function(){
                    rand = Math.floor(Math.random() * arr.length);
                    
                    // 이미지 태그 생성
                    var imgTag5 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    $("#result5").append(imgTag5);
                });
                
                $("#prepend2").click(function(){
                     rand = Math.floor(Math.random() * arr.length);
                    
                    // 이미지 태그 생성
                    var imgTag6 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    $("#result6").prepend(imgTag6);
                });
                
                $("#before2").click(function(){
                     rand = Math.floor(Math.random() * arr.length);
                    
                    // 이미지 태그 생성
                    var imgTag7 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    $("#result7").before(imgTag7);
                });
                
                $("#after2").click(function(){
                     rand = Math.floor(Math.random() * arr.length);
                    
                    // 이미지 태그 생성
                    var imgTag8 = $("<img />", {
                        "src" : "/images/" + arr[rand],
                        "alt" : arr[rand],
                        "click" : function(){
                            $(this).css({
                                "border" : "3px double green"
                            });
                        }
                    }); // img 끝
                    
                    $("#result8").after(imgTag8);
                });
                
            });
        </script>
    </head>
    <body>

        <hr color="red" />
        
        <h1>
            jQuery 실습 20-1
        </h1>
        
        <br />
        <input id="append" type="button" value="append" />
        <input id="prepend" type="button" value="prepend" />
        <input id="before" type="button" value="before" />
        <input id="after" type="button" value="after" />
        <br />
        
        <div id="result1"></div>
        <div id="result2"></div>
        <div id="result3"></div>
        <div id="result4"></div>
        
        <hr color="red" />
        
        <h1>
            jQuery 실습 20-2
        </h1>
        
        <br />
        <input id="append2" type="button" value="append" />
        <input id="prepend2" type="button" value="prepend" />
        <input id="before2" type="button" value="before" />
        <input id="after2" type="button" value="after" />
        <br />
        
        <p id="result5">코알라</p>
        <p id="result6">펭귄</p>
        <p id="result7">국화</p>
        <p id="result8">해파리</p>
        
        <hr color="red" />
   
    </body>
</html>

[jQueryTest21.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="제이쿼리21" />
        <meta name="keywords" content="대덕인재개발원, html, 제이쿼리21" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>제이쿼리21</title>
        <link href="css/style04.css" rel="stylesheet" />
        <script src="js/jquery-3.7.1.min.js"></script>
        <style>
            div {
                border: 3px dotted yellowgreen;
                margin: 20px;
                padding: 20px;
                font-size: 1.2rem;
                word-break: break-all;
            }
            input[type=button],
            button[type=button] {
                display: inline-block;
                padding: 5px 10px;
                text-align: center;
                font-size: 1.2em;
                font-weight: 700;
                background-color: blue;
                color: white;
                border: none;
                border-radius: 4px;
                margin-right: 10px;
                cursor: pointer;
            }
            #result1 {
                background-color: pink;
            }
            #result2 {
                background-color: yellow;
            }
            p {
                border: 3px solid red;
                padding: 10px;
            }
        </style>
        <script>
            $(function(){
                
                $("#empty").click(function(){
                    $("#result1").empty();
                });

                $("#remove").click(function(){
                    $("#result2").remove();
                });

                $(".pp").click(function(){
                    $(this).css({
                        fontSize : "+=3px"
                    });
                });

                $("#clone").click(function(){
//                    var p3Tag = $("#p3").clone();
//                    $("#result3").append(p3Tag);
                    $("#p3").clone().appendTo("#result3");
                });

                $("#cloneTrue").click(function(){
//                    var p4Tag = $("#p4").clone(true);
//                    $("#result4").append(p4Tag);
                    $("#p4").clone(true).appendTo("#result4");
                });
                
            });
        </script>
    </head>
    <body>

        <hr color="red" />
        
        <h1>
            jQuery 실습 21-1
            <br />
            조작관련 (삭제 복사) 메소드
        </h1>
        
        <br />
        <input id="empty" type="button" value="empty" />
        <input id="remove" type="button" value="remove" />
        <br />
        
        <div id="result1">
            <p>result1</p>
            <p>무궁화 꽃이 피었습니다.</p>
        </div>
        <div id="result2">
            <p>result2</p>
            <p>무궁화 꽃이 피었습니다.</p>
        </div>
        
        <hr color="red" />
        
        <h1>
            jQuery 실습 21-2
            <br />
            조작관련 (삭제 복사) 메소드
        </h1>
        
        <br />
        <input id="clone" type="button" value="clone" />
        <input id="cloneTrue" type="button" value="cloneTrue" />
        <br />
        <br />
        
        <p id="p3" class="pp">무궁화 꽃이 피었습니다1 - 클릭하세요</p>
        <p id="p4" class="pp">무궁화 꽃이 피었습니다2 - 클릭하세요</p>
        
        <div id="result3"></div>
        <div id="result4"></div>
        
        <hr color="red" />
   
    </body>
</html>

[jQueryTest22.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="제이쿼리22" />
        <meta name="keywords" content="대덕인재개발원, html, 제이쿼리22" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>제이쿼리22</title>
        <link href="css/style04.css" rel="stylesheet" />
        <script src="js/jquery-3.7.1.min.js"></script>
        <style>
            div {
                border: 3px dotted yellowgreen;
                margin: 20px;
                padding: 20px;
                font-size: 1.2rem;
                word-break: break-all;
            }
            input[type=button],
            button[type=button] {
                display: inline-block;
                padding: 5px 10px;
                text-align: center;
                font-size: 1.2em;
                font-weight: 700;
                background-color: blue;
                color: white;
                border: none;
                border-radius: 4px;
                margin-right: 10px;
                cursor: pointer;
            }
            .siblings * { 
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
            .start {
                color: blue;
            }
            .ancestors * {
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
        </style>
        <script>
            $(function(){
                
                $("#next").click(function(){
                    $("#result1 li.start").next().css({
                        "color": "red",
                        "border": "2px solid red"
                    });
                });
                
                $("#nextAll").click(function(){
                    $("#result2 li.start").nextAll().css({
                        "color": "red",
                        "border": "2px solid red"
                    });
                });
                
                $("#nextUntil").click(function(){
                    $("#result3 li.start").nextUntil("li.stop").css({
                        "color": "red",
                        "border": "2px solid red"
                    });
                });
                
                $("#parent").click(function(){
                    $("#result4 span").parent().css({
                        "color": "red",
                        "border": "2px solid red"
                    });
                });
                
                $("#parents").click(function(){
                    $("#result5 span").parents().css({
                        "color": "red",
                        "border": "2px solid red"
                    });
                });
                
                $("#parentsUntil").click(function(){
                    $("#result6 span").parentsUntil("div").css({
                        "color": "red",
                        "border": "2px solid red"
                    });
                });
                
                $("#find").click(function(){
                    $("#result7 ul").find("span").css({
                        "color": "red",
                        "border": "2px solid red"
                    });
                });
                
            });
        </script>
    </head>
    <body>

        <hr color="red" />
        
        <h1>
            jQuery 실습 22-1
            <br />
            필터링 메소드, 찾기탐색 메소드
        </h1>
        
        <br />
        <input id="next" type="button" value="next" />
        <input id="nextAll" type="button" value="nextAll" />
        <input id="nextUntil" type="button" value="nextUntil" />
        <input id="parent" type="button" value="parent" />
        <input id="parents" type="button" value="parents" />
        <input id="parentsUntil" type="button" value="parentsUntil" />
        <input id="find" type="button" value="find" />
        <br />
        
        <div id="result1">
            <div style="width:500px;" class="siblings">
                <ul>ul (parent)
                    <li>li (sibling)</li>
                    <li>li (sibling)</li>
                    <li class="start">li (sibling with class name "start")</li>
                    <li>li (the next sibling of li with class name "start")</li>
                    <li>li (sibling)</li>
                </ul>
            </div>
        </div>
        
        <div id="result2">
            <div style="width:500px;" class="siblings">
                <ul>ul (parent)
                    <li>li (sibling)</li>
                    <li>li (sibling)</li>
                    <li class="start">li (sibling with class name "start")</li>
                    <li>li (the next sibling of li with class name "start")</li>
                    <li>li (the next sibling of li with class name "start")</li>
                    <li>li (the next sibling of li with class name "start")</li>
                </ul>
            </div>
        </div>
        
        <div id="result3">
            <div style="width:500px;" class="siblings">
                <ul>ul (parent)
                    <li>li (sibling)</li>
                    <li>li (sibling)</li>
                    <li class="start">li (sibling with class name "start")</li>
                    <li>li (the next sibling of li with class name "start")</li>
                    <li>li (the next sibling of li with class name "start")</li>
                    <li>li (the next sibling of li with class name "start")</li>
                    <li class="stop">li (sibling with class name "stop")</li>
                </ul>
            </div>
            <p>
                In this example, we return all next sibling elements between the li element with class name "start" and the li element with class name "stop".
            </p>
        </div>
        
        <div id="result4" class="ancestors">
            <div style="width:500px;">div (great-grandparent)
                <ul>ul (grandparent)
                    <li>li (direct parent)
                        <span>span</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div id="result5" class="ancestors">body (great-great-grandparent)
            <div style="width:500px;">div (great-grandparent)
                <ul>ul (grandparent)
                    <li>li (direct parent)
                        <span>span</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div id="result6" class="ancestors">body (great-great-grandparent)
            <div style="width:500px;">div (great-grandparent)
                <ul>ul (grandparent)
                    <li>li (direct parent)
                        <span>span</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div id="result7" class="ancestors">body (great-great-grandparent)
            <div style="width:500px;">div (great-grandparent)
                <ul>ul (grandparent)
                    <li>li (direct parent)
                        <span>span</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <hr color="red" />
   
    </body>
</html>

'대덕인재개발원_Front End' 카테고리의 다른 글

230920_jQuery 강의  (0) 2023.09.20
230919_jQuery 강의  (0) 2023.09.19
230915_jQuery 강의  (0) 2023.09.15
230914_jQuery 강의  (0) 2023.09.14
230913_jQuery 강의  (0) 2023.09.13
'대덕인재개발원_Front End' Related Articles more