VS code-JQuery

최성현·2023년 7월 25일

:even :odd addClass checkbox contains()copy first-child focus input is(":checked")option radio remove rgb 난수 select selector sum value 배열난수 현재날짜

JQuery

목록 보기

4/7

addClass 복습

본문

<!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>
        a{
            background-color: pink;
            cursor: pointer;
            border: 3px inset gray;
            box-shadow: 5px 5px 5px gray;
            margin-left: 10px;
            font-size: 15pt;
        }
        
        div{
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        div.a{
            font-size: 2em;
            font-family: '궁서체';
            color: green;
        }

        div.b{
            border: 10px groove gold;
            border-radius: 30px;
            box-shadow: 5px 5px 5px pink;
        }

        div.c{
            background-image: url("../연예인사진2/냥뇽녕냥6.jpeg");
            background-repeat: no-repeat;
            background-size: 150px 220px;
            background-position: center;
        }
    </style>
</head>
<body>
    <a>클래스 a만 추가</a>
    <a>클래스 b만 추가</a>
    <a>클래스 c만 추가</a>
    <a>클래스 a,b,c 모두 추가</a>
    <div>JQuery 공부중!!!</div>

    <script>
        $("a:eq(0)").click(function(){
            //다른 버튼 눌렀을 때 a만 추가하겠다
            $("div").addClass("a").removeClass("b c");
        });

        $("a:eq(1)").click(function(){
            $("div").addClass("b").removeClass("a c");
        });

        $("a:eq(2)").click(function(){
            $("div").addClass("c").removeClass("a b");
        });

        $("a:eq(3)").click(function(){
            $("div").addClass("a b c");
        });
    </script>
</body>
</html>

inputScore

input으로 입력칸 만들어주기

<table class="table table-bordered" style="width: 400px;">
        <tr>
            <th width="100">학생명</th>
            <td width="300">
                <input type="text" id="name" style="width: 120px;">
            </td>
        </tr>
</table>

value값 조건

//넣어진 value값이 숫자가 아니라면
if(isNaN(java) || java.length==0){
	alert("자바 점수는 숫자로만 입력해주세요");
    $("#java").focus();
    return;
}

계산

sum은 int로만 계산하기 때문에 String인 문자들을 변환해줘야함

var sum=parseInt(java)+parseInt(oracle)+parseInt(jq);

본문

<!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>
    <script>
        //결과출력 버튼을 누르면 자바 오라크 제이커리 점수 출력하고 총점, 평균도 출력
        //이름을 입력안했을시 alert으로 경고메세지
        //3과목의 점수가 숫자가 아닐 경우 alert으로 경고메세지
        //div에 결과출력시 css로 style도 꾸며준다
        $(function(){
    
            $("#btn").click(function(){

                var name=$("#name").val();
                var java=$("#java").val();
                var oracle=$("#oracle").val();
                var jq=$("#jquery").val();
                

                if(name.length==0)
                {
                    alert("이름을 입력해주세요");
                    //name으로 다시 돌아감
                    $("#name").focus();
                    return;
                }

                //넣어진 value값이 숫자가 아니라면
                if(isNaN(java) || java.length==0){
                    alert("자바 점수는 숫자로만 입력해주세요");
                    $("#java").focus();
                    return;
                }

                if(isNaN(oracle) || oracle.length==0){
                    alert("오라클 점수는 숫자로만 입력해주세요");
                    $("#oracle").focus();
                    return;
                }

                if(isNaN(jq) || jq.length==0){
                    alert("제이쿼리 점수는 숫자로만 입력해주세요");
                    $("#jquery").focus();
                    return;
                }


                //총점
                var sum=parseInt(java)+parseInt(oracle)+parseInt(jq);
                //평균
                var avg=sum/3;

                //출력
                var s="이름: "+name+"<br>";
                s+="자바점수: "+java+"<br>";
                s+="오라클점수: "+oracle+"<br>";
                s+="제이쿼리점수: "+jq+"<br>";
                s+="총점: "+sum+"점<br>";
                s+="평균: "+avg+"점<br>";


                $("#result").html(s).css({
                    "font-size":"15pt",
                    "font-family":"궁서체",
                    "background-color":"beige"
                });
                
            });
        });
    </script>
</head>
<body>
    <table class="table table-bordered" style="width: 400px;">
        <tr>
            <th width="100">학생명</th>
            <td width="300">
                <input type="text" id="name" style="width: 120px;">
            </td>
        </tr>

        <tr>
            <th width="100">자바점수</th>
            <td width="300">
                <input type="text" id="java" style="width: 120px;">
            </td>
        </tr>

        <tr>
            <th width="100">오라클점수</th>
            <td width="300">
                <input type="text" id="oracle" style="width: 120px;">
            </td>
        </tr>

        <tr>
            <th width="100">제이쿼리점수</th>
            <td width="300">
                <input type="text" id="jquery" style="width: 120px;">
            </td>
        </tr>

        <tr>
            <td colspan="2" align="center">
                <button type="button" class="btn btn-info" id="btn">결과출력</button>
            </td>
        </tr>

        <tr height="200">
            <td colspan="2" align="center">
                <div id="result">결과출력하는 곳...</div>
            </td>
        </tr>
    </table>
</body>
</html>

배열 난수

난수주기

rnd=parseInt(Math.random()*5); //0~4

본문

<!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>
    <img src="">
    <img src="">
    <img src="">
    <img src="">
    <img src="">

    <script>
        //모든 이미지에 같은 이미지 넣고 너비 높이 보더
        $("img").attr("src","../만화이미지/03.png").css({
            "width":"100px",
            "height":"100px",
            "border":"2px dotted green"
        });

        //랜덤이미지 5개 배열
        var imgarr=new Array();

        imgarr[0]="../만화이미지/05.png";
        imgarr[1]="../만화이미지/01.png";
        imgarr[2]="../만화이미지/02.png";
        imgarr[3]="../만화이미지/06.png";
        imgarr[4]="../만화이미지/09.png";

        //img태그에 마우스 올리면 5개의 랜덤이지 중에서 하나가 선택되고
        $("img").mouseover(function(){
            rnd=parseInt(Math.random()*5);
            $(this).attr("src",imgarr[rnd]);
        });

        //마우스가 벗어나면 다시 원래의 이미지가 된다
        $("img").mouseout(function(){
            $(this).attr("src","../만화이미지/03.png");
        });
    </script>
</body>
</html>

rgb 난수

js 파일 따로 만들면 link해줘야함

<script src="../js/randomColor.js"></script>

방법 2가지

공통

		//공 6개에 1~6까지의 숫자 넣기(each)
        $("div").each(function(idx){
            $(this).html(idx+1).css("background-color",randomColor());

방법1

            var col=$(this).css("background-color");

            $(this).mouseover(function(){
                $("h2").text(col).css("color",col);
            })

            $(this).mouseout(function(){
                $("h2").empty(col)
            })*/
        });

방법2

        //마우스 올리면 해당 색상으로 rgb색상을 h2태그에 출력
        //마우스 벗어나면 지우기(empty())
        //css("속성","값")
        //css("속성")
        //attr("속성","값")
        //attr("속성")
        $("div").hover(function(){

            var col=$(this).css("background-color");
            $("h2").html(col).css("color",col);
        },function(){
            $("h2").empty();
        });

js

function randomColor(){
    //rgb색상얻기
    var r=parseInt(Math.random()*256); //0~255
    var g=parseInt(Math.random()*256); //0~255
    var b=parseInt(Math.random()*256); //0~255
    var color="rgb("+r+","+g+","+b+")";
    return color;
}

본문

<!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">
    <link href="../css/style2.css" rel="stylesheet">
    <script src="../js/randomColor.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <div></div><div></div><div></div><div></div><div></div><div></div>
    <h2></h2>

    <script>
        //공 6개에 1~6까지의 숫자 넣기(each)
        $("div").each(function(idx){
            $(this).html(idx+1).css("background-color",randomColor());
            /* 방법1
            var col=$(this).css("background-color");

            $(this).mouseover(function(){
                $("h2").text(col).css("color",col);
            })

            $(this).mouseout(function(){
                $("h2").empty(col)
            })*/
        });

        //방법2
        //마우스 올리면 해당 색상으로 rgb색상을 h2태그에 출력
        //마우스 벗어나면 지우기(empty())
        //css("속성","값")
        //css("속성")
        //attr("속성","값")
        //attr("속성")
        $("div").hover(function(){

            var col=$(this).css("background-color");
            $("h2").html(col).css("color",col);
        },function(){
            $("h2").empty();
        });
    </script>
</body>
</html>

selector

first-child

//-child : 자식(하위)들이라는 뜻
$("ol li:first-child").css("background-color","gray"); //각 ol 항목의 첫번째 li

==$("ol li:first").css("background-color","gray"); //전체 첫번째 li

contains()

()안 값을 찾아서

		//전체 항목에서 "라면"을 찾아서 글자크기를 1.5배로 변경
        $("li:contains(라면)").css("font-size","1.5em");

odd/even

odd - li의 홀수번지를 찾아서 border지정 (지정인덱스로는 1,3,5.....)

$("li:odd").css("border","2px solid blue");

even - //li의 짝수번지를 찾아서 border지정

$("li:even").css("border","3px groove red");

본문

<!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>
    <p>오늘 공부할 내용</p>
    <ol>
        <li>제이쿼리_랜덤</li>
        <li>제이쿼리_셀렉터</li>
        <li>제이쿼리_복사</li>
        <li>제이쿼리_속성</li>
    </ol>

    <p>오늘 점심 메뉴</p>
    <ol>
        <li>순대국밥</li>
        <li>라면김밥</li>
        <li>스파게티</li>
        <li>초밥</li>
        <li>피자</li>
    </ol>

    <script>
        //$("ol li:first").css("background-color","gray"); //전체 첫번째 li
        //-child : 자식(하위)들이라는 뜻
        $("ol li:first-child").css("background-color","gray"); //각 ol 항목의 첫번째 li

        //전체 항목에서 "라면"을 찾아서 글자크기를 1.5배로 변경
        //:contains() : ()안 값을 찾아서
        $("li:contains(라면)").css("font-size","1.5em");

        //li의 홀수번지를 찾아서 border지정 (지정인덱스로는 1,3,5.....)
        //odd : 홀수번지 even : 짝수번지
        $("li:odd").css("border","2px solid blue");
        
        //li의 짝수번지를 찾아서 border지정
        $("li:even").css("border","3px groove red");
    </script>
</body>
</html>

copy

방법1

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

            //box1아래 모든 img태그 복사
            var no1=$("#box1").find("img").clone();
            //3번 박스 영역에 추가
            $("#box3").append(no1);
        });

