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

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(콜백함수);            // 두 개 모두 가능