jQuery

자바스크립트를 매우 단순하게 유지
모든 주요 웹 브라우저에서 일관되게 동작하는데 중점을 둠
원하는 기능을 라이브러리에서 제공하지 않을 때를 대비하여 간단하면서도 강력한 기능 확장 방법을 만들어 두었다.

셀렉터 : 엘리먼트를 어트리뷰트나 HTML 문서 안에서의 위치를 기반으로 간결하게 표현

ex 1) $(selector)

ex 2) jQuery(selector)

체인(Chain) : 체인을 사용하면 원하는 결과를 얻는 데 필요한 코드의 양이 확연히 준다.

체인은 무한대로 연결할 수 있다.

ex) $("div.notLogForThisWorld") .fadeOut().addClass("removed");

$("p:even"); // 모든 짝수 번째 <p> 엘리먼트를 선택

$("tr:nth-child(1)"); // 모든 테이블에서 첫째 행을 선택

$("body > div"); // <body>의 바로 아래 자식인 <div> 엘리먼트를 선택

$("a[href$=pdf]"); // PDF 파일의 링크를 선택

$("body > div:has(a)") // <body>의 바로 아래 자식이면서 링크를 포함하는 <div> 엘리먼트를 선택

페이지를 열었을 때 바로 적용되는 스크립트를 사용하려면 window 인스턴스의 onload 핸들러를 사용한다.

window.onload = function() {
    $("table tr:nth-child(even)").addClass("even"); //얼룩무늬 형태의 테이블 class 'even'을 격줄로 적용
}

위의 onload 핸들러를 사용하면 브라우저는 DOM 트리를 생성할 뿐만 아니라 모든 이미지와 다른 외부 리소스까지

로드된 후에야 onload 코드를 실행하고 페이지를 브라우저에 표시하기 때문에 시간차를 느낀다.

정형 문법(formal syntax) : onload 보다 나은 접근법으로 문서 구조를 파싱하고 브라우저가 HTML을 DOM 트리로 변환할

때까지만 기다린 다음 동작을 적용하는 스크립트를 실행. 크로스 브라우저 환경에서 구현하기 쉽지 않으나 jQuery에는 DOM

트리가 로드된 다음 다른 외부 리소스를 로드하기 전에 코드를 실행할 수 있다.

$(document).ready(function() {
    $("table tr:nth-child(even)").addClass("even");
});

이런 정형 문법 대신 다음 형태가 간단하고 더 자주 쓰인다.

$(function() {
    $("table tr:nth-child(even)").addClass("even");
});

window 객체의 onload는 오직 한 함수만 허용하지만 위와 기법은 여러 번 사용할 수 있고 브라우저는 모든 함수를 페이지에서

선언한 순서대로 실행한다.

다른 라이브러리와 jQuery 사용시 충돌 해결 방법

jQuery에서 사용하는 $ 과 jQuery 식별자에서 $ 은 prototype과 같은 다른 라이브러리에서도 많이 사용한다.

따라서 jQuery와 같이 사용하면 충돌하게 되는데 jQuery에서는 이런 문제를 해결해 주는 함수가 있다.

jQuery.noConflict();

다른 라이브러리와 같이 사용할 때에 위의 함수를 실행시켜주고 $ 대신 jQuery의 식별자로 jQuery를 작성하면 된다.

MoveNext