방법2

$("#btn2").click(function(){
            var no2=$("#box2 img").clone();
            $("#box4").append(no2);
        });

remove()

empty 주의점 확인

	$("#btn3").click(function(){
            //.empty("img")하면 3번박스 4번박스 글씨도 다 지워버림
            //-> empty는 모두 지울때 사용/remove는 영역 선택해서 삭제
            $("#box3").find("img").remove();
            $("#box4").find("img").remove();
        })

본문

<!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>
    <button type="button" class="btn btn-info" id="btn1">1번영역 복사해서 3번 영역에 추가</button><br>
    <br>
    <button type="button" class="btn btn-info" id="btn2">2번영역 복사해서 4번 영역에 추가</button><br>
    <br>
    <button type="button" class="btn btn-info" id="btn3">3,4번 영역 모두 지우기</button><br>
    <br>
    <hr>

    <div id="box1">
        <b>1번 박스</b>
        <img src="../연예인사진2/냥뇽녕냥8.jpeg" width="100">
        <img src="../연예인사진2/냥뇽녕냥18.jpeg" width="100">
    </div>

    <div id="box2">
        <b>2번 박스</b>
        <img src="../연예인사진2/냥뇽녕냥20.jpeg" width="100">
        <img src="../연예인사진2/냥뇽녕냥14.jpeg" width="100">
    </div>

    <div id="box3">
        <b>3번 박스</b>
        
    </div>

    <div id="box4">
        <b>4번 박스</b>
        
    </div>


    <script>
        //복사 방법1
        $("#btn1").click(function(){

            //box1아래 모든 img태그 복사
            var no1=$("#box1").find("img").clone();
            //3번 박스 영역에 추가
            $("#box3").append(no1);
        });

        //복사 방법2
        $("#btn2").click(function(){
            var no2=$("#box2 img").clone();
            $("#box4").append(no2);
        });

        $("#btn3").click(function(){
            //.empty("img")하면 3번박스 4번박스 글씨도 다 지워버림
            //-> empty는 모두 지울때 사용/remove는 영역 선택해서 삭제
            $("#box3").find("img").remove();
            $("#box4").find("img").remove();
        })
    </script>
