4.2 JQuery

1.5장에서 간단하게 jQuery에 대해서 다룬 적이 있습니다. 이제는 좀 구체적으로 들여다 볼려고 합니다.

 

jQuery 

자바스크립트 요소 중 "자바스크립트 DOM" 부분을 좀더 쉽게 사용할 수 있게 도와주는 라이브러리라고 보시면 되겠습니다.

JQuery의 기능 정리

- jQuery DOM

jQuery의 가장 핵심적인 기능입니다. 노드를 찾고, 추가, 수정, 삭제까지 노드와 관련된 모든 기능을 제공합니다.

 

-jQuery Ajax

서버와 데이터를 쉽게 주고 받는 통신 기능을 제공합니다. 동적인 화면을 쉽게 제작할 수 있습니다. HTML과 다른점이 정적인 화면을 동적으로 만들 수 있는 자바스크립트의 장점을 여기에 담고 있는거 같습니다.

 

-jQuery 효과

인터렉티브 웹 콘텐츠 제작에 반드시 필요한 다양한 효과 기능을 기본적으로 제공합니다. DOM과 연계 되어 있어서 효과를 쉽게 적용 시킬 수 있습니다.

 

-jQuery 플로그인

RIA(Rich Internet Application) 제작을 위한 라이브러리로 많이 사용하는 jQueryUI를 비롯한 다양한 플러그인이 있으며 계속해서 만들어 지고 있습니다.

 

jQuery를 사용하는 이유

1.5 에서도 간단하게 설명 했습니다. 이는 자바스크립트 코드로 짜는 것 보다 더 짧은 코드로 쉽게 짤수 있기 때문입니다.

 

//////////////header인 노드 찾고 border을 4px solid #f00으로 바꾸기 - 자바스크립트////////////////////////////////////

var header = document.getElgmentById("header");

header.style.border = "4px solid #ffoooo";

////////////////////////jQuery의 경우/////////////////////////////

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

 

//////////////태그 이름이 p인 노드를 찾아 border를 4px solid #f00으로 변경 - 자바스크립트///////////////////////////

var ps = document.getElementByTagName("p");

for(var i = 0 ; i < ps.length;i++){

  ps[i].style.border = "4px solid #ff0000";

}

////////////////////////jQuery의 경우/////////////////////////////////////////

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

 

////////////div의 자식 p요소 중 클래스 test2가 적용된 요소 border 4px solid #ff0000-자바스크립트/////////////////

var data2List = document.getElementByClassName("test2"); //test2인 것을 담음

for(var i =0; i<data2List.length; i++){

  var data2 = data2List[i];//test2인것을 배열 요소로 접근

 

  if(data2.tagName == "P"){//그 중에서 P요소인 것을 접근

    if(data2.parentNode.tagName=="DIV"){//이때 부모가 DIV인것을 찾음

      data2.style.border ="4px solid #ff0000";

    }

  }

}

//느낌 : 정말 복잡하다

///////////////////////////jQuery 인 경우//////////////////////////////////////////////////

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

//간단하게 사용되고 있다.

/////////////////////////////////////////////////////////////////////////////////////////////

크로스 브라우징 비교

/////////////////버튼을 클릭하면 메시지 띄우기 - 자바스크립트/////////////////////

var btn1 = window.document.getElementById("btn1");

 

if(btn1.attachEvent)

  btn1.attachEvent("onclick",function(){alert("안녕하세요")});

else

  btn1.addEventListener("click", function(){alert("안녕하세요")},false);

 

///////////////////////////jQuery의 경우//////////////////////////////

$("#btn1").on("click",function(){alert("안녕하세요");});

 

///////////////////////////////////////////////////////////////////////////////////

jQuery를 사용하려면

1. jQuery 라이브러리 삽입

2. 진입점인 ready() 함수 설정

 

1. jQuery 라이브러리 삽입

CDN(Content Delivery Network)에 올려져 있는 jQuery 파일을 이용하는 방법

CDN은 콘텐츠를 여러 서버에 분산 배치해서 콘텐츠를 전송하는 과정에서 발생하는 트래픽 집중 & 병목 현산 및 데이터 손실을 해결하기 위한 기술입니다.

 

구글 CDN 사용 예

<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

 

파일을 다운로드 하는 방법

jQuery 홈페이지에서 최신 파일을 다운받아 삽입

<script type ="text/javascript" src="jquery-1.11.0.min.js"></script>

 

진입점인 ready() 메서드 설정

4가지 방법이 있으나 가장 추천하는 방법은

 

$(document).ready(function() {

  alert("안녕하세요. ");

});

의 코드를 써주고 사용하면 된다.