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");
$("ul").append(li);
.prepend
- $(선택자).prepend(요소)
- 선택된 요소의 자식 요소 중 첫 번째로 추가
.before
- $(선택자).before(요소)
- 선택된 요소의 앞에 위치한 형제 요소로 추가
.after
- $(선택자).after(요소)
- 선택된 요소의 뒤에 위치한 형제 요소로 추가
.remove
- $(선택자).remove()
- 선택한 요소를 DOM 트리에서 삭제
- 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제
.removeChild
- $(선택자).removeChild(요소)
- 부모를 선택하고 삭제할 자식 요소 하나를 선택자로 넘겨주면, 해당 요소 삭제
let standard = document.querySelector("li");
document.querySelector("ul").removeChild(standard);
.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()
키보드 이벤트
$("input").keyup(function (e) {
console.log(e);
console.log(e.key);
console.log(e.keyCode);
console.log(e.currentTarget);
console.log(e.currentTarget.value);
});
on 함수를 이용하지 않고 바로 쓸 수 있는 이벤트 함수
- click, scroll, mouseover, hover, keyup, keydown
$().on("click", 콜백함수);
$().click(콜백함수);