Jquery 사용법

2019년 11월 22일

조별하
작성자
2019.11.22.:15

jQuery

10) javascript 의 for 문과 jQuery등의 each

▶each 반복문

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>javascript의 for문과 jquery등의 each</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css"/>
<style>
    body,button {
        font:20px "Noto Sans KR",sans-serif;
    }

    #displayList {
        margin:20px;
        width:400px;
        height:300px;
        background:#81D4FA;
        padding:20px;
        list-style: none;
    }
</style>
</head>
<body>
<button id="startBtn">7단!</button>
<ul id="displayList"></ul>
</body>
</html>

▶ 출력된 화면

▶ jQuery문

<script src="js/jquery.js"></script>
<script>
    //each 반복문
    $("#startBtn").click(function test(){
     var dan=7;
     for(i=1; i<=9; i++){
     $("<li>").text(dan+"*"+i+"="+(dan*i)).appendTo("#displayList");
     /*<li> 태그를 만들어라        text() 내용         displayList위치에 */
     /*appendTo() 는 계속해서 추가 해 준다
    -->appendTo()가 댓글 형태이다*/
        }
    });//click() end
</script>

▶jQuery문 추가 해서 7단형식이 ul칸에 li록이 생기게 추가해 준다

-- $("li")    :id 가 li 인 태그를 찾아라
-- $("<li>")  :<li>를 생성 만들어라
-- .text()    :내용
-- .appendTo(): ("위치") 에 
   (버튼을 누를 때마다 text내용이 추가 된다)
   appendTo() 는 나중에 만들 댓글 형태이다

jQuery 의 each문

$("#startBtn").click(function test(){
    var dan=7;
    for(i=1; i<=9; i++){

    $("<li>").text(dan+"*"+i+"="+(dan*i)).appendTo("#displayList");
    }

    $("li").each(function(){
    var result=$(this).text();
    alert(result);
     })
    });//click() end

//->$.each(배열,function(){})

//->$.(배열).each.(,function(){})

▶ alert 화면 출력

11) this 연습

HTML

<!DOCTYPE html >
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>복습</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css"/>
<style>
    .btn {
        border:none;
        color:#fff;
        width:120px;
        height:50px;
        cursor: pointer;
        font:100 24px 'Noto Sans KR',sans-serif;
    }
    .btn:hover {
        font-weight: 900;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    dl {
        width:300px;
        height:200px;
        border:1px solid #616161;
        padding:10px;
        margin: auto;
    }
    dt,dd {
        margin:7px;
        font-size:18px;
        text-align: left;
        color:#616161;
    }
    dt {
        font-weight: 900;
        font-size:22px;
        text-align: center;
    }
    #color {
        display: inline-block;
        width:50px;
        height:30px;
        background:#999;
        text-align: center;
    }

    #exBox {
        width:400px;
        height:300px;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        padding:20px;
        background: #fff;
        position: fixed;
        left:50%;
        top:50%;
        margin:-170px 0 0 -220px;
    }
    /*CSS추가*/
    #pinkBtn   {background: hotpink}
    #blueBtn      {background: blue}
    #greenBtn {background: green}

</style>
</head>
<body>
<button id="openBtn" class="btn">버튼</button>
<div id="exBox">
    <p>
        <button id="pinkBtn" class="btn">멋진 핑크</button>
        <button id="blueBtn" class="btn">쿨한 파랑</button>
        <button id="greenBtn" class="btn">네온 녹색</button>
    </p>
    <dl>
        <dt>클릭한 버튼정보</dt>
        <dd>클릭한 버튼의 index : <span id="index">?</span></dd>
        <dd>클릭한 버튼의 뒷배경색 : <span id="color">?</span></dd>
        <dd>클릭한 버튼의 글자 : <span id="text">?</span></dd>
    </dl>
</div><!--//exBtn -->


</body>
</html>

▶ 출력된 화면

jQuery문

<script src="js/jquery.js"></script>
<script>
 $("#exBox .btn").click(function(){
     var idx=$(this).index();
     //alert(idx);
     $("#index").text(idx);

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

     var txt=$(this).text();
     $("#text").text(txt); 
 })
</script>

▶ 출력된 화면

12) 요소의 탐색

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요소의 탐색</title>
<style type="text/css">
    table {
        border-collapse:collapse;
        font:bold 50px Arial, Helvetica, sans-serif;
        margin: auto;
    }

    table td {
        padding:20px 35px;
    }
</style>
</head>
<body>
<table border="1">
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    </tbody>
</table>

 <body> 
</html>

▶ 출력된 화면

