VS code-JQuery

최성현·2023년 7월 26일

Effect _.each children fadeIn()fadeOut fadeTo()fadeToggle()find hide()next rotate(xdeg)scale(x y)selectorTag show()siblings()slideDown()slideToggle()slideUp()toggle transform translate(x y)

JQuery

목록 보기

5/7

inputTag 복습

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        #result{
            margin-top: 30px;
            width: 500px;
            height: 300px;
            padding: 10px;
            border: 2px solid gray;
        }
    </style>
    <script>
        $(function(){
            
            //핸드폰 4글자 입력시 다음칸으로 자동 이동
            $("#hp2").keyup(function(){

                if($(this).val().length==4)
                    $("#hp3").focus();
            });


            //버튼 클릭시 정보 읽어서 출력
            $("#btn1").click(function(){
            
                var s="";
                s+="이름: "+$("#name").val()+"<br>";
                s+="핸드폰: "+$("#hp1 option:selected").text()+"-"+
                    $("#hp2").val()+"-"+$("#hp3").val()+"<br>";

                var fcolor=$("input[name='fcolor']:checked").val();
                s+="글자색: "+fcolor+"<br>";

                s+="성별: "+$("input[name='gender']").val()+"<br>";

                //자격증
                var lic="";

                $("input[name=lic]:checked").each(function(i,ele){
                    
                    lic+=$(this).val()+"&nbsp;";
                });

                s+="자격증: "+(lic==""?"없음":lic);
                
                $("#result").html(s).css("color",fcolor);
            });
        });
    </script>
</head>
<body>
    <b>폼태그 복습</b>
    <table class="table table-bordered" style="width: 500px;">
        <tr>
            <th>이름</th>
            <td>
                <input type="text" id="name" style="width: 150px;">
            </td>
        </tr>

        <tr>
            <th>연락처</th>
            <td>
                <select id="hp1">
                    <option>02</option>
                    <option>031</option>
                    <option>010</option>
                    <option>017</option>
                    <option>019</option>
                </select>
                <b>-</b>
                <input type="text" id="hp2" maxlength="4" size="4"> <!-- 4자리만 들어가게 -->
                <b>-</b>
                <input type="text" id="hp3" maxlength="4" size="4">
            </td>
        </tr>

        <tr>
            <th>글자색</th>
            <td>
                <input type="radio" name="fcolor" value="blue">파랑색
                <input type="radio" name="fcolor" value="green">초록색
                <input type="radio" name="fcolor" value="magenta">진핑크
                <input type="radio" name="fcolor" value="orange" checked>오렌지
            </td>
        </tr>

        <tr>
            <th>성별</th>
            <td>
                <input type="radio" name="gender" value="남자" checked>남자
                <input type="radio" name="gender" value="여자">여자
            </td>
        </tr>

        <tr>
            <th>자격증</th>
            <td>
                <input type="checkbox" name="lic" value="운전면허" checked>운전면허
                <input type="checkbox" name="lic" value="정보처리기사">정보처리기사
                <input type="checkbox" name="lic" value="컴퓨터활용능력">컴퓨터활용능력
                <input type="checkbox" name="lic" value="산업기사">산업기사
            </td>
        </tr>

        <tr>
            <td colspan="2" align="center">
                <button type="button" class="btn btn-outline-success" id="btn1">개인정보출력</button>
            </td>
        </tr>
    </table>

    <div id="result"></div>
</body>
</html>

transform

사각형의 각이 바뀌는 것을 transform이라고 한다

rotate(xdeg)

x도 기울인다

45도

$(이미지).css("transform","rotate(45deg)"); //deg 각도

제자리

$(이미지).css("transform","rotate(45deg)"); //deg 각도

반대 45도

$(이미지).css("transform","rotate(-45deg)");

scale(x,y)

x : 가로 몇배 y: 세로 몇배

2배

$(이미지).css("transform","scale(2,2)"); //scale(가로,세로) 2배

원래대로

$(this).css("transform","scale(1,1)"); //원래대로

translate(x,y)

오른쪽으로 이동(왼쪽은 음수)

50px만큼 오른쪽이도

$(이미지).css("transform","translate(50px,50px)");

원래대로

