JQuery(제이쿼리)
JQuery란?
오픈소스 기반의 자바스크립트 라이브러리
JQuery의 장점은?
-
웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있다
-
거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어나다
-
네트워크, 애니메이션 등 다양한 기능을 제공한다.
-
메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원한다.
-
공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능합니다.
JQuery의 요새 추세?
요즘은 React, Vue와 같은 프레임워크 라이브러리를 더 많이 사용하는 추세이기 때문에
JQuery의 사용자는 감소하는 추세이다. 하지만 배우기도 쉽고 완전히 사용을 안하지는 않기 떄문에 배워 둘 필요는 있다.
JQuery를 사용하는 방법은?
- 파일 다운로드해서
script태그를head태그 내에 삽입한다.
<head>
<script src="/파일경로/제이쿼리파일명.js"></script>
</head>- CDN :
script태그로 CDN 주소를 삽입한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="main.js"></script>여기서 주의 할 점은 자바스크립트 위에 태그 시켜야한다는 것이다.
JQuery의 문법
- $()를 사용하여 안에 선택자를 선택한다. 선태자는 HTML태그 뿐만아니라, CSS 선택자(id, class)를 선택 할 수가 있다.
$(선택자).동작함수()- addEventListner
on으로 대체하여 사용한다.
$("button").on("clcik",function(){
});
- CSS 변경하기
$(".className").css("backgroundColor","lightgray")- HTML 변경하기
$(".content").html("안녕하세요")- 요소 추가하기
$("button").on("click", function() {
$("#list").append("<li>새로 추가된 아이템이에요!</li>");
}); // list 맨뒤에 추가
끝이 없네!