jQuery
- JS의 초창기에는 DOM의 각 요소를 취득하고 제어하는 것이 쉽지 않았다.
=> jQuery는 간단한 문법을 통해 각 요소를 취득하여 제어하는 것을 간단하게 처리할 수 있게 도 도와주는 라이브러리 - 요소 취득하여 속성 변경, 스타일 적용, 간단한 애니메이션 적용, 자식 요소 접근 등이 프로퍼티 및 메서드로 구현되어 있어 사용법이 매우 간단하다.
- 메서드 체이닝을 통해 요소에 접근하여 더욱 쉽게 제어가 가능하다.
- 크로스 플랫폼을 지원하기 때문에 같은 코드를 서로 다른 브라우저에서 실행해도 잘 동작한다.
- 요소에 대한 다양한 프로퍼티와 메서드가 미리 구현되어 있기 때문에 순수 JS를 사용할 때보다 성능이 낮기 때문에 프로젝트의 크기, 성능의 중요성 등을 고려하여 사용해야한다.
jQuery 사용법
- 요소 취득
$(선택자)의 형태로 작성하면 요소에 접근이 가능하며 그 밖의 jQuery의 다양한 API를 사용할 수 있다.- 선택자와 매치되는 요소가 여러개일 경우 유사배열의 형태로 반환하고 요소들을 한번에 제어할 수 있는 메서드들이 구현되어 있다.
=> 순수 JS에서는NodeList의forEach()을 이용하는 등의 방법으로 여러 요소를 제해야한다.
// container라는 클래스를 가진 요소들을 유사배열의 형태로 반환
console.log($(".container"));
// box라는 클래스를 가진 요소들의 background 속성을 "red"로 바꾼다.
$(".box").css("background", "red");-
스타일 제어
1).css(): 요소의 스타일에 대한 정보를 얻거나 설정한다.- 첫번째 인자(속성이름)만 전달시 적용된 스타일 정보가 반환되고 두번째 인자(값)까지 전달시 요소의 스타일 속성 값을 변경한다.
// .container 요소의 background 데이터 참조 console.log($(".container").css("background"); // .container 요소 안의 p 태그의 글자 크기 변경 $("container p").css("font-size", "24px");2)
.animate(): 애니메이션을 적용하고 싶은 속성과 설정을 인자로 전달하여 애니메이션을 적용한다.속성 : 값: 키값으로는 변경하고자 하는 속성명, 프로퍼티 값으로는 css 값을 지정한다.
=> 단위가 있다면 문자열 형태로 지정한다.duration: 애니메이션이 적용되는 시간(ms)을 지정한다. 기본값400easing: 애니메이션 속도커브를 지정한다.swing(기본값)혹은linear.complete: 애니메이션이 끝난 뒤 실행할 코드를 콜백함수의 형태로 전달한다.
// width 값을 500ms에 걸쳐 변경 후 "애니메이션 끝" 콘솔창에 출력 $(".box").animate({ width: "110%", },500,"swing", function(){ console.log("애니메이션 끝"); }); -
요소의 속성 변경
1).attr(): 요소의 속성값을 읽거나 변경한다.- 첫번째 인자에는 읽거나 변경할 속성값을 두번째 인자에는 적용할 값을 전달한다.
// .inputText 요소의 type 속성값 참조 consosole.log($(".inputText").attr("type"); // .inputText 요소의 readonly 속성값 변경 $(".inputText").attr("readonly", true);2)
.addClass(),.removeClass(),.toggleClass: 클래스명을 추가,제거 혹은 토글한다.- 인자로 전달된 클래스명을 추가하거나 제거하거나 혹은 토글한다.
// #gnb 요소에 on 클래스를 추가한다. $("#gnb").addClass("on"); // #gnb 요소의 on 클래스를 제거한다 $("#gnb").removeClass("on"); // #gnb 요소에 on 없다면 추가하고, 있다면 제거한다. $("#gnb").toggleClass("on"); -
요소 탐색
1)eq(): 취득한 요소들을 가운데 인덱스값으로 특정요소만 접근한다.// li 요소 중 세번째 요소에 active 클래스 추가 $("li").eq(2).addClass("active");2)
parent(): 부모요소에 접근한다.- 인자로 선택자를 전달하여 매치되는 부모요소만 접근 가능하다.
// li요소의 부모요소의 배경색을 빨간색으로 지정 $("li").parent().css("background", "red"); // li요소의 부모요소 중 .active 선택자에 해당하는 요소만 배경색을 파란색으로 지정 $("li").parent(".active").css("background", "blue");3)
.siblings(): 자신을 제외한 형제 요소를 모두 선택한다.// .container li 요소들 중 세번째 요소를 제외한 요소들에서 "on" 클래스 제거 $(".container li").eq(2).siblings().removeClass("on"); -
요소 생성 및 제거
1).append(): 인자로 전달된 요소를 마지막 자식요소로 추가한다.document.createElement()로 생성한 요소 노드 혹은 문자열로 전달한다.
// p 태그를 생성해 .textBox 요소에 추가한다. let pElem = document.createElement("p"); pElem.innerText("p 태그입니다"); $(".textBox").append(pElem); // 문자열 형태로 전달하여 .titleBox에 h1태그 추가 $(".titleBox").append("<h1>jQuery</h1>");2)
.remove(): 요소를 제거한다.// h1 태그를 제거한다. $("h1").remove();3)
empty(): 자식 요소를 모두 제거한다.// .container 안의 모든 자식 요소를 제거한다. $(".container").empty(); -
이벤트 리스너 추가
1).click(): 클릭 이벤트에 리스너를 추가한다.- 요소 클릭시 인자로 전달된 콜백함수를 실행한다.
// .btnSide 요소 클릭시 #gnb 요소에 "on" 클래스 추가 $(".btnSide").click(function(){ $("#gnb").addClass("on"); })2)
.keypress(): 키보드 입력 이벤트에 리스너를 추가한다.- 키보드 입력시 인자로 전달된 콜백함수를 실행한다.
// .inputName 요소에 키보드 입력시 누른 키가 "Enter"라면 alert 창 출력 $(".inputName").click(function(e){ if(e.key === "Enter") { alert("엔터키 입력!"); } })