$(this).css("transform", "translate(0px,0px)");

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 사각형의 각이 바뀌는 것을 transform이라고 한다 -->
    <img src="../연예인사진2/권은비2.jpeg">
    <img src="../연예인사진2/예나2.jpeg">
    <img src="../연예인사진2/냥뇽녕냥2.jpeg">
    <img src="../연예인사진2/안유진2.jpeg">

    <script>
        $("img:eq(0)").hover(function(){
            
            //45도 회전(deg,rad,grad,turn(1회전,360deg)등이 있다)
            $(this).css("transform","rotate(45deg)"); //deg 각도
        },function(){
            
            $(this).css("transform","rotate(0deg)"); //제자리
        });

        $("img:eq(1)").hover(function(){
            
            $(this).css("transform","rotate(-45deg)");
        },function(){
            $(this).css("transform","rotate(0deg)");
        });

        //transform scale(확대,축소)
        $("img:eq(2)").hover(function(){

            $(this).css("transform","scale(2,2)"); //scale(가로,세로) 2배
        },function(){
            $(this).css("transform","scale(1,1)"); //원래대로
        });

        //translate(50px) 오른쪽으로 50px(x축)이동(왼쪽:음수)
        $("img:eq(3)").hover(function(){

            $(this).css("transform","translate(50px,50px)");
        },function(){
            $(this).css("transform", "translate(0px,0px)");
        });

    </script>
</body>
</html>

effect

fast 빠르게 slow 느리게

hide()

숨긴다

$("#btn1").click(function(){
                
 	$("#msg").hide('fast');
	$("#img1").hide('slow');
});

show()

보여준다

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

	$("#msg").show('slow');
	$("#img1").show('fast');
});

toggle()

보여주고 숨긴다

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

	$("#msg").toggle('slow');
	$("#img1").toggle('slow');
});

slideUp()

슬라이드해서 숨기기

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

	$("#msg").slideUp('slow');
	$("#img1").slideUp('fast');
});

slideDown()

슬라이드해서 보이기

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

	$("#msg").slideDown();
	$("#img1").slideDown();
});

slideToggle()

슬라이드해서 숨기기 보이기

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

	$("#msg").slideToggle();
	$("#img1").slideToggle();
});

fadeOut()

천천히 숨기기

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

	$("#msg").fadeOut();
	$("#img1").fadeOut();
});

fadeIn()

천천히 보이기

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

	$("#msg").fadeIn();
	$("#img1").fadeIn();
});

fadeToggle()

천천히 숨기기 보이기

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

	$("#msg").fadeToggle();
	$("#img1").fadeToggle();
});

