JQuery : 자바스크립트의 플러그인 중 하나. 과거에는 많이 썼는데 현재는 의존도 하락 추세
의존도 하락 이유 : 웹 표준 API의 확장, 가상 돔을 사용하는 라이브러리의 등장(React, Vue)
직접 접근 및 조작을 하면 성능저하가 생김
적용방법
- JQuery 파일을 다운받아 로드하는 방법
- CDN(Content Delivery Network)을 이용하여 로드하는 방법
CDN : 웹사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술. 특정 서버에
형태
$(선택자).동작함수();생성된 요소는 JQuery 객체이고 함수를 사용하여 여러 동작을 실행
문서준비 함수 : HTML의 로드가 다 된지 확인할 때 쓰임. 다 되지 않았는데 JS를 실행할 수도 있어서 오류가 발생 할 수 있음.
${document}.ready(실행될 익명함수 function(){});
$(실행될 익명함수 function(){});
window.onload()=function(){};와 유사
이벤트 함수
$("선택자").on("이벤트타입",실행될 익명함수 function(){});
ex : $("button").on("click",function(){});
document.querySelector().addEventListener("이벤트타입",익명함수 또는 함수명); 요소의 선택 : $(“CSS 선택자”)
선택한 요소의 필터링-구조의사 클래스
h1(태그명),*(전체),#(id),.(class)
선택된 요소에 접근
getter 함수 : 선택된 요소에 접근하여 그 값을 가져옴(변수에 담음)
setter 함수 : 선택된 요소에 접근하여 그 값을 설정함(인수로 값 전달)
함수 체이닝(method chaining) : 함수를 연속으로 호출
가능한 이유 : getter 함수->선택된 요소의 값을 반환, setter 함수-> 선택된 모든 요소에 접근 할 수 있는
요소의 추가 : $(“<div>”)를 이용하여 요소 생성 가능. 복사랑 삭제도 가능
조상 요소의 탐색 : parent,parents(모든 조상)
형제 요소의 탐색 : siblings(모두),text(다음),prev(dlwjs)
자식 요소의 탐색 : children(모두),find(특정)
필터링 함수(메소드)
.css() 를 이용해서 style값을 바꿀 수 있다