jQuery

jQuery
Node(Element)를 간편하게 컨트롤 하기 위한 라이브러리
브라우저별로 적절한 처리를 수행해 준다.
=> 크로스 브라우징!

jQuery는 아래 작업들을 편하게 만들어준다.

• HTML 문서에서 Element 찾기

• HTML Content 변경하기

• 사용자의 Action 에 반응하기

• 웹 페이지의 내용을 애니메이션 하기

• 네트워크에서 새로운 컨텐츠 받아오기

• jQuery 로 처리할 수 있는 Element 들의 기능들
  CSS
  Event
  Animation
  Create, Modify, Delete 등을 처리

• Network
  비동기 통신을 간편하게 처리한다.

javaScript 와 jQuery Rendering

• javaScript

/* Rendering이 끝나기 전 */
var h1Element = document.querySelector("h1")
console.log("Before Render > ", h1Element);
// alert("Before Render > " + h1Element.innerText);

/*
 * 브라우저가 Tag를 모두 분석한 뒤
 * 화면에 노출시키는 Rendering 과정이 끝나고 나면
 * onload 이벤트를 호출한다.
 * 
 * rendering이 끝난 후 부터 DOM을 Handling 할 수 있다. 
 */
window.onload = function() {
    // Rendering이 끝난 후
    var h1Element = document.querySelector("h1")
    console.log("After Render > ", h1Element);
    alert("After Render > " + h1Element.innerText);
}; 

• jQuery

// .ready() ==> rendering이 끝난 후의 이벤트
// .ready() ==> js의 window.onload 와 같다.

// jQuery(document).ready(); 이렇게 쓰는 경우는 잘 없다.
// $ ==> jQuery 객체

// shorthand 표현식.
// $(document).ready();

// 위 두 코드와 다 같은 뜻이지만 이 방법을 젤 많이 쓴다.
$().ready( function() {
    // Rendering이 끝나면 파라미터로 전될된 함수가 실행된다.
    // Rendering이 언제 끝날 지 알 수 없다.

    // alert(); 을 실행해서 정상적으로 경고창이 뜨는지를 항상 먼저 확인.
    // alert("jQuery Loading and Rendering 완료");

    // js: document.querySelector("h1")
    var h1Element = $("h1");
    console.log(h1Element);

    // js: console.log( h1Element.innertext );
    console.log( h1Element.text() );

    // h1 DOM의 내용을 변경.
    h1Element.text("Where to?");

    // jQuery 함수의 특징.
    // .함수명(); <-- Getter
    // .함수명(데이터); <-- Setter
});