제이쿼리(jQuery)란?
제이쿼리란 오픈 소스 기반의 자바 스크립트 라이브러리다.
웹 사이트에 자바스크립트를 더욱 손쉽게 활용 할 수 있게 해준다.
또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용 할 수 있으며
이러한 제이쿼리는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나이다.
장점
- 프로토타입(Prototype)
- 도조(Dojo)
- GWT(Google Web Toolkit)
- MochiKit
위의 4가지는 자바스크립트 라이브러리인데 가장 많이 사용된다.
제이쿼리는 대부분의 브라우저에서 지원이되며 CSS스타일도 적용 가능하고 각종 연출과 애니메이션 효과, 대화형 처리를 간단하게 적용시켜준다.
짧고 간결하며 무료에 오픈 소스이다 다양한 플러그인이 있으니 참고하길 바란다.
제이쿼리를 HTML에 불러오는 방법
<head>
<script src="/C:\JS.js"></script>
</head>
* 주소는 자신이 정하면 된다.(/C:\JS.js부분)
스크립트를 태그하여 <head> 태그에 삽입시켜준다.
문법
$(선택자).동작함수();
$는 제이쿼리를 의미하고, 제이쿼리를 동작하게 해준다.
동작 함수를 정의하게되면 원하는 동작을 설정하여 동작한다.
$()함수
$()함수는 선택된 HTML 요소를 제이쿼리에서 이용 할 수 있는 형태로 생성해주는데 인수가 존재한다.
인수로는 HTML 태그 이름과 CSS 선택자를 전달하여 특정 HTML 요소를 선택 할 수 있다.
이러한것을 제이쿼리 객체(jQuery object)라고 한다.
제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정 할 수 있다.
Document 객체의 ready() 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드 한 뒤에 실행되어야한다.
이와 같은 경우는 오류가 생긴다.
- 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 하는 경우
- 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우이다.
다음 예제를 보자
function fun() {
addAttribute(); // 아이디가 "Jone"인 HTML 요소에 속성을 추가한다.
createElement(); // 아이디가 "Jone"인 HTML 요소를 생성한다.
}
function createElement() {
var criteriaNode = document.getElementById("text");
var newNode = document.createElement("p") newNode.innerHTML = "새로운 단락입니다.";
newNode.setAttribute("id", "para");
document.body.insertBefore(newNode, criteriaNode);
}
function addAttribute() {
document.getElementById("para").setAttribute("style", "color: red");
}
위의 예제에서 addAttribute() 함수는 아이디가 "para"인 HTML 요소에 새로운 속성을 추가하는 함수이다.
또한, createElement() 함수는 아이디가 "para"인 HTML 요소를 생성하여 추가해 주는 함수이다.
위의 예제에서는 아이디가 "para"인 HTML 요소가 생성되기 전에 해당 요소에 속성을 추가해 주는 addAttribute() 함수가 호출되므로, Uncaught TypeError가 발생하여 실행중이던 스크립트는 중지될 것이다.
만약 먼저 호출되는 addAttribute() 함수를 createElement() 함수 뒤에 호출하면, 정상적으로 동작할 것이다.