</body>
</html>

inputTag

focus

해당 칸 색 변경 혹은 커서 변경

	<h3>폼태그연습#1</h3>
    <div>
        <b>아이디</b>
        <input type="text" style="width: 100px;">
        <br>
        <b>비밀번호</b>
        <input type="password" style="width: 100px;">
        <br>
    </div>

    <script>
        //포커스가 갈 경우 배경색이 노랑색....focus
        //좀더 구체적으로...셀렉터를 input[type=타입] 으로 쓰면 선택적으로 적용 가능
        //$("타입1:text,타입2:password")
        $("input:text,input:password").focus(function(){

            $(this).css("background-color","yellow");
        });

        //포커스가 벗어나면 원래대로....blur
        $("input:text,input:password").blur(function(){

            $(this).css("background-color","white");
        });
    </script>

checkbox

	<h3>폼태그연습#2</h3>
    <div>
        <input type="checkbox" id="cbk">운전면허
        &nbsp;&nbsp;
        <button type="button" id="btn1">확인</button>

        &nbsp;&nbsp;<span></span>
    </div>

    <script>
        $("#btn1").click(function(){

            var a=$("#cbk").val();//무조건 on(value 미지정시),(value 지정시 value값 나옴)//원래 체크박스에 따른 결과값/체크여부 상관x
            var b=$("#cbk").is(":checked"); //체크 박스 체크 유무에 따른 true/false 값 //.is(":checked") 중요
            $("span:eq(0)").html(a+","+b);
        });
    </script>

