[ 자바스크립트+jQuery 완전정복 스터디 2 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=9650875)

CH02 jQuery 기능

lesson 01 - jQuery 기능

01_jQuery란?

1장에서 알아본 것처럼 jQuery는 크로스 브라우징 라이브러리의 한 종류로서 자바스크립트 DOM을 좀 더 쉽게 사용할 수 있게 도와주는 라이브러리 입니다.
(jQuery는 언어가 아닌 자바스크립트 문법으로 만들어진 라이브러리일 뿐 입니다.)

02_jQuery 기능1

대부분의 라이브러리가 그렇듯 jQuery 역시 jQuery만의 독창적인 기술과 표현법으로 자바스크립트에서 처리하는 수많은 작업을 아주 쉽게 처리해주는 기능의 집합으로 구성돼 있습니다.

jQuery DOM
jQuery의 가장 핵심기능으로 노드를 찾는 것부터 추가, 수정, 삭제까지 노드와 관련된 모든 기능을 제공합니다.

jQuery Ajax
서버와 데이터를 아주 쉽게 주고 받을 수 있는 다양한 통신 기능을 제공하며 추가로 서버에서 받은 데이터를 jQuery DOM과 연계할 수 있는 기능까지 제공하고 있어 동적인 화면을 쉽게 제작할 수 있습니다.
(참고 - 이 책에서는 지면상 다루지 않는 부분 입니다.)

jQuery 효과(effect)
jQuery는 인터렉티브 웹 콘텐츠 제작에 반드시 필요한 다양한 효과 기능을 기본적으로 제공합니다. 이 역시 DOM과 직접 연계돼 있어 DOM 요소에 효과를 아주 쉽게 적용할 수 있습니다.

jQuery 플러그인(plug-in)
jQuery가 다른 라이브러리의 경쟁 속에서 살아남아 소위 대세가 될 수 있었던 이유 가운데 하나는 바로 다양한 플러그인이 있기 때문입니다.

03_jQuery 기능2

책 P37 및 http://api.jquery.com/ 참고

lesson 02 - jQuery 학습방법

01_jQuery의 정체

사실 jQuery는 수 많은 메서드를 가지고 있는 클래스 입니다. 좀 더 정확히 말하자면 jQuery는 자바스크립트 문법 중 프로토타입(prototype) 방식으로 만들어진 클래스 입니다. jQuery를 배운다는 의미는 바로 jQuery 메서드를 배운다는 의미와 같습니다.

02_초보자가 반드시 할 줄 알아야 하는 jQuery 핵심 내용 정리

노드 다루기

스타일 다루기

속성 다루기

이벤트 다루기

위치 및 크기 다루기

애니메이션 효과 다루기

lesson 03 - jQuery를 사용하는 이유

01_jQuery VS Javascript

앞서 언급한 것처럼 jQuery는 자바스크립트 DOM을 좀 더 쉽게 작업하기 위한 라이브러리 덩어리 입니다.
단순하게 설명하면 똑같은 작업을 자바스크립트로 코딩하면 10줄, jQuery로 코딩하면 1줄로 처리 할 수 있을 만큼 효율적인 코드로 작업할 수 있습니다.

기본 기능 비교

아이디가 header인 노드를 찾아 border를 4px solid #f00으로 변경하기

// javascript
var headerEle = document.getElementById('header');
headerEle.style.border = '4px solid #ff0000';


// jQuery
$('#header').css('border', '4px solid #ff0000');

태그이름이 p인 노드를 찾아 border를 찾아 4px solid #f00으로 변경하기

// javascript
var pEles = document.getElementsByTagName('p');

for (var i = 0; i < pEles.length; i++) {
  pEles[i].style.border = '4px solid #ff0000';
}


// jQuery
$('p').css('border', '4px solid #ff0000');

문서 내용 중 div의 자식 p요소 중 클래스 ‘test2’가 적용된 요소를 모두 찾아 border값을 적용

// javascript
// 클래스 명이 'test2'인 모든 엘리먼트를 변수 test2Eles에 할당
var test2Eles = document.getElementsByClassName('test2');

// test2Eles에 할당된 엘리먼트의 숫자만큼 반복문 실행
for (var i = 0; i < test2Eles.length; i++) {
  var targetEle = test2Eles[i];
  
  // 조건 문으로 .test2 클래스를 가진 엘리먼트 중 P태그이고 부모가 DIV태그를 갖는 경우를 찾음
  if (targetEle.tagName == 'P' && targetEle.parentNode.tagName == 'DIV') {
    targetEle.style.border = '4px solid #ff0000';
  }
}


// jQuery
$('div > p.test2').css({
  border: '4px solid #ff0000'
});