fadeTo()

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

	// fadeTo(3000,0.5) (3초,투명도 0.5)
	$("#msg").fadeTo(3000,0.5,function(){
		$("#msg").css("border","10px dotted pink");
    });
    
    // fadeTo(2000,0.2) (2초,투명도 0.2)
    $("#img1").fadeTo(2000,0.2,function(){
    	$("#img1").css("opacity","1").css("border","5px dotted cadetblue"); //("opacity", "1")투명도 원래대로
    });

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        #msg{
            font-size: 2em;
            font-family: 'Cute Font';
            position: absolute;
            left: 100px;
            top: 200px;
        }

        #img1{
            position: absolute;
            left: 500px;
            top: 150px;
        }

        button{
            width: 100px;
            height: 40px;
        }
    </style>
    <script>
        $(function(){

            // fast 빠르게 slow 느리게
            $("#btn1").click(function(){
                
                $("#msg").hide('fast');
                $("#img1").hide('slow');
            });

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

                $("#msg").show('slow');
                $("#img1").show('fast');
            });

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

                $("#msg").toggle('slow');
                $("#img1").toggle('slow');
            });

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

                $("#msg").slideUp('slow');
                $("#img1").slideUp('fast');
            });

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

                $("#msg").slideDown();
                $("#img1").slideDown();
            });

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

                $("#msg").slideToggle();
                $("#img1").slideToggle();
            });

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

                $("#msg").fadeOut();
                $("#img1").fadeOut();
            });

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

                $("#msg").fadeIn();
                $("#img1").fadeIn();
            });

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

                $("#msg").fadeToggle();
                $("#img1").fadeToggle();
            });

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

                // fadeTo(3000,0.5) (3초,투명도 0.5)
                $("#msg").fadeTo(3000,0.5,function(){
                    $("#msg").css("border","10px dotted pink");
                });
                // fadeTo(2000,0.2) (2초,투명도 0.2)
                $("#img1").fadeTo(2000,0.2,function(){
                    $("#img1").css("opacity","1").css("border","5px dotted cadetblue"); //("opacity", "1")투명도 원래대로
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn1" class="btn btn-info">Hide</button>
    <button type="button" id="btn2" class="btn btn-info">Show</button>
    <button type="button" id="btn3" class="btn btn-info">Toggle</button>
    <br><br>
    <button type="button" id="btn4" class="btn btn-info">SlideUp</button>
    <button type="button" id="btn5" class="btn btn-info">SlideDown</button>
    <button type="button" id="btn6" class="btn btn-info">SlideToggle</button>
    <br><br>
    <button type="button" id="btn7" class="btn btn-info">FadeOut</button>
    <button type="button" id="btn8" class="btn btn-info">FadeIn</button>
    <button type="button" id="btn9" class="btn btn-info">FadeToggle</button>
    <button type="button" id="btn10" class="btn btn-info">FadeTo</button>
    
    
    

    <div id="msg">오늘 벌써 수요일!!!</div>
    <img src="../flower_ani/s5.JPG" id="img1">
</body>
</html>

effect 문제

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        #toy ul li img{
            width: 150px;
        }

        li{
            list-style: none;
            float: left;
            cursor: pointer;
        }

        #logo{
            position: absolute;
            left: 480px;
            top: 200px;
        }
        #toy{
            margin: 0 auto;
            width: 1000px;
            margin-top: 400px;
        }
    </style>
    <script>
        $(function(){
            /*
            $("img:first").click(function(){
                
                $("img:gt(0)").fadeTo(3000,0.5, function(){

                    $("img:gt(0)").css("opacity","1").css("border","3px dotted orange");
                });
            })

            $("img:eq(1)").click(function(){
                
                $("img:eq(1)").slideUp();
            });

            $("img:eq(2)").click(function(){
                
                $("img:eq(2)").fadeOut();
            });

            $("img:eq(3)").click(function(){
                
                $("img:eq(3)").hide();
            });

            $("img:eq(4)").click(function(){
                
                $("img:eq(4)").slideUp();
            });

            $("img:eq(5)").click(function(){
                
                $("img:eq(5)").fadeOut();
            });

            $("img:eq(6)").click(function(){
                
                $("img:eq(6)").hide();
            });
            */
            
            $("li img").click(function(){

                $(this).fadeOut();
            });

            $("#logo").click(function(){
                $("li img").fadeIn().css('border','3px dashed cadetblue');
            })
        });
    </script>
</head>
<body>
    <div>
        <!-- 제목용 이미지 -->
        <div id="logo"><img src="../logoImg/logo.png"></div>
        <div id="toy">
            <ul>
                <li><img src="../logoImg/toy01.png"></li>
                <li><img src="../logoImg/toy02.png"></li>
                <li><img src="../logoImg/toy03.png"></li>
                <li><img src="../logoImg/toy04.png"></li>
                <li><img src="../logoImg/toy05.png"></li>
                <li><img src="../logoImg/toy06.png"></li>
            </ul>
        </div>
    </div>
</body>
</html>

selectorTag

parent(): 부모태그
siblings(): 형제태그
children(): 자식태그

siblings()

//div one의 div hana의 형제들
$("div.one div.hana").siblings().css("color","red");

children()

//div의 자식중 div hana라는 애들
$("div").children("div.hana").css("text-decoration","underline")

next()

//div hana의 다음다음
$("div.hana").next().next().css("background-color","orange")

find()

//two에 있는 h3에 보더
$("div.two").find("h3").css("border","2px solid green")
//==$("div.two").children("h3").css("border","2px solid green")