value

무조건 on(value 미지정시),(value 지정시 value값 나옴)
원래 체크박스에 따른 결과값/체크여부 상관x

var a=$("#cbk").val();

checked

체크 박스 체크 유무에 따른 true/false 값 //.is(":checked") 중요

var b=$("#cbk").is(":checked");

checkbox 2

 	<div>
        <h3>구현 가능한 컴퓨터 언어는?</h3>
        <!-- radio/checkbox name을 같은걸 줘야함 input 5개면 5개 다/ 10개면 10개 다 name이 같아야함-->
        <input type="checkbox" name="clang" value="Java">Java
        <input type="checkbox" name="clang" value="Oracle">Oracle
        <input type="checkbox" name="clang" value="Html">Html
        <input type="checkbox" name="clang" value="Jquery">Jquery
        <input type="checkbox" name="clang" value="MySql">MySql

        <br>
        <button type="button" id="btn3">가능언어출력</button>
        <br>
        <span></span>
    </div>

    <script>
        $("#btn3").click(function(){

            //체크된 언어의 갯수
            var len=$("input[name='clang']:checked").length;
            var s="체크갯수: "+len;

            if(len==0)
                s+="<br>가능언어없음";
            else
            {
                s+="<br>";
                $("input[name='clang']:checked").each(function(i,element){

                    s+=$(this).val()+"&nbsp;";
                });
            }


            $("span:eq(2)").html(s);
        });
    </script>

체크안됐을 경우/체크된 박스값만 가져올 경우

		//체크된 언어의 갯수
            var len=$("input[name='clang']:checked").length;
            var s="체크갯수: "+len;

            if(len==0)
                s+="<br>가능언어없음";
            else
            {
                s+="<br>";
                $("input[name='clang']:checked").each(function(i,element){

                    s+=$(this).val()+"&nbsp;";
                });
            }

radio

radio/checkbox name을 같은걸 줘야함 input 5개면 5개 다/ 10개면 10개 다 name이 같아야함

	<h3>폼태그연습#3</h3>
    <div>
        <h3>당신의 거주지는?</h3>
        <!-- radio/checkbox name을 같은걸 줘야함 input 5개면 5개 다/ 10개면 10개 다 name이 같아야함-->
        <input type="radio" name="city" value="서울">서울
        <input type="radio" name="city" value="경기">경기
        <input type="radio" name="city" value="부산">부산
        <input type="radio" name="city" value="대전">대전
        <input type="radio" name="city" value="제주">제주

        <br>
        <button type="button" id="btn2">거주지 출력</button>
        <span></span>
    </div>
    <script>
        $("#btn2").click(function(){

            var citydata=$("input[name='city']:checked").val(); //name이 city인데 체크 되어있는 값을 가져오는 것
            $("span:eq(1)").html(citydata);
        });
    </script>

value값 가져오는 법

name이 city인데 체크 되어있는 값을 가져오는 것

var citydata=$("input[name='city']:checked").val();

