datepicker(), draggable()

- jQuery UI 사이트 -

 

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

 

jquery-1.12.1-ui.js
0.50MB

 

jquery 의 ui 기능을 추가로 script 로 선언해야 사용할 수 있는 메소드

아래 코드에 보면 추가로 선언해놓은 것을 볼 수 있으며, jquery 보다 아래에 코드로 선언해야 오류가 발생하지 않는다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="jquery-1.12.1-ui.js"></script>
    <script>
      $(() => {
        $("#date").datepicker();
        $("#drag").draggable();
      });
    </script>
    <style>
      #drag {
        width: 200px;
        height: 100px;
        background: red;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <div id="drag"><h3>Drag</h3></div>
    <input type="date" /><br />
    <input type="text" readonly placeholder="날짜 선택" id="date" />
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] 답글 달기 기능 만들기  (0) 2024.03.27
[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27

 

 

 

 

 

답글 달기 기능 구현

z-index 를 사용하여 display:none 으로 보이지 않게 태그를 겹쳐놓은 뒤 덮어씌워서 사용

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #modal_wrap {
        display: none;
        position: fixed;
        z-index: 0;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
      }
      #first {
        display: none;
        position: fixed;
        z-index: 1;
        margin: auto;
        top: 30px;
        left: 0;
        right: 0;
        width: 300px;
        height: 350px;
        background: rgba(233, 38, 38, 0.4);
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      const reply = () => {
        $("#first").slideDown("slow");
        $("#modal_wrap").show();
      };
      const slide_hide = () => {
        $("#first").slideUp("fast");
        $("#modal_wrap").hide();
      };
    </script>
  </head>
  <body>
    <div id="modal_wrap">
      <div id="first">
        <div style="width: 250px; margin: auto; padding-top: 20px">
          <b>답글 작성 페이지</b>
          <b>작성자 : 홍길동</b>
          <b>제목 : </b><input type="text" /><br />
          <b>내용 : </b><br /><textarea cols="30" rows="5"></textarea>
          <hr />
          <button type="button">답글</button>
          <button type="button" onclick="slide_hide()">취소</button>
        </div>
      </div>
    </div>
    <h1>내용 작성 합니다</h1>
    <p>배부르다</p>
    <button onclick="reply()">답글 달기</button>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] jquery_ui - datepicker, draggable  (0) 2024.03.27
[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27

 

 

 

 

 

slideDown, slideUp

jQuery 의 내장 메소드인 slideDown, slideUp

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #slide {
        padding: 5px;
        text-align: center;
        background: aqua;
      }
      #first {
        display: none;
        background: yellow;
        height: 100px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      window.onload = () => {
        $("#slide").mouseover(() => {
          $("#first").slideDown("slow");
        });
        $("#slide").mouseout(() => {
          $("#first").slideUp("slow");
        });
      };
    </script>
  </head>
  <body>
    <div id="slide">[오늘의 공지]</div>
    <div id="first">
      오늘의 공지사항<br />
      입니다<br />
      안녕
    </div>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] jquery_ui - datepicker, draggable  (0) 2024.03.27
[JavaScript] 답글 달기 기능 만들기  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27

 

 

 

 

 

append, html

append : 선택된 요소의 끝부분에 내용을 추가

html : 선택된 요소의 내용을 교체

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      let member = [];
      let cnt = 0;
      window.onload = () => {
        let msg = "";
        for (let i = 0; i < 100; i++) {
          member[i] = i;
          if (i < 10) {
            msg += i + "<br>";
            cnt++;
          }
        }
        console.log(member);

        $("#content").html(msg);
      };
      const view = () => {
        let msg = "<hr>";
        for (let i = cnt + 1; i <= cnt + 10; i++) {
          msg += member[i] + "<br>";
        }
        cnt += 10;
        $("#content").append(msg);
      };
      const appendVal = () => {
        // document.getElementById("txt").insertBefore
        $("#txt").append("내용 추가");
      };
      const htmlVal = () => {
        $("#txt").html("내용 교체");
      };
      function inputVal() {
        var t = $("#val01").val();
        $("#val01").val("");
        $("#val02").val(t);
      }
    </script>
  </head>
  <body>
    <div id="txt"></div>
    <hr />
    <input type="text" id="val01" /><br />
    <input type="text" id="val02" /><br />

    <button onclick="inputVal()">input 변경</button>
    <button onclick="appendVal()">appendVal</button>
    <button onclick="htmlVal()">htmlVal</button>

    <hr />

    <div id="content"></div>
    <button onclick="view()">더보기</button>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] 답글 달기 기능 만들기  (0) 2024.03.27