jQuery의 매력은 찾고자 하는 내용이 복잡하면 복잡할수록 더 놀라운 효과를 발휘합니다.( 예제의 경우는 이정도로 복잡한 상황에서도 편리하게 사용할 수 있다는 예로 실무에서는 변경 혹은 특정한 형태를 갖는 엘리먼트는 명확히 표기하는 것이 좋습니다. )
정리해보면 예제를 통해 알아본 것처럼 일단 코드 양으로만 비교해도 자바스크립트보다 jQuery의 코드 양이 훨씬적다는 걸 알 수 있습니다.
더욱 놀라운 건 원하는 노드를 찾기 위해 열분이 이미 알고 있는 CSS 선택자 개념이 jQuery에서 그대로 사용되고 있다는 점입니다. 이 기능은 jQuery가 다른 크로스 브라우징 라이브러리의 도전을 물리치고 지금까지 인기를 얻고 있는 이유 중 하나 입니다.

크로스 브라우징 비교

버튼(#btn1)을 클릭하면 ‘안녕하세요’ 메시지를 띄워주세요(alert)

// javascript
var btnEle = document.getElementById('#btn1');

// 조건문 - attachEvent 메서드가 존재하는 지 확인
// attachEvent(IE에서의 addEventListener와 같은 기능의 메서드로 IE11부터 사용 불가) 
if (btn1.attachEvent) {
  // attachEvent 메서드가 존재한다면 이 것을 통해 click이벤트를 등록
  btn1.attachEvent('onclick', function() {
    alert('안녕하세요');
  });
}else{
  // 존재하지 않는 경우 addEventListener를 통해 click이벤트를 등록
  btn1.addEventListener('click', function() {
    alert('안녕하세요;')
  });
}


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

애니메이션 효과

버튼을 클릭하면 물고기를 왼쪽에서 오른쪽으로 움직여 주세요(javascript)

버튼을 클릭하면 물고기를 왼쪽에서 오른쪽으로 움직여 주세요(jQuery)

jQuery는 애니메이션 기능을 자체적으로 제공하고 있기 때문에 간단한 애니메이션부터 복잡한 애니메이션까지 쉽게 만들 수 있습니다. jQuery는 편리하고 유용하지만 여기서 주의해야할 사항이 하나 있습니다. 지금까지 내용을 보면 자바스크립트를 거의 배우지 않아도 되는 것처럼 느끼는 사용자도 있을 것 입니다.
하지만 이건 정말 잘못된 생각으로 jQuery는 그저 편한 여러 라이브러리 중 하나이며 전체가 될 수 없습니다.

02_jQuery와 CSS와의 관계

책 P54 ~ P55 참고

lesson 04 - jQuery 개발 환경 설정

CDN(Content Delivery Network)
http://cdn.hosting.kr/cdn%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94/

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

대부분의 프로그래밍 언어에는 진입점에 해당하는 main()함수가 있습니다. jQuery역시 main()과 비슷한 진입점을 제공하는데요. 바로 ready()라는 메서드 입니다.
ready()메서드는 문서의 노드를 사용할 준비가 되면 document 객체에서 발생하는 DOmContent loaded이벤트 처리를 포장한(wrapping) 메서드 입니다.
jQuery에서 ready()를 이용해서 진입점을 설정하는 방법은 다음과 같이 4가지 방법이 있습니다.

// 방법1(jQuery에서 공식으로 권장하는 방식)
$(document).ready(function() {
  alert('jQuery에 온 걸 환영합니다.');
});

// 방법2
jQuery(document).ready(function() {
  alert('jQuery에 온 걸 환영합니다.');
});

// 방법3
$(function() {
  alert('jQuery에 온 걸 환영합니다.');
});

// 방법4
jQuery(function() {
  alert('jQuery에 온 걸 환영합니다.');
});

ready()와 load()

오중호랑이의 비밀로그 - jQuery ready와 load의 차이
http://ojtiger.com/179

lesson 05 - jQuery의 정체

01_$()의 기본 사용 법

CSS선택자와 $()를 알고 있다면 다음과 같은 방식으로 기본적인 처리가 가능합니다.

$(‘CSS선택자’).메서드();

02_$()의 의미

jQuery 라이브러리 내부를 상펴보면 다음과 같이 작성되어 있는 것을 확인할 수 있습니다.

1	window.jQuery = window.$ = jQuery;

정리해보면 $는 jQuery 함수와 동일하며 jQuery함수를 좀 더 쉽게 사용하기 위한 일종의 단축이름 입니다.

1
2
3

// 아래 두 가지는 동일한 코드
$('div').css('background', 'red');
jQuery('div').css('background', 'red');

03_$() 함수의 리턴 값

$('div').css('background', 'red');


var $divEles = $('div');
$divEles.css('background', 'red');

위의 코드는 동일한 기능으로 동작합니다. 아래의 코드가 위와 같이 돌아가는 이유는 $()함수가 jQuery 객체를 리턴하기 때문이며 이러한 사실은 jQuery의 레퍼런스를 보면 좀 더 확실히 알 수 있습니다.

jQuery CSS
http://api.jquery.com/css/

왜 에러가 발생할까요?

$()함수가 jQuery 객체를 반환(return)하기 때문에 $(‘div’) 함수 호출 수 jQuery에서 제공하는 css()메서드를 접근연산자인 ‘.’을 사용해 다음과 같은 구문을 실행할 수 있는 이유(== 메서드 체이닝이 가능한 이유) 입니다.

// css메서드로 값을 반환(이때는 반환되는 값이 jQuery가 아니기 때문에 체이닝 불가)
console.log($('div').css('left'));

// css메서드로 값을 적용하는 경우
console.log( $('div').css('left', '10').addClass('on') );

// jQuery plug-in의 예
$.fn.scrollFixed = function(data) {
  var self = this;
  var fixedBG = new ScrollFixed(self, data);
  
  // 여기서 return 값을 this(jQuery)로 선언하지 않으면 체이닝이 불가능
  return this;
};

04_jQuery의 정체

jQuery는 자바스크립트 DOM을 좀 더 쉽게 다룰 수 있게 도와주는 기능들로 가득 찬 라이브러리입니다. 이 라이브러리(jQuery)는 자바스크립트의 prototype이라는 클래스 제작 문법으로 만들어졌습니다.

// jQuery 구조의 간략한 표현
function jQuery() {
  // jQuery Core
}

jQuery.prototype.css = function() {};
jQuery.prototype.on = function() {};
jQuery.prototype.addClass = function() {};
jQuery.prototype.animate = function() {};

함수를 사용하기 위해서는 함수호출을 해줘야하는 것처럼 클래스(생성자함수) 역시 사용을 위해서는 클래스의 인스턴스를 생성해줘야 합니다.

var 인스턴스명 = new 클래스명;

하지만 우리는 jQuery를 사용할 때 jQuery의 인스턴스를 생성한 적이 없습니다. 그럼에도 불구하고 사용할 수 있는 건 무슨 이유에서 일까요?
바로 $()에서 jQuery의 인스턴스를 사용자 대신 만들어서 제공해주기 때문 입니다.

function $() {
  
  return new jquery();
}
``` 

```javascript
// jQuery plug-in의 예
$.fn.scrollFixed = function(data) {
  var self = this;
  // 인스턴스 생성
  var fixedBG = new ScrollFixed(self, data);
  
  return this;
};

그렇다면 $(‘div’)라는 구문을 실행한다면 인스턴스의 갯수는 document의 ‘div’ 엘리먼트의 갯수만큼 만들어지는 걸까요?
그것은 아닙니다. 1개의 jQuery 인스턴스에 $()함수를 활용해 찾은 여러 개의 div엘리먼트를 포함하게 됩니다.
이때 .css()메서드를 호출하는 경우 jQuery 인스턴스에 넣어둔 div엘리먼트를 반복문을 이용해 노드에 하나씩 접근해 스타일을 변경하게 됩니다.
아래의 jQuery와 javascript를 비교해보면 이해에 도움이 될 것입니다.

// jQuery
$('div p').css('background', 'red');


// javascript
var divEles = document.getElementsByTagName('div');

// 선택한 div의 제어를 위해 반복문을 실행
for (var i = 0; i < divEles.length; i++) {
  // 선택 div내 하위 p를 찾는 반복문을 실행(p하위에 또 p가 존재한다면 반복문이 추가되어야 함)
  var targetEle = divEles[i].getElementsByTagName('p');
  
  for (var j = 0; j < targetEle.length; i++) {
    targetEle[j].style.backgroundColor = 'red';
  }
}

위 코드는 예시지만 jQuery에서 스타일을 변경을 실행하면 jQuery가 아닌 내부의 자바스크립트 DOM이 처리 합니다. 또 jQuery를 사용하는 사용자는 루프를 직접 돌리지 않지만 jQuery 내부에서 루프를 도는 로직이 들어 있기 때문에 jQuery 기능 호출을 줄여주는 것이 좋습니다.

반복적으로 사용되는 엘리먼트는 캐시(변수에 할당)해서 사용하는 것이 좋습니다.

자바스크립트 jquery 완전정복 스터디 2 CH02 jQuery 소개