jquery를 넣으면

<script src="js/jquery.js"></script>
<script>
    //DOM구조에서 원하는 요소까지 이동하고 찾아가는 것
     $("td").eq(2)
    .css("background","red")
    .prev()
    .css("background","yellow")
    .parent()                            //첫번째 tr
    .next()                                //두번째 tr
    .children()                        //두번째 자손 td들 -> 4 5 6
    .eq(1)                                //<td>5</td>
    .css("background","blue");

</script>

▶ 출력된 화면

13) 요소의 생성

요소를 생성하는이유

:댓글의 더보기등의 무한 스크롤링하기

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>요소의 생성</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanskr.css"/>
<style>
    button {
        border:none;
        color:#fff;
        padding:10px 18px;
        cursor: pointer;
        font:100 24px 'Noto Sans KR',sans-serif;
        background:#00ACC1;
    }
    button:hover {
        font-weight: 900;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    #box {
        width:400px;
        min-height:400px;
        padding:30px;
        background:#64B5F6;
        font:500 20px "Noto Sans KR",sans-serif;
    }

    table {
        border-collapse: collapse;
        margin: 10px;
    }

    td {
        border:1px solid #424242;
        padding:10px 16px;
    }

</style>
</head>
<body>
    <p>
        <button id="createBtn">테이블 생성</button>
    </p>
    <div id="box"></div>

</body>
</html>

▶ 출력된 화면

jquery 를 넣어 주면

<script src="js/jquery.js"></script>
<script>
    //요소를 생성하는 이유
    //->댓글의 더보기등의 무한 스크롤링하기 위해
    $("#createBtn").click(function(){
        //1)
        var table="";
        table+="<table border = '1'>";
        table+="<tr>";
        table+="        <td>대한민국</td>";
        table+="</tr>";
        table+="</table>";
        $("#box").text(table);//순수 문자열
        $("#box").html(table);

        //2)
        var $table=$(<table></table>);
        var $tr1   =$("<tr><td>사과</td><td>바나나</td></tr>");
        var $tr2   =$("<tr>");
        var $tr3   =$("<td>수박</td>");
        var $tr4   =$("<td>").text("메론");

        //$tr2 에 $ td3, $td4를 마지막에 자식으로 추가
        $tr2.append($td3,$td4);

        //$table 에 자식으로 추가
        $table.prepend($tr2,$tr1);

        $("#box").append($table);
    });
</script>

//요소생성 및 추가
    append(), appendTo() 요소를 끝에 추가
    prepend(), prependTo() 요소를 앞에 추가
    부모. append(자식)
    자식.append(부모)

14) 자바스크립트 기반 오픈 소스

자바스크립트의 내장객체 Date() 의 복잡성을 단순, 다양하게 사용하기 위한 자바스크립트기반 오픈소스
자바스크립트 기반 오픈 소스
jquery.js
moment.js
bootstrap.js
angular.js
node.js

<script src="js/jquery.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
    //자바스크립트의 내장객체 Date() 의 복잡성을
    // 단순, 다양하게 사용하기 위한 자바스크립트기반 오픈소스
    //JavaScript
    /*
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth()+1;
    var date = now.getDate();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();

    var fullDate="";
    fullDate+=year+"년"+month+"월"+date+"일";
    fullDate+=hour+"년"+min+"분"+sec+"초";
    $("#time").text(fullDate);
    */
    //2)moment.js 오픈 소스 활용해서
    var now=moment();//moment.js 라이브러리 시작
    /*
    alert(now.year());
    alert(now.month());
    alert(now.date());
    */
    moment.locale("ko");//한글날짜 형식으로 지정
    var fullDate=now.format("YYYY년MM월DD일 hh시 mm분 ss초");
    $("#time").text(fullDate);
</script>

15) 아날로그 시계

HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>15_아날로그시계.html</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<style>
    #wrap {
        width:600px;
        height:600px;
        position: fixed;

        left:50%;
        top:50%;
        margin:-300px 0 0 -300px;
        font-family: bon,sans-serif;
    }
    #wrap h1 {
        height:80px;
        font-size:50px;
        text-align: center;
        line-height: 80px;
        font-weight: 700;
        color:#424242;
    }
    #clock {
        width:500px;
        height:500px;
        background:url(img/Clock-face.png);
        background-size:100% 100%;
        margin: auto;
        position: relative;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

</style>
</head>
<body>
    <div id="wrap">
        <h1><i class="fa fa-clock-o"></i> 시계</h1>
        <div id="clock">
            <div id="hour" class="hand"></div>
            <div id="min"  class="hand"></div>
            <div id="sec"  class="hand"></div>
        </div>
    </div>