[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27

 

 

 

 

 

animate

animate : css 코드를 변화시킬때 수치를 천천히 변화시킨다 ( 부드러운 변화 효과 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      window.onload = () => {
        $(".move").click(() => {
          $("img").css({ left: "300px", height: "300px", width: "350px" });
          // css 는 바로 변환
        });

        $(".init").click(() => {
          $("img").animate({ left: "0px", height: "100px", width: "130px" });
          // animate 는 수치가 천천히 변화 ( 부드러운 효과 )
        });
      };
    </script>
  </head>
  <body>
    <button class="move">확대</button>
    <button class="init">축소</button>
    <hr />
    <img
      src="resources/images/car01.png"
      width="130px"
      height="100px"
      style="position: relative"
    />
  </body>
</html>
코드 실행

확대는 css 를 변경하여 바로 크기가 커지지만, 축소는 animate 를 사용하여 천천히 부드러운 효과를 가지며 축소

728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27
[JavaScript] button 태그와 submit 태그의 차이  (0) 2024.03.27

 

 

 

 

 

클래스 추가, css 추가

id 값으로 요소를 불러와 addClass, removeClass, css 를 사용하여 클래스를 추가, 제거, css 추가

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      .c {
        color: blue;
        font-size: xx-large;
      }
    </style>
    <script>
      function addClass() {
        $("div").addClass("c");
      }
      function rmClass() {
        $("div").removeClass("c");
      }
      function addCss() {
        $("div").css({ background: "yellow", color: "blue" });
      }
    </script>
  </head>
  <body>
    <div>연습</div>
    <button onclick="addClass()">추가</button>
    <button onclick="rmClass()">삭제</button>
    <hr />
    <button onclick="addCss()">css추가</button>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27
[JavaScript] button 태그와 submit 태그의 차이  (0) 2024.03.27
[JavaScript] confirm, open  (0) 2024.03.27

 

 

 

 

 

JQuery 사용법

JQuery

 

- jQuery CDN 사이트 -

 

jQuery CDN

jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac

releases.jquery.com

구글에 jquery CDN - minified 클릭
스크립트 코드가 나오는데 위 코드를 html 파일에 붙여넣으면 jQuery 적용 끝
위 : CDN 으로 적용, 아래 : jQuery 파일을 다운로드 받아 프로젝트 내에 저장하여 사용
jquery 다운로드 받은 모습

 

 

 

 

 

 

 

 

 

사용 예시 1

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
      // JQuery 구문은 $ 로 시작한다
      $(document).ready(function () {
        $(".hide").click(function () {
          // hide 라는 클래스를 가진 태그가 클릭되면 함수를 시작
          $("p").hide();
        });
        $(".show").click(function () {
          // show 라는 클래스를 가진 태그가 클릭되면 함수를 시작
          $("p").show();
        });
      });
    </script>
  </head>
  <body>
    <p>이벤트 처리</p>
    <button class="hide">메세지 삭제</button>
    <button class="show">메세지 보기</button>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

사용 예시 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      var n = 0;
      $().ready(function () {
        $("div.out").mouseenter(() => {
          $("p").first().html("<b>마우스 포인트 들어옴</b>");
          $("p").last().text(++n);
        });

        $("div.out").mouseleave(() => {
          $("p").first().html("<b>마우스 포인트 나감</b>");
          $("p")
            .last()
            .text("최종 횟수 : " + n);
        });
      });
    </script>
    <style>
      .out {
        width: 200px;
        height: 100px;
        border: 1px solid black;
        text-align: center;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="out">
      <p>마우스 이벤트</p>
      <p>0</p>
    </div>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

 

사용 예시 3

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      var cnt = 1;
      var myVar;
      $(() => {
        $("img").mousedown(() => {
          myVar = setInterval(imgFunc, 100);
          console.log("txt : " + cnt);
        });
        $("img").mouseup(() => {
          clearInterval(myVar);
        });
      });
      const imgFunc = () => {
        if (cnt == 10) cnt = 1;
        $("#img").attr("src", "resources/images/p" + cnt + ".png");
        cnt++;
      };
    </script>
  </head>
  <body>
    <div align="center">
      <img
        id="img"
        src="resources/images/p1.png"
        width="100px"
        height="100px"
      />
    </div>
  </body>
</html>

사용한 이미지 파일

코드 실행 ( 마우스 클릭 유지시 달림, 마우스 클릭하지 않으면 멈춤 )
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27
[JavaScript] button 태그와 submit 태그의 차이  (0) 2024.03.27
[JavaScript] confirm, open  (0) 2024.03.27
[JavaScript] 자바스크립트로 비밀번호 유효성 검사  (0) 2024.03.27

 

 

 

 

 

button 태그와 submit 태그의 차이

button : 버튼 코드만 실행되며 form 태그 안에 있더라도 action 은 실행되지 않는다

submit : form 태그의 action 이 실행된다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      test = () => {
        let txt = document.getElementById("txt");
        if (txt.value == "") {
          alert("값을 입력하세요.");
          return;
        }
        let f = document.getElementById("fo");
        fo.submit();
        // 위 fo.submit(); 코드는 button 이 작동했을때
        // 유효성 검사를 마치고 바로 action 으로 이동시키기 위한 코드이다.
      };
    </script>
  </head>
  <body>
    <form id="fo" action="ex32.html">
      <input type="text" id="txt" /><br />
      <input type="submit" onclick="test()" value="submit전송" />
      <!-- submit 을 사용하면 코드를 실행하면 무조건 -->
      <!-- form 태그의 action 을 실행함... 그러므로 검증되지 않아도 -->
      <!-- ex32.html 페이지로 넘어가버림 -->
      <input type="button" onclick="test()" value="btn전송" />
      <!-- button 을 사용하면 코드를 실행하고 form 의 action 을 -->
      <!-- 실행하지 않음.... 그러므로 유효성 검사를 마친 뒤 -->
      <!-- 위의 스크립트 코드처럼 submit() 을 따로 실행시켜줘야 함 -->
    </form>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27
[JavaScript] confirm, open  (0) 2024.03.27
[JavaScript] 자바스크립트로 비밀번호 유효성 검사  (0) 2024.03.27
[JavaScript] js 파일로 자바스크립트 코드 관리  (0) 2024.03.27

+ Recent posts

티스토리툴바