모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 자바스크립트를 이용해 만든 라이브러리 언어이다. 다양한 함수들을 사용자에게 제공함으로써 자바스크립트에서 사용할 때 불편했던 몇 가지 점들을 간편하게 사용할 수 있도록 개선하였다.
- 호환성 문제 해결
자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체(Event Object)는 호환성이 떨어진다는 단점이 있다. 이런 문서 객체 선택자의 호환성 문제가 제이쿼리에서는 모두 해결되었다. - 쉽고 편리한 애니메이션 효과 기능 구현
자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 하기 때문에 개발에 많은 시간이 필요했지만 제이쿼리는 애니메이션과 다양한 효과를 지원하는 메서드를 제공하기 때문에 개발 시간을 많이 단축할 수 있다.
선택자
선택자는 HTML 요소를 선택하여 가져온다. 제이쿼리 선택자는 css 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이 때 HTML 에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML 에 작성한 스타일은 '정적이다' 라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있다.
문서 객체 모델
문서 객체 모델(DOM; Document Object Model)이란 HTML 문서 객체 구조를 말한다. HTML 문서의 기본 객체 구조는 최상위 객체인 <html> 이 있고 하위 객체로 <head>, <body> 가 있다. <body> 태그는 문단 태그, 테이블 태그, 폼 태그 등을 포함할 수 있다. 이때 문서 객체 모델에서는 모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있다. 예를 들어 <img> 태그는 이미지를 출력하는 기능이 있고, src, alt, width, height 와 같은 속성을 포함하고 있다. 문서 객체 구조를 그림으로 표현하면 트리 구조가 된다. 이때 가장 상위에 위치하는 <html> 은 뿌리(Root)라고 부르고, 뿌리로부터 가지처럼 뻗어나가는 모양의 요소를 노드(Node)라고 부른다. 노드의 종류에는 요소 노드(Element Node), 텍스트 노드(Text Node), 속성 노드(Attribute Node)가 있다.
선택자 사용하기
- 선택한 요소에 지정한 스타일을 적용한다
$.("css 선택자").css("스타일 속성명", "값");
- 선택한 요소에 지정한 속성을 적용한다
$("css 선택자").attr("속성명", "값");
기본 선택자
제이쿼리의 기본 선택자는 직접 선택자와 인접 관계 선택자로 나뉜다.
직접 선택자
주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다. 종류로는 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자가 있다.
전체 선택자
$("*")
전체(Universal)요소를 선택할 때 사용한다. 즉, 이 선택자를 사용하면 현재 HTML의 모든 태그를 선택한다.
<script>
$(function() {
$("*").css("border", "1px solid blue");
});
</script>아이디 선택자
$("#아이디명")
아이디 속성에 지정한 값을 포함하는 요소를 선택한다.
<script>
$(function() {
$("#tit").css("background-color", "#ff0")
.css("border", "2px solid #f00");
});
</script>클래스 선택자
$(".클래스명")
클래스 속성에 지정한 값을 포함하는 요소를 선택한다.
<script>
$(function() {
$(".tit").css("background-color", "#ff0")
.css("border", "2px dashed #f00");
});
</script>요소명 선택자
$("요소명")
요소명(Tag Name)과 일치하는 요소를 모두 선택한다.
<script>
$(function() {
$("h2").css("background-color", "#ff0")
.css("border", "2px dashed #f00");
});
</script>그룹 선택자
$("요소1, 요소2, 요소3,....요소n")
한 번에 여러개의 요소를 선택할 때 사용한다.
<script>
$(function() {
$("h1, .tit").css("background-color", "#ff0")
.css("border", "2px dashed #f00");
});
</script>종속 선택자
$("요소명#id값") // $("요소명.class값")
선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용한다.
<script>
$(function() {
$("h1.tit").css("background-color", "#ff0")
.css("border", "2px dashed #f00");
});
</script>인접 관계 선택자
직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전과 다음 요소) 요소를 선택할 때 사용한다. 인접 관계 선택자를 자유자재로 사용하려면 문서 객체 구조와 관계를 잘 이해하고 있어야 한다.
부모 요소 선택자
$("요소 선택").parent()
선택한 요소를 감싸고 있는 부모 요소를 선택한다.
하위 요소 선택자
$("기준요소선택 요소선택") // ex) $("wrap h1")
기준 요소로 선택한 하위 요소만 선택한다.
자식 요소 선택자
$("요소 > 자식요소") // $("요소").children("자식요소") // $("요소").children()
선택된 요소를 기준으로 지정한 자식 요소만 선택한다.
형(이전) / 동생(다음) 요소 선택자
$("요소").prev() 선택한 요소 기준으로 이전에 오는 형제 요소만 선택
$("요소").next() 선택한 요소 기준으로 다음에 오는 형제 요소만 선택
$("요소1+요소2") 선택한 요소1을 기준으로 바로 다음에 오는 선택요소2만 선택
형 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택한다. 그리고 동생 요소 선택자는 선택한 요소를 기준으로 바로 다음 형제 요소만 선택한다.
전체 형(이전) / 동생(다음) 요소 선택자
$("요소").prevAll() // $("요소").nextAll()
전체 형 요소 선택자는 선택한 요소를 기준으로 이전에 오는 전체 형제 요소를 선택한다. 그리고 전체 동생 요소 선택자는 선택한 요소를 기준으로 다음에 오는 전체 형제 요서를 선택한다.
전체 형제 요소 선택자
$("요소").siblings()
선택한 요소의 모든 형제 요소를 선택한다.
범위 제한 전체 형 / 동생 요소 선택자
$("요소").prevUntil("범위제한요소")
$("요소").nextUntil("범위제한요소")
선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 전체 동생 요소를 선택한다.
상위 요소 선택자
$("요소").parents()
$("요소").parents("요소")
선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자 하는 요소를 선택할 때 사용한다.
가장 가까운 상위 요소 선택자
$("요소").closest("요소")
선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할 때 사용한다.
