풀스택 웹개발 부트캠프 2주차 (3)

syxxne·2023년 7월 27일
0

부트캠프

목록 보기
5/42

JQuery

  • 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
  • 대부분의 브라우저에서 지원 가능
  • HTML DOM을 손쉽게 조작 가능
  • 같은 동작을 하더라도 더욱 짧게 구현 가능

JQuery 메서드

  • $(선택자).메서드()
  • $() : parameter로 선택자를 전달받아 특정 HTML 요소를 선택 → 선택된 요소는 JQuery 객체

JQuery - 요소 선택

값 가져오기 & 설정하기

  • $(선택자).val() : Input과 같은 value 값을 가져옴 (getter)
  • $(선택자).val("설정할 값") : Input과 같은 곳에 value 값을 설정함 (setter)

JQuery - 요소 다루기

.css

  • $(선택자).css("속성명", "값")
  • style 변경

.attr

  • $(선택자).attr("속성명", "값")
  • 속성 변경

.text

  • $(선택자).text("글자")
  • text 변경

.html

  • $(선택자).html(html)
  • HTML 변경하기

.append

  • $(선택자).append(요소)
  • JQuery로 요소를 생성하는 것은 불가능하므로 document를 이용해 요소 생성 후, JQuery 활용하여 추가
let li = document.createElement("li");  // li 요소 생성
$("ul").append(li);  // ul에 li 요소 추가

.prepend

  • $(선택자).prepend(요소)
  • 선택된 요소의 자식 요소 중 첫 번째로 추가

.before

  • $(선택자).before(요소)
  • 선택된 요소의 앞에 위치한 형제 요소로 추가

.after

  • $(선택자).after(요소)
  • 선택된 요소의 뒤에 위치한 형제 요소로 추가

.remove

  • $(선택자).remove()
  • 선택한 요소를 DOM 트리에서 삭제
  • 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제

.removeChild

  • $(선택자).removeChild(요소)
  • 부모를 선택하고 삭제할 자식 요소 하나를 선택자로 넘겨주면, 해당 요소 삭제
let standard = document.querySelector("li");
document.querySelector("ul").removeChild(standard); 
// ul 요소의 자식 요소인 li 요소 삭제

.empty

  • $(선택자).empty()
  • 선택한 요소의 자식 요소를 모두 삭제
  • 선택된 요소는 남아있고, 그 안이 모두 비워짐

.parent

  • $(선택자).parent()
  • 바로 위에 존재하는 하나의 부모 요소를 반환

.parents

  • $(선택자).parents()
  • 모든 조상 요소를 반환

.next

  • $(선택자).next()
  • 선택된 요소 바로 다음에 위치한 형제 요소를 반환
  • nextElementSibling과 동일
  • cf) nextSibling

.prev

  • $(선택자).prev()
  • 선택된 요소 바로 이전에 위치한 형제 요소를 반환
  • previousElementSibling과 동일 (text 요소는 제외하고 <> 태그 요소만 가져옴)
  • cf) previousSibling

.children

  • $(선택자).children()
  • 선택된 요소의 모든 자식 요소를 반환
  • children과 동일
  • cf) childNodes

.addClass

  • $(선택자).addClass("클래스명")
  • 선택된 요소에 클래스 추가

.removeClass

  • $(선택자).removeClass("클래스명")
  • 선택된 요소에서 클래스 삭제

.hasClass

  • $(선택자).hasClass("클래스명")
  • 선택된 요소에 클래스가 있는지 여부 확인
  • return 값은 boolean (true / false)

.toggleClass

  • $(선택자).toggleClass("클래스명")
  • 선택된 요소에 클래스가 있으면 추가, 없으면 삭제

.switchClass

  • $(선택자).switchClass("클래스명1", "클래스명2", [시간])
  • 클래스1을 클래스2로 바꿈
  • 시간은 클래스1을 클래스2로 바꿀 때 걸리는 시간을 의미함 (생략 가능)
  • JQuery ui를 불러와야 사용 가능

JQuery - 이벤트 리스너

  • 이벤트가 발생했을 때, 그 처리를 담당하는 함수
  • $().on("이벤트명", "콜백함수")
  • addEventListner와 동일

로딩 이벤트

  • ready()
  • $()
  • DOM 요소를 불러온 후(모든 요소들이 로딩된 후)에 실행
  $(window).ready(function () {
        console.log("로드 완료1");
   });
  $(function () {
        console.log("로드 완료2");
   });                               // 모두 로딩 이벤트

마우스 이벤트

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

키보드 이벤트

  • keydown()
  • keyup()
$("input").keyup(function (e) {
        console.log(e);
        console.log(e.key);
        console.log(e.keyCode);
        console.log(e.currentTarget);          // e.currentTarget은 input
        console.log(e.currentTarget.value);    // input이므로 input.value 가능 
 });

on 함수를 이용하지 않고 바로 쓸 수 있는 이벤트 함수

  • click, scroll, mouseover, hover, keyup, keydown
$().on("click", 콜백함수);
$().click(콜백함수);            // 두 개 모두 가능

0개의 댓글