jQuery 개념
전 세계에서 가장 많이 사용되는 JavaScript 라이브러리
- HTML 요소 제어
- HTML 요소를 손쉽게 획득, 제어 가능
- 손쉬운 이벤트 처리
- 단 한번의 이벤트 정의로 크로스 브라우징 해결
- 요소의 탐색과 생성
- DOM 요소를 제어하기 위한 간결한 기능 제공
- Ajax 통신 처리
- 페이지 이동이 없는 비동기 데이터 통신
jQuery 특징
- 크로스 브라우징
- 한 번의 코딩으로 거의 모든 브라우저에게 적용
- 간결한 문법
- HTML 태그(element)를 제어하거나 이벤트를 처리하는 부분 등 JavaScript 의 전반에 걸쳐서 구문이 짧아지기 때문에 개발 효율성 상승
- 익숙한 구문
- CSS 에서 사용하던 속성과 값을 그대로 JavaScript 구문에 적용할 수 있어서 document 내장 객체가 제공하는 기능을 쉽게 사용 가능
- 다양한 플러그인
- jQuery 를 기반으로 하는 수 많은 플러그인들이 무료로 배포되고 있기 때문에, 갤러리, 메뉴 등의 구현에 대한 작업이 많이 단축
jQuery 문법
jQuery() 함수 사용
- Javascript는 window 객체의 addEventListener() 함수와 attachEvent() 함수를 사용하여 onload 이벤트를 처리해야 하는데 이때 크로스 브라우징 처리를 하기 위해 if문으로 브라우저를 구별하는 분기문을 작성해야만 한다
- jQuery는 이러한 번거로움을 jQuery() 함수 하나로 해결할 수 있게 해준다
예) jQuery() 함수에게 파라미터로 사용하려는 함수명을 전달하는 것으로 onload 처리가 완료된다
function ex() {
......
}
jQuery(ex);
$ 객체의 사용
$ : 제이쿼리 문서 객체 선택자의 메서드를 나타냄
$에 익명함수를 사용하면 <body> 영역의 문서를 모두 로딩한 후에 제이쿼리를 실행하라는 의미
$(document).ready(function(){});
$(function(){});
1. jQuery() 함수로부터 전달되는 파라미터 받기
- jQuery의 모든 기능은 $ 라는 객체의 하위로 포함되어 있다
- $ 는 jQuery의 모든 기능을 담고 있는 객체이자 함수이다jQuery() 함수로 페이지가 열릴 때, 특정 함수를 호출하게 되면, 이 특정함수는 파라미터로 $라는 객체를 받는다
- 이 $객체로 jQuery의 막강한 기능들을 사용할 수 있다
function ex($) {
$ 객체 사용
}
jQuery(ex);
2. HTML 요소를 획득하기
- Javascript에서 사용하던 document.getElementById("id") 구문이 jQuery에서는 $() 함수를 통해 작동하는데, $("CSS 셀렉터")의 축약된 형태로 객체 생성 표현을 제공한다
- Javascript의 addEventListener() 함수를 사용하여 onload 이벤트를 처리하면서 HTML 요소를 객체로 생성하는 경우, 웹 브라우저에 의해 모든 HTML 요소가 로드된 후에 객체를 생성해야 하기 때문에 onload 이벤트에 의해서 호출되는 함수 안에서 객체획득이 가능하였다
- jQuery 역시 이와같은 웹브라우저의 특성을 따라 $() 함수에 의한 객체생성은 jQuery() 함수에 의해서 호출되는 콜백함수 안에서 수행되어야 한다
var h1 = document.getElementById("hello");
=> var h1 = $("#hello");
3. innerHTML의 간결화
- $() 함수를 사용하여 획득한 요소는 html() 함수를 내장하고 있는 객체가 된다
- 이렇게 생성된 객체는 innerHTML 대신 html() 함수를 사용하여 요소안에 새로운 내용을 추가할 수 있다
h1.innerHTML = "Hello Javascript";
=> h1.html("Hello jQuery");
4. 함수 이름 대신 함수 자체를 사용하기
① 함수 이름 사용
function ex() {
......
}
jQuery(ex);
② 함수 자체를 사용
jQuery(function() {
......
});
③ $객체를 전달받기 위해 파라미터 선언
$(function($) {
$ 객체 사용
});
④ jQuery() 함수의 축약
$(function() {
......
});
=> $() 함수에 의해서 호출되는 함수는 $객체에 대한 파라미터를 명시하지 않아도,
자동으로 전달받게 된다.
⚒️ 예제
| // jQuery\webapp\01_hellojQuery | |
| exam01.html | JavaScript vs jQuery - jQuery(); |
| exam02.html | JavaScript vs jQuery - $ 객체 |
| exam03.html | $객체를 전달받기 위해 파라미터 선언 |
| exam04.html | jQuery() 함수의 축약 |
CSS 셀렉터
jQuery에서 제어할 대상에 접근하는 방법
- jQuery는 제어할 요소를 획득하기 위해서$() 함수 안에 대상을 의미하는 CSS 셀렉터를 파라미터로 전달
var mytag = $('h1'); // h1 태그 객체 획득하기
var mytag = $('.hello'); // "hello" 라는 class 속성값을 갖는 요소의 객체 획득하기
var mytag = $('#hello'); // "hello" 라는 id 속성값을 갖는 요소의 객체 획득하기
⚒️ 예제
| // jQuery\webapp\01_hellojQuery | |
| exam05.html | CSS 셀렉터 - 자손, 후손 |
'WEB > jQuery' 카테고리의 다른 글
| jQuery Animation (0) | 2024.08.28 |
|---|---|
| jQuery CSS (0) | 2024.08.28 |
| attr() / prop() / get() (0) | 2024.08.28 |
| jQuery Event (0) | 2024.08.28 |
| jQuery 다운로드 & 설치 (0) | 2024.08.28 |