이벤트

        //one이라는 div 중 div 태그를 숨기기(자기자식 div, 형제자식 div)
        $("div.one").click(function(){

            //find는 하위단만 가능
            //$(this).find("div").hide('slow');

            //div one 의 형제(one하고 같은)의 div를 숨김 
            $(this).siblings().find("div").hide();
        });

        //two라는 div중에서 h3태그를 숨기기(자기자식 h3, 형제자식 h3)
        $("div.two").click(function(){

            $(this).find("h3").hide();
            $(this).siblings().find("h3").hide();
        });

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="one">
        첫번째 div
        <div class="hana">div 하나</div>
        <div>둘</div>
        <div>셋</div>
        <h3>h3 Tag</h3>
        <h4>h4 Tag</h4>
    </div>

    <div class="two">
        두번째 div
        <div class="hana">div 하나</div>
        <div>둘</div>
        <div>셋</div>
        <h3>h3 Tag</h3>
        <h4>h4 Tag</h4>
    </div>

    <script>
        //parent(): 부모태그
        //siblings(): 형제태그
        //children(): 자식태그

        //div one의 div hana의 형제들
        $("div.one div.hana").siblings().css("color","red");

        //div의 자식중 div hana라는 애들
        $("div").children("div.hana").css("text-decoration","underline")

        //div hana의 다음다음
        $("div.hana").next().next().css("background-color","orange")

        //two에 있는 h3에 보더
        $("div.two").find("h3").css("border","2px solid green")
        //==$("div.two").children("h3").css("border","2px solid green")


        //이벤트
        //one이라는 div 중 div 태그를 숨기기(자기자식 div, 형제자식 div)
        $("div.one").click(function(){

            //find는 하위단만 가능
            //$(this).find("div").hide('slow');

            //div one 의 형제(one하고 같은)의 div를 숨김 
            $(this).siblings().find("div").hide();
        });

        //two라는 div중에서 h3태그를 숨기기(자기자식 h3, 형제자식 h3)
        $("div.two").click(function(){

            $(this).find("h3").hide();
            $(this).siblings().find("h3").hide();
        });
    </script>
