jQuery를 사용하는 이유

01_JQuery vs. 자바스크립트

jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 덩어리이다. 똑같은 작업을 자바스크립트로 코딩하면 10줄, JQuery로 코딩하면 1줄로 처리할 수 있을 만큼 효율적인 코드로 작업할 수 있다. 

 

기본 기능 비교

먼저 가장 기본 기능이 되는 작업 중에서 아이디 이름으로 노드 찾기, 태그 이름으로 노드 찾기, 클래스 이름으로 노드 찾기가 있다.

 

아이디로 노드 찾기

 

ex) Javascript

var header = document.getElementById("header");
header.style.border = "4px solid ##ff00";

ex) JQuery

$(document).ready(function(){

$("#header").css("border", "4px solid #ff0000");

});

 

태그 이름으로 노드 찾기

ex) Javascript

var p = document.getElementsByTagName("p");

for(int i= 0; i<p.length; i++){
	p[i].style.border("4px solid #ff0000");
}

ex) JQuery

$("p").css("border","4px solid #ff0000");

클래스 이름으로 노드 찾기

ex)JavaScript

var data2List = document.getElementByClassName("test2");

for(var i=0; i<data2List.length; i++){
	var data2 = data2List[i];
    
    if(data2.tagName =="p"){
		if(data2.parentNode.tagName=='div'){
        data2.style.border ="4px solid #ff0000";
        }
    }

}

ex) JQuery

$("div> p.test2").css("border,"4px solid #ff0000");

크로스 브라우징 비교

ex)JavaScript

var btn1 = window.document.getElementById("btn1");
if(btn1.attachEvent)
	btn1.attachEvent("onclick", function(){
    	alert("hi");});
else
	btn1.addEventListener("click", function(){
    	alert("hi")}, false);

ex)JQuery

$("#btn1").on("click", function(){alert("hi");});

 

IE7은 비표준 브라우저이기 때문에 이벤트 등록할 때  attachEvent()를 사용해야한다.

IE7 버전 이상의 표준 브라우저에서는 이벤트를 등록하기 위해  addEventListener()를 사용한다.

이처럼  IE7과 기타 브라우저에서는 이벤트를 정상적으로 처리하기 위해서는 개발자가 스스로 크로스 브라우징해줘야한다. 하지만 JQuery는 스스로 크로스브라우징을 알아서 처리해 준다.

 

애니메이션 효과

 

ex) Javascript

	window.onload = function() {
		var fish = document.getElementById("fish");
		var btnStart = document.getElementById("btnStart");

		var left = 50;
		var timerID = 0;

		btnStart.addEventListener("click", function() {
			timerID = setInterval(function() {
				left++;
				fish.style.left = left + "px";

				if (left >= 430) {
					clearInterval(timerID);
					timerID = 0;
				}

			}, 20)
		}, false)

	}

ex) JQuery

  $(document).ready(function() {

                //물고기 노드 구하기.
                var $fish = $("#fish");

                $("#btnStart").click(function() {
                    // 물고기 움직이기
                    $fish.animate({
                        left : 430
                    }, 5000);
                 
                });
            });

자바스크립트는 기본적으로 애니메이션 기능을 제공하지 않기 때문에 애니메이션 기능은 대부분 타이머를 이용해 만들게 된다. 간단한 애니메이션 같은 경우는 타이머 함수를 이용하면 되지만, 복잡한 애니메이션의 경우는 수학적인 공식을 만들어 사용해야 한다. 

 

 

jQuery는 그저 편한 여러 라이브러리 중 하나이며 전체가 될 수는 없습ㄴㄴ다. 프로젝트 진행 시 모든 로직은 자바스크립트 문법으로 작성하며 그중 DOM처리 시 JQuery가 일부 사용될 뿐이라는 거다. 

 

02_ jQuery 와 CSS와의 관계

앞에서 언급한 것 처럼 JQuery의 가장 큰 특징은 CSS선택자를 이용해 원하는 노드를 쉽게 찾을 수 있다는 거다.

이 둘의 차이는 css는 정적이라는 점이고 jquery는 동적이라는 점이다. 여기서 정적이란 말은 웹페이지 문서가 실행되기 전의 스타일 코드를 작성하기 때문에 실행 후에는 변경할 수 없다는 의미이다. 동적이란 말은 정적의 개념과 반대되는 개념으로 웹페이지 문서가 실행 된 후 변경된다는 점이다.

 

jQuery를 공부하기

css  선택자	jQuery	설명
*	$("")	모든 엘리먼트선택
#I	$("#I")	아이디가 I인 엘리먼트 선택
E	$("E")	태그 이름이 E인 모든 엘리먼트 선택
.C	$(".C")	C라는 클래스 선택자를 가진 모든 엘리먼트 선택
E F	$("E F")	E의 자식 노드 중 태그 이름이 F인 모든 엘리먼트 선택
E.C	$("E.C")	태그 이름이 E인 엘리먼트 중 C라는 클래스 선택자를 가진 모든 엘리먼트 선택
E ,C	$("E ,C")	E의 자식 노드 중 C라는 클래스 선택자를 가진 모든 엘리먼트 선택
E>F	$("E>F")	E의 바로 아래 자식 중 태그 이름이 F인 모든 엘리먼트 선택

위해 필요한 선택자는 다음과 같다.