select/option

	<h3>폼태그연습#5</h3>
    <div>
        <select id="selone">
            <option value="red">빨강</option>
            <option value="gray">회색</option>
            <option value="blue">파랑</option>
            <option value="magenta">핑크</option>
            <option value="green">초록</option>
        </select>
        <br>
        <button type="button" id="btn4">색상 가져오기</button>
        <br>
        <span></span>
    </div>

    <script>
        $("#btn4").click(function(){

            //var seltext=$("#selone option:selected").text();
            var seltext=$("#selone option:checked").text();//select에서 (:checked)도 jquery에서는 사용 가능

            var selval=$("#selone").val();

            //var s="선택한 text: "+seltext;
            //s+=",   선택한 val: "+selval;

            s="<b style='color:"+selval+"'>"+seltext+"</b>"; //선택한 색상 text에 적용
            $("span:eq(3)").html(s);
        });
    </script>

option 색 가져오기

var seltext=$("#selone option:checked").text();//select에서 (:checked)도 jquery에서는 사용 가능
==var seltext=$("#selone option:selected").text();

var selval=$("#selone").val();

option 색 가져온 것 적용

선택한 색상 text에 적용

 s="<b style='color:"+selval+"'>"+seltext+"</b>";

본문

<!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{
            border: 1px solid gray;
            padding: 20px;
            width: 500px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h3>폼태그연습#1</h3>
    <div>
        <b>아이디</b>
        <input type="text" style="width: 100px;">
        <br>
        <b>비밀번호</b>
        <input type="password" style="width: 100px;">
        <br>
    </div>

    <script>
        //포커스가 갈 경우 배경색이 노랑색....focus
        //좀더 구체적으로...셀렉터를 input[type=타입] 으로 쓰면 선택적으로 적용 가능
        //$("타입1:text,타입2:password")
        $("input:text,input:password").focus(function(){

            $(this).css("background-color","yellow");
        });

        //포커스가 벗어나면 원래대로....blur
        $("input:text,input:password").blur(function(){

            $(this).css("background-color","white");
        });
    </script>


    <h3>폼태그연습#2</h3>
    <div>
        <input type="checkbox" id="cbk">운전면허
        &nbsp;&nbsp;
        <button type="button" id="btn1">확인</button>

        &nbsp;&nbsp;<span></span>
    </div>

    <script>
        $("#btn1").click(function(){

            var a=$("#cbk").val();//무조건 on(value 미지정시),(value 지정시 value값 나옴)//원래 체크박스에 따른 결과값/체크여부 상관x
            var b=$("#cbk").is(":checked"); //체크 박스 체크 유무에 따른 true/false 값 //.is(":checked") 중요
            $("span:eq(0)").html(a+","+b);
        });
    </script>


    <h3>폼태그연습#3</h3>
    <div>
        <h3>당신의 거주지는?</h3>
        <!-- radio/checkbox name을 같은걸 줘야함 input 5개면 5개 다/ 10개면 10개 다 name이 같아야함-->
        <input type="radio" name="city" value="서울">서울
        <input type="radio" name="city" value="경기">경기
        <input type="radio" name="city" value="부산">부산
        <input type="radio" name="city" value="대전">대전
        <input type="radio" name="city" value="제주">제주

        <br>
        <button type="button" id="btn2">거주지 출력</button>
        <span></span>
    </div>
    <script>
        $("#btn2").click(function(){

            var citydata=$("input[name='city']:checked").val(); //name이 city인데 체크 되어있는 값을 가져오는 것
            $("span:eq(1)").html(citydata);
        });
    </script>


    
    <div>
        <h3>구현 가능한 컴퓨터 언어는?</h3>
        <!-- radio/checkbox name을 같은걸 줘야함 input 5개면 5개 다/ 10개면 10개 다 name이 같아야함-->
        <input type="checkbox" name="clang" value="Java">Java
        <input type="checkbox" name="clang" value="Oracle">Oracle
        <input type="checkbox" name="clang" value="Html">Html
        <input type="checkbox" name="clang" value="Jquery">Jquery
        <input type="checkbox" name="clang" value="MySql">MySql

        <br>
        <button type="button" id="btn3">가능언어출력</button>
        <br>
        <span></span>
    </div>

    <script>
        $("#btn3").click(function(){

            //체크된 언어의 갯수
            var len=$("input[name='clang']:checked").length;
            var s="체크갯수: "+len;

            if(len==0)
                s+="<br>가능언어없음";
            else
            {
                s+="<br>";
                $("input[name='clang']:checked").each(function(i,element){

                    s+=$(this).val()+"&nbsp;";
                });
            }


            $("span:eq(2)").html(s);
        });
    </script>



    <h3>폼태그연습#5</h3>
    <div>
        <select id="selone">
            <option value="red">빨강</option>
            <option value="gray">회색</option>
            <option value="blue">파랑</option>
            <option value="magenta">핑크</option>
            <option value="green">초록</option>
        </select>
        <br>
        <button type="button" id="btn4">색상 가져오기</button>
        <br>
        <span></span>
    </div>

    <script>
        $("#btn4").click(function(){

            //var seltext=$("#selone option:selected").text();
            var seltext=$("#selone option:checked").text();//select에서 (:checked)도 jquery에서는 사용 가능

            var selval=$("#selone").val();

            //var s="선택한 text: "+seltext;
            //s+=",   선택한 val: "+selval;

            s="<b style='color:"+selval+"'>"+seltext+"</b>"; //선택한 색상 text에 적용
            $("span:eq(3)").html(s);
        });
    </script>
</body>
</html>

inputTag2

현재 날짜 자동 적용


            //현재날짜 구해서 날짜타입에 넣기
            //값 확인하기 위해서 해본 것
            var date=new Date();

            var y=date.getFullYear();
            var m=date.getMonth()+1;
            var d=date.getDate();

            //자동으로 현재 날짜 적용
            var currDay=y+"-"+(m<10?"0":"")+m+"-"+(d<10?"0":"")+d;

버튼 누르면 값들 누적시켜서 출력

		//버튼이벤트
            $("#btn1").click(function(){

                var s="";

                //이름읽기
                s+="이름: "+$("#myname").val()+"<br>";;

                //운전면허 체크(운전면허 : 있음)
                //테스트해서 true/false값 확인
                console.log($("#cblic").val());
                console.log($("#cblic").is(":checked"));
                s+="운전면허: "+($("#cblic").is(":checked")?"있음":"없음")+"<br>";

                //생년월일
                s+="생년월일: "+$("#mybirth").val()+"<br>";

                s+="신청일: "+$("#thedate").val()+"<br>";
                
                $("#result").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>
        #result{
            width: 500px;
            height: 200px;
            font-family: 'Dokdo';
            padding: 10px;
            font-size: 30px;
            border: 1px solid gray;
        }
    </style>
    <script>
        $(function(){

            //현재날짜 구해서 날짜타입에 넣기
            //값 확인하기 위해서 해본 것
            var date=new Date();

            var y=date.getFullYear();
            var m=date.getMonth()+1;
            var d=date.getDate();

            //자동으로 현재 날짜 적용
            var currDay=y+"-"+(m<10?"0":"")+m+"-"+(d<10?"0":"")+d;

            $("#thedate").val(currDay);


            //버튼이벤트
            $("#btn1").click(function(){

                var s="";

                //이름읽기
                s+="이름: "+$("#myname").val()+"<br>";;

                //운전면허 체크(운전면허 : 있음)
                //테스트해서 true/false값 확인
                console.log($("#cblic").val());
                console.log($("#cblic").is(":checked"));
                s+="운전면허: "+($("#cblic").is(":checked")?"있음":"없음")+"<br>";

                //생년월일
                s+="생년월일: "+$("#mybirth").val()+"<br>";

                s+="신청일: "+$("#thedate").val()+"<br>";
                
                $("#result").html(s);
            });
        });
    </script>
</head>
<body>
    <form>
        <!-- legend : form 같은 것 -->
        <legend>폼태그연습</legend>
        <table class="table table-bordered" style="width: 500px;">
            <tr>
                <th>이름</th>
                <td>
                    <input type="text" class="form-control" id="myname"
                    style="width: 150px;">
                </td>
            </tr>

            <tr>
                <th>운전면허</th>
                <td>
                    <!-- label로 두면 해당 칸 정확하게 안눌러도 체크박스 체크 가능 -->
                    <label><input type="checkbox" id="cblic">운전면허</label>
                </td>
            </tr>

            <tr>
                <th>생년월일</th>
                <td>
                    <input type="date" id="mybirth">
                </td>
            </tr>

            <tr>
                <!-- 작성일처럼 현재 날짜 적용 -->
                <th>신청일</th>
                <td>
                    <input type="date" id="thedate">
                </td>
            </tr>

            <tr>
                <td colspan="2" align="center">
                    <button type="button" id="btn1" class="btn btn-outline-success">jquery로 입력값 읽기</button>
                </td>
            </tr>
        </table>

        <div id="result"></div>
    </form>
</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>
        div{
            border: 1px solid gray;
            padding: 20px;
            width: 500px;
            margin-left: 15px;
        }

        #result{
            width: 500px;
            height: 500px;
            border: 2px solid gray;
            margin-left: 15px;
        }

        #btn{
            margin-left: 200px;
        }
    </style>
    <script>
        $(function(){
            $("#btn").click(function(){
                var myage=$("input[name='age']:checked").val();
                s="내 연령대는 "+myage+"입니다<br>";






                var len=$("input[name='nation']:checked").length;
                var chk=len;

                if(len==0)
                    s+="여행 경험 없음<br>"
                else
                {
                    s+="제가 여행해본 국가는 ";
                    $("input[name='nation']:checked").each(function(i){
                        
                        s+=$(this).val()+", ";
                    });
                    s+="총 "+chk+"개국 다녀왔습니다<br>"
                }





                s+="백신 접종 여부: "+($("#corona").is(":checked")?"맞음":"안맞음")+"<br>";




                var seltext=$("#write option:checked").text();
                var selval=$("#write").val();

                s+="선택한 폰트: "+seltext;


                $("div:last").html(s).css("font-family",seltext).css("font-size","3em");
            });
        });
    </script>
