앞서 포스팅했던 이벤트 등록법은 순수 html 혹은 JavaScript를 이용한 방법이었습니다.

jQuery를 이용하면 아래와 같이 매우 간결하고 쉽게 이벤트 등록이 가능하므로,
매우 생산적! 이라고 할 수 있습니다. (프로그래머들은 간결한 것을 좋아하죠 :) )

opentutorials.org 사이트에서 참 많이 배우고 가는데요.
밑에 예시도 거기서 참조하였습니다. ㅎ

** selector를 이용한 이벤트 등록

** html 태그가 로딩되기 전에 script를 실행시키는 late binding
(onload 이벤트와는 다르다.)

** 다중 바인딩

1) 하나의 엘리먼트에 여러개 이벤트 등록

2) 이벤트에 따라 다른 핸들러 등록

3) chaining 기법도 가능
$('#target').on('focus', handler).on('blur', handler);

** 이벤트 제거 (off 함수 사용)

출처
https://opentutorials.org/module/904/6862
https://opentutorials.org/module/904/6888

그림 : http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

Element객체와 jQuery

document.getElementById : return type은 HTMLLIELement
document.getElementsByTagName : return type은 HTMLCollection (유사배열)
-> 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection return
constructor 혹은 constructor.name 로 확인 가능

var li = document.getElementsByTagName('li');
var li2 = $(li);
위와같이 jQuery function 인 $(); 로 둘러싸면, return type이 jQuery 가 되지만,
복수일 경우 유사배열로 잡히며, li2[0], li2[1]... 각각은 HTMLLIELement 타입이 된다.
-> l1.constructor.name, li2.constructor.name, li2[0].constructor.name  로 확인 가능

document.getElementById('target').getAttribute(name);
==> ==> $('#target').attr(name);
document.getElementById('target').setAttribute(name, value) ;
==> $('#target').attr(name, value);

document.getElementById('target').hasAttribute(name);

document.getElementById('target').removeAttribute(name);
==> $('#target').removeattr(name);

Node 객체

Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild : 첫번째 자식노드
Node.lastChild : 마지막 자식노드
Node.nextSibling : 다음 형제 노드
Node.previousSibling : 이전 형제 노드

** Node 와 Node.nextSibling.previousSibling는 같다.  (이런 식으로 Chaining 식으로 사용 가능)

Node.nodeType node의 타입을 의미한다.
Node.nodeName node의 이름 (태그명을 의미한다.)

** 2015_08_28 추가!

querySelector() 이용 시, 태그의 class 속성 접근 시 매우 편리

this.calls.querySelector('.handled-call.incoming .additionalContactInfo');
위와 같은 방식으로 calls라는 변수(어느 태그값을 가져온 변수 document.getElementById 등 이용) 하위에
태그들 중 handled-call.incoming 클래스를 가진 녀석의 하위에 있는 녀석들 중 additionalContactInfo 클래스를 가진 녀석이 리턴된다.

jQuery는 JavaScript에서 사용되는 편리하고 강력한 라이브러리 입니다.

자세한 내용은 아래 링크를 참고 하시면 됩니다. :)
-> http://jquery.com

* jQuery의 API 참고
-> https://api.jquery.com

jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있고,
jQuery는 객체를 조회할 때 CSS 선택자를 이용합니다.

jQuery 라이브러리 사용 (jQuery’s CDN)
--> html 코드에 아래 코드를 추가하면 된다. :)
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

jQuery의 기본 Syntax
$('CSS의 선택자').css('color', 'pink');

$('li').css('color', 'pink');
====================================================================================

 $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.
====================================================================================

* jQuery에서 attr과 prop의 차이!!
-> attr은 html의 attribute 실제 값을 리턴, prop는 그에 매칭되는 JavaScript의 property값을 리턴

DOM과 jQuery의 비교 Sample
아래의 코드는 동일한 결과를 가져오는데,  jQuery가 훨씬 편리한 것을 알 수 있다.

1. DOM을 사용한 경우

            var lis = document.getElementsByTagName('li');
            for(var i=0; i<lis.length; i++){
                lis[i].style.color='pink';   
            }

2. jQuery를 사용한 경우 (jQuery에서는 아래 한 라인으로 암시적 반복이 수행된다.)

            $('li').css('color', 'pink')

jQuery의 Chaining 문법
아래의 Chaining 문법을 통해 여러가지의 css 설정 적용이 한 Line 에서 가능하다. (멋짐..)

         $('#active').css('color', 'red').css('textDecoration', 'underline');
/* active 라는 id를 가진 요소에 red와 underline을 적용 */

jQuery의 조회 범위 제한 문법
아래와 같이 여러가지 방법을 통해 범위 제한 및 CSS 적용이 Chaining가 가능하다.

/* Javascript Sample */
console.info("hello world");