[SeSAC x 코딩온] 웹 풀스택 회고 06 | jQuery CDN Type, 이벤트 리스너

사용방법

파일 다운로드

혹은

CDN 사용

<script
      src="https://code.jquery.com/jquery-3.7.0.min.js"
      integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
      crossorigin="anonymous"
    ></script>

CDN 종류

uncompressed, minified : 일반 패키지
uncompressed : 압축되어 있지 않은 공백과 들여쓰기가 되어 있는 형태
minified : 압축된 형태로 한 줄로 쓰여 있는 형태 ( 용량이 더 작음 )
slim, slim minified: slim 패키지 (일반 패키지에서 몇몇 기능들이 제거된 형태

Syntax

$(선택자).동작함수();

Event Listener

로딩 이벤트

.ready()
$()

예제

$(document).ready(function () {
  console.log("ready - 문서 dom 트리가 완성되면 실행되는 이벤트");
});
$(function () {
  console.log("안녕");
});

마우스 이벤트

click()
mouseover()
hover()
scroll()

예제

$(".p-msg").click(function () {
  $(".p-msg").css("color", "lime");
});
$(".num").click(function () {
  //   $(".num").css("color", "hotpink");  //전체 적용
  $(this).css("color", "hotpink"); // : 자기 자신 = 이벤트 적용 된 요소
});

$(".num").on("click", function () {
  $(this).css("color", "hotpink");
});

키보드 이벤트

keydown()
keyup()

예제

$(".input-key").on("keydown", function (e) {
  // e: 이벤트 객체
  console.log(e);
  console.log(e.code); // 눌려진 키의 고유 코드
  console.log(e.key); // input에 입력된 값

  if (e.code === "ArrowUp") {
    console.log("⬆");
  } else if (e.code === "ArrowDown") {
    console.log("⬇");
  } else {
    console.log("others");
  }
});

Form 이벤트

$("#todo-form").on("submit", function (e) {
  console.log(e); //이벤트 객체
  e.preventDefault(); //이벤트 기본 동작 막는 메서드
  // 지금 발생한 이벤트가 submit 이기 때문에 submit 이벤트의 기본 동작인 '새로고침' 막음

  // 입력 값 submit 시 밑에 추가 하기
  const todo = $('[name = "todo"]');
  //   밖에 '' 썼으면 안엔 "" 써야 에러가 안 남.
  //   마찬가지로  안에 '' 썼으면 밖엔 "" 써야 에러가 안 남
  const todos = $(".todos");
  todos.append(`<li>${todo.val()}</li>`);
  console.log(typeof todo.val()); // string
  todo.val("");
});

e.preventDefault() :이벤트 기본 동작 막는 메서드
""와 '' 구분 잘 하기