제이쿼리 [ jQuery ]
- 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리.
- 문서 객체 모델 (DOM)과 이벤트에 관한 처리를 간단하게 구현.
- Ajax 응용 프로그램 및 플러그린도 제이쿼리를 활용하여 빠르게 개발 가능.
제이쿼리 적용
- 제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일 형태로 존재하기 때문에 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드해야 한다.
- 웹 페이지에 제이쿼리 파일을 로드하는 방법
-제이쿼리 파일을 다운받아 로드
-CDN(Content Delivery Network)을 이용하여 로드
제이쿼리 파일을 다운받아 로드하는 방법
제이쿼리 공식 사이트 에서 제이쿼리를 다운받은 후 제이쿼리 파일을 서버에 저장하고,
<script> 태그를 웹 페이지의 <head> 태그 내에 삽입.<head> <script src="/user(파일경로)/jquery-3.2.1.min.js(제이쿼리파일명)"></script> </head>
CDN을 이용하여 로드하는 방법
- CDN(Content Delivery Network) : 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술.
- CDN(Content Delivery Network) 장점
-특정 서버에 트래픽이 집중되지 않는다.
-콘텐츠 전송 시간이 매우 빨라진다.
-제이쿼리 파일을 서버에 따로 저장하지 않아도 사용 가능.
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>제이쿼리 기본 문법
$(선택자).동작함수();[ $ ] 기호는 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있게 해주는 식별자이다.
선택자를 이용하여 원하는 HTML 요소를 선택하고,
동작 함수를 정의하여 선택된 요소에 원하는 동작을 부여한다.
$() 함수
- 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할.
- $() 함수의 인수로 HTML 태그 이름 외에도 CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
- $() 함수를 통해 생성된 요소를 제이쿼리 객체 (jQuery object)라고 한다.
제이쿼리 객체의 메소드를 사용하여 여러 동작을 부여할 수 있다.
Document 객체의 ready() 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
일반적으로는 별다른 문제가 발생하지 않지만,
아직 생성되지 않은 HTML 요소에 속성을 추가하려고 하거나,
아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
Uncaught TypeError가 발생하여 실행중이던 스크립트는 중지된다.
이와 같은 상황에서는 Document 객체의 ready() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.
$(document).ready(function() { jQuery code });
document.ready를 쓰는 경우는 => 전체적으로 필요한 경우
전체단위로 사용할 경우 ready() 메소드를 사용한다.
함수를 만들어서 쓰는 경우는 => 특정 버튼에만 기능 동작이 필요한 경우
세부단위로 사용할때는 함수를 만들어 사용한다.
요소의 선택
제이쿼리를 사용하면 간단하게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 부여할 수 있다.
- CSS 선택자를 사용하여 HTML 요소를 선택
-태그 이름을 사용하여 같은 대크 이름을 가지는 HTML 요소를 모두 선택할 수 있다.
-디자인 관련된 영역을 입히기 위해서 사용한다.
-자바스크립트의 getElementsByTagName() 메소드와 같은 동작을 한다.
$(function(){ $("p").on("click", fuction() { // <p> 요소를 모두 선택 $("span").css("fontSize", "10px"); // <span> 요소를 모두 선택 }); });
- id를 사용하여 특정 HTML 선택
-javascript로 기능적인 부분을 제어하기 위해 사용한다.
-자바스크립트의 getElementsById() 메소드와 같은 동작을 한다.
$(function){ $("p").on("click", function(){ $("#jquery".css("border", "2PX solid green"); // id가 "jquery 인 요소를 선택 }); });
- class를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택
-자바스크립트의 getElementsByClassName() 메소드와 같은 동작을 한다.
$(functuon){ $("p").on("click", function(){ $("jquery").css("backgroundColor", "lightgray"); // class 가 "jquery"인 요소를 모두 선택 }); });
- attribute를 사용하여 조건에 맞는 특정 HTML 요소 선택
$(functuon){ $("button").on("click", function(){ // <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택 $("img[alt='flower']").attr("scr", "/examples/images/img_1.png"); }); });
플러그린 오타에용!