</body>
</html>

아날로그 시계

CSS 추가

/*1) CSS추가 시분초이미지가 출력되는 위치 지정*/
       .hand{
               width: 500px;
               height: 500px;
               position: absolute;
               left: 0;
               top: 0;
       }
/*2) CSS 추가 시분초 이미지 출력*/
       #hour{ background:  url("img/hour_hand.png");}
       #min{ background:  url("img/minute_hand.png");}
       #sec{ background:  url("img/second_hand.png");}

jQuery 문

<script src="js/jquery.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
    //최초 함수 호출
    showTime();
    function showTime(){
        //alert(moment().year());
        var now=moment();
        var hour=now.hour();
        var min=now.minute();
        var sec=now.second();

        //3) 초, 분, 시침 이미지 각도 꺽기
        //한바퀴(360도)를 60번
        $("#sec").css("transform","rotate("+(6*sec)+"deg)");
        $("#min").css("transform","rotate("+(6*min)+"deg)");
        //$("#hour").css("transform","rotate("+(30*hour)+"deg)");
        $("#hour").css("transform","rotate("+(30*hour+0.5*min)+"deg)");
    }//showTime() end
        //4) 1초마다 주기적으로 함수 호충
        setInterval(showTime,1000);

</script>

16) 날짜 자동 생성

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>16_날짜 자동생성</title>
</head>
<body>
    <select id="year"></select>년
    <select id="month"></select>월
    <select id="date"></select>일

</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
    //날짜 데이터 자동 생성

    //최초로 한수 한번만 호출
    createYearMonth();

    function createYearMonth(){
        //1) 1월~12월 생성후 추가
        for(m=1; m<=12; m++){
            $("<option>").text(m).appendTo("#month");
        }//for end

        //2) 현재년도 -5년 현재년도 +5년까지 출력
        var nowYear=moment().year();
        for(y=nowYear-5;y<=nowYear+5;y++){
            //3) 현재 년도를 미리 seleected 
            if(y==nowYear){
                /*
                $("<option>").text(y)
                                 .attr("selected","selected")
                                 .appendTo("#year");
                */
                $("<option>").text(y)
                                 .prop("selected",true)
                                 .appendTo("#year");
            }else{
            $("<option>").text(y).appendTo("#year");
           }//if end
        }//for end


    //4)'일' 생성하는 함수 호출
    createDate();
    }//createYearMonth() end



    function createDate(){
        //text() :일반적인 요소의 문자열값 얻어올때
        //val()  : <input> <select> <textarea>등의
        // 폼과 관련된 값(컨트롤요소) 언더올때

        //5) 기존 '일'' 출력된값 지우기
        $("#date").empty();
        //6)목록에서 사용자가 선택한 년도를 얻어옴
        var year=$("#year").val();

        //7) 목록에서 사용자가 선택한 월 얻어옴
        var month=$("#month").val();

        //8) endOf() : moment.js 에서 해당월의 마지막 일을 얻어옴 
        var endDay= moment(year+"-"+month).endOf("month").date();
        //alert(endDay);

        //9)  '일 추가'
        for(d=1;d<=endDay;d++){
            $("<option>").text(d).appendTo("#date");
        }
    }//createDate() end
        //10) 사용자가 년 월을 변경 했을때(이벤트발생)
        // '일'을 바꾸는 함수를 호출
        $("#year,#month").change(createDate);
</script>

▶화면 출력

'JAVA 교육 > Jquery' 카테고리의 다른 글

2019/08/30 JQuery (0)	2019.08.30

다음 글이 없습니다.

이전 글이 없습니다.

jQuery

10) javascript 의 for 문과 jQuery등의 each

▶each 반복문

HTML

▶ 출력된 화면

▶ jQuery문

▶jQuery문 추가 해서 7단형식이 ul칸에 li록이 생기게 추가해 준다

jQuery 의 each문

▶ alert 화면 출력

11) this 연습

HTML

▶ 출력된 화면

jQuery문

▶ 출력된 화면

12) 요소의 탐색

HTML

▶ 출력된 화면

jquery를 넣으면

▶ 출력된 화면

13) 요소의 생성

HTML

▶ 출력된 화면

jquery 를 넣어 주면

14) 자바스크립트 기반 오픈 소스

15) 아날로그 시계

HTML

아날로그 시계

CSS 추가

jQuery 문

16) 날짜 자동 생성

▶화면 출력

'JAVA 교육 > Jquery' 카테고리의 다른 글

티스토리툴바