</body>
</html>

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        ul li{
            float: left;
            cursor: pointer;
            list-style: none;
            border: 2px solid black;
            margin: 10px;
            margin-left: 125px;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 35px;
            font-family: 'Cute Font';
            font-size: 20pt;
            border-radius: 10px;
            margin-top: 60px;
        }

        .color{
            background-color: cadetblue;
            box-shadow: 5px 5px 5px gray;
        }
    </style>
    <script>
        $(function(){
            $("ul li").hover(function(){
                $(this).addClass("color");
            },function(){
                $(this).removeClass("color");
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>질문게시판</li>
        <li>Q & A</li>
        <li>공지사항</li>
        <li>오시는길</li>
    </ul>
</body>
</html>

게시판 본문 열면 해당 하위 메뉴 보이고 나머지 본문의 하위 메뉴 안열기

	$(function(){

            //모든 submenu 숨기기
            $("ul.submenu").hide();

            //이벤트
            //메인메뉴명을 클릭하면 해당메뉴의 서브메뉴가 나타난다
            //다른 서브메뉴는 모두 숨기고 해당 클릭한 메인메뉴에 대한 서브메뉴만 나타난다
            $(".menu li").click(function(){
            //$("ul.menu>li").click(function(){ 선생님 버전

                $(this).children().slideToggle('fast');
                //$(this).find('ul.submenu').show(); 선생님 버전
                $(this).siblings().children().slideUp('fast');
                //$(this).siblings().find('ul.submenu').hide(); 선생님 버전
            });
        });

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        div.bts{
            position: absolute;
            left: 300px;
            width: 250px;
            height: 300px;
            border: 2px solid gray;
            top: 100px;
            border-radius: 30px;
        }

        ul li{
            list-style: none;
        }

        ul.menu>li{
            font-size: 2em;
            font-family: 'Cute Font';
            font-weight: bold;
            cursor: pointer;
        }

        ul.submenu>li{
            font-size: 20px;
            font-family: 'Cute Font';
        }

        ul.submenu>li:hover{
            background-color: lightblue;
            
        }
    </style>
    <script>
        $(function(){

            //모든 submenu 숨기기
            $("ul.submenu").hide();

            //이벤트
            //메인메뉴명을 클릭하면 해당메뉴의 서브메뉴가 나타난다
            //다른 서브메뉴는 모두 숨기고 해당 클릭한 메인메뉴에 대한 서브메뉴만 나타난다
            $(".menu li").click(function(){
            //$("ul.menu>li").click(function(){ 선생님 버전

                $(this).children().slideToggle('fast');
                //$(this).find('ul.submenu').show(); 선생님 버전
                $(this).siblings().children().slideUp('fast');
                //$(this).siblings().find('ul.submenu').hide(); 선생님 버전
            });
        });
    </script>
</head>
<body>
    <div class="bts">
        <ul class="menu">
            <li>
                File
                <ul class="submenu">
                    <li>New</li>
                    <li>Open</li>
                    <li>Save</li>
                    <li>Close</li>
                </ul>
            </li>

            <li>
                Edit
                <ul class="submenu">
                    <li>Copy</li>
                    <li>Cut</li>
                    <li>Find</li>
                    <li>Delete</li>
                </ul>
            </li>

            <li>
                Help
                <ul class="submenu">
                    <li>Search</li>
                    <li>Install</li>
                    <li>Market</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        .one{
            color: cadetblue;
            font-family: 'Cute Font';
            cursor: pointer;
        }
        .one>b{
            font-size: 3em;
        }

        .two{
            color: orange;
            font-family: 'Diphylleia';
            cursor: pointer;
        }
        .two>b{
            font-size: 1.9em;
        }

        .three{
            color: blueviolet;
            font-family: 'Dokdo';
            cursor: pointer;
        }
        .three>b{
            font-size: 2.6em;
        }

        div.ans>h5{
            text-indent: 30px; /* 들여쓰기 */
        }
    </style>
    <script>
        $(function(){
            /*
            $("div.one>div").hide();
            $("div.two>div").hide();
            $("div.three>div").hide();

            $("div.one").click(function(){
                $(this).children('.ans').slideToggle();
                $(this).siblings().find('div').hide();
            });

            $("div.two").click(function(){
                $(this).children('.ans').slideToggle();
                $(this).siblings().find('div').hide();
            });

            $("div.three").click(function(){
                $(this).children('.ans').slideToggle();
                $(this).siblings().find('div').hide();
            });
            */

            //선생님 버전
            $("div.ans").hide();

            $("div.board>b").click(function(){

                $(this).next().slideToggle(); //next()==siblings()

                //클릭한 곳의 부모(div.board)의 형제들
                $(this).parent().siblings().find("div.ans").hide();
            });
        });
    </script>
</head>
<body>
    <div class="board one">
        <b>게시판 내용_1</b>
        <div class="ans">
            <h5>게시판 내용_1에 대한 댓글1</h5>
            <h5>게시판 내용_1에 대한 댓글2</h5>
            <h5>게시판 내용_1에 대한 댓글3</h5>
        </div>
    </div>

    <div class="board two">
        <b>게시판 내용_2</b>
        <div class="ans">
            <h5>게시판 내용_2에 대한 댓글1</h5>
            <h5>게시판 내용_2에 대한 댓글2</h5>
            <h5>게시판 내용_2에 대한 댓글3</h5>
        </div>
    </div>

    <div class="board three">
        <b>게시판 내용_3</b>
        <div class="ans">
            <h5>게시판 내용_3에 대한 댓글1</h5>
            <h5>게시판 내용_3에 대한 댓글2</h5>
            <h5>게시판 내용_3에 대한 댓글3</h5>
        </div>
    </div>
</body>
</html>

배열 .each문

.each

	var data=["red","orange","gray","blue","pink"];
        
        //$.each(배열명,콜백함수(element 값 필수))
        $.each(data,function(i,ele){ //i:인덱스 ele:엘리먼트(i에 해당하는 아이템값)

            var s="<h2 style='color:"+ele+"; width:200px;'>"+ele+"</h2>"; //뒤 ele는 출력되는 문장이 있어야하기 때문에 색이름으로 출력
            document.write(s);
        });

.each 다른 버전

	var info=[{name:"김영준",hp:"010-1111-2222",addr:"서울시"},
                    {name:"송주영",hp:"010-3333-4444",addr:"제주시"},
                    {name:"최진평",hp:"010-5555-6666",addr:"경기도"}];
        
        var s="";

        $.each(info,function(i,elt){

            //s에 div 누적시켜서 스타일 적용
            s+="<div class='box'>";
            s+="이름: "+elt.name+"<br>";
            s+="핸드폰: "+elt.hp+"<br>";
            s+="주소: "+elt.addr+"<br>";
            s+="</div>";
        });

        $("#show").html(s);

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        div.box{
            border: 5px solid green;
            margin-top: 20px;
            width: 300px;
            height: 130px;
            padding: 20px;
            font-family: 'Cute Font';
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <h3>배열반복시 사용하는 $.each</h3>
    <script>
        var data=["red","orange","gray","blue","pink"];
        
        //$.each(배열명,콜백함수(element 값 필수))
        $.each(data,function(i,ele){ //i:인덱스 ele:엘리먼트(i에 해당하는 아이템값)

            var s="<h2 style='color:"+ele+"; width:200px;'>"+ele+"</h2>"; //뒤 ele는 출력되는 문장이 있어야하기 때문에 색이름으로 출력
            document.write(s);
        });
    </script>

    <div id="show"></div>
    <script>
        var info=[{name:"김영준",hp:"010-1111-2222",addr:"서울시"},
                    {name:"송주영",hp:"010-3333-4444",addr:"제주시"},
                    {name:"최진평",hp:"010-5555-6666",addr:"경기도"}];
        
        var s="";

        $.each(info,function(i,elt){

            //s에 div 누적시켜서 스타일 적용
            s+="<div class='box'>";
            s+="이름: "+elt.name+"<br>";
            s+="핸드폰: "+elt.hp+"<br>";
            s+="주소: "+elt.addr+"<br>";
            s+="</div>";
        });

        $("#show").html(s);
    </script>
</body>
</html>

0726 숙제

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        div.box{
            float: left;
            border: 2px groove pink;
            margin-left: 65px;
            margin-top: 15px;
        }

        img.large{
            border: 3px groove blue;
            width: 400px;
            height: 600px;
            margin-left: 500px;
            margin-top: 30px;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <!-- show에 배열반복문 이용해서 이미지 5개 띄어준다
        작은 이미지는 css로 작게 5개 예쁘게 배치한다
        transform을 이용하여 작은 이미지 가면 회전 벗어나면 제자리
        큰이미지는 작은 사진 가져온 것 중 첫번째이미지로 초기이미지 둔다
        큰이미지 도 예쁘게 css
        작은이미지 클릭시 큰이미지 나오게-->
    <div id="show"></div>
    <img src="" class="large">
    <script>
        var imgarr=[{name:"../연예인사진2/김태리1.jpeg"},
                    {name:"../연예인사진2/안유진1.jpeg"},
                    {name:"../연예인사진2/김태리3.jpeg"},
                    {name:"../연예인사진2/예나2.jpeg"},
                    {name:"../연예인사진2/조미연3.jpeg"}];
        
        var s="";
        $.each(imgarr,function(i,ele){
            s+="<div class='box'>"+'<img src="'+ele.name+'">'+"</div>";
        });

        $("#show").html(s);

        $("div.box").hover(function(){
            $(this).css("transform","rotate(45deg)");
        },function(){
            $(this).css("transform","rotate(0deg)");
        });

        $("img.large").attr("src",imgarr[0].name)        

        $("div.box img").click(function(){
            $("img.large").attr("src",$(this).attr("src"));
        });
    </script>
</body>
</html>

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

이전 포스트

VS code-JQuery

다음 포스트

VS code-JQuery

JQuery

inputTag 복습

본문

transform

rotate(xdeg)

scale(x,y)

translate(x,y)

본문

effect

hide()

show()

toggle()

slideUp()

slideDown()

slideToggle()

fadeOut()

fadeIn()

fadeToggle()

fadeTo()

본문

effect 문제

본문

selectorTag

siblings()

children()

next()

find()

이벤트

본문

menu 복습

본문

menu effect 적용

게시판 본문 열면 해당 하위 메뉴 보이고 나머지 본문의 하위 메뉴 안열기

본문

menu effect 적용 문제

배열 .each문

.each

.each 다른 버전

본문

0726 숙제

본문

VS code-JQuery

VS code-JQuery

0개의 댓글