</head>
<body>
    <!-- div나 table안에 만드시면 됩니다
        
        당신의 연령대는?(라디오) 20대 30대 40대 50대
        여행해본 나라는?(체크) 5개 체크박스 하세요
        코로나백신(체크박스 하나)
        글씨체 (select박스)-option에 구글폰트나 일반폰트 4개하세요
    
        결과전송버튼
    
        연령대: 20대
        여행해본나라: 없습니다  혹은 3개국 [이탈리아] [일본] [미국]
        코로나 백신: 맞음(혹은 안맞음)
        select에서 고른 글씨체로 결과물이 출력되야 합니다-->

    <table>
        <div>
            <h3>당신의 연령대는?</h3>
            <input type="radio" name="age" value="20대">20대
            <input type="radio" name="age" value="30대">30대
            <input type="radio" name="age" value="40대">40대
            <input type="radio" name="age" value="50대">50대
        </div>

        <div id="travel">
            <h3>여행해본 나라는?</h3>
            <input type="checkbox" name="nation" value="한국">한국
            <input type="checkbox" name="nation" value="일본">일본
            <input type="checkbox" name="nation" value="대만">대만
            <input type="checkbox" name="nation" value="태국">태국
            <input type="checkbox" name="nation" value="미국">미국
            <input type="checkbox" name="nation" value="호주">호주
            <input type="checkbox" name="nation" value="유럽">유럽
        </div>

        <div>
            <h3>코로나백신</h3>
            <input type="checkbox" id="corona">백신접종여부
        </div>

        <div>
            <h3>글씨체</h3>
            <select id="write">
                <option value="Cute Font">Cute Font</option>
                <option value="Diphylleia">Diphylleia</option>
                <option value="Dokdo">Dokdo</option>
                <option value="Nanum Brush Script">Nanum Brush Script</option>
            </select>
        </div>
    </table>

    <br>
    <button type="button" id="btn" class="btn btn-outline-success">출력버튼</button>
    <br><br>
    <div id="result"></div>
</body>
</html>

최성현

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

이전 포스트

VS code-JQuery

다음 포스트

VS code-JQuery

JQuery

addClass 복습

본문

inputScore

input으로 입력칸 만들어주기

value값 조건

계산

본문

배열 난수

난수주기

본문

rgb 난수

방법 2가지

js

본문

selector

first-child

contains()

odd/even

본문

copy

방법1

방법2

remove()

본문

inputTag

focus

checkbox

value

checked

checkbox 2

체크안됐을 경우/체크된 박스값만 가져올 경우

radio

value값 가져오는 법

select/option

option 색 가져오기

option 색 가져온 것 적용

본문

inputTag2

현재 날짜 자동 적용

버튼 누르면 값들 누적시켜서 출력

본문

숙제

본문

VS code-JQuery

VS code-JQuery

0개의 댓글