CHAPTER 02

jQuery 소개

들어가며..

jQuery 기능
jQuery 학습 방법
jQuery를 사용하는 이유
jQuery 개발 환경 설정
jQuery의 정체

크로스 브라우징 라이브러리의 한 종류!

자바스크립트 요소 중, 자바스크립트 DOM을 좀 더 쉽게 사용할 수 있게 도와주는 라이브러리!

jQuery란?

웹 표준 기술을 채용하여 다른 기종/플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듬과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법!

EX) Jindo 등..

크로스 브라우징?

jQuery 기능 1

jQuery 기능 2

코어

선택

조작

속성

스타일

탐색

Ajax

이벤트

효과

유틸리티

jQuery 함수
jQuery 개체 접근자
Data
플러그인
사용운영성

계층구조
기본 필터
콘텐츠 필터
자식 필터
...

콘텐츠 변경
내부 삽입
외부 삽입
주변 삽입
제거
복사

Attr
Class
HTML
Text
Value

CSS
포지셔닝
높이와 너비

필터링
검색
체인

Ajax 요청
Ajax 이벤트
기타

페이지로드
이벤트 처리
이벤트
인터랙션 도우미
이벤트 도우미

슬라이딩
페이딩
사용자 정의
설정

브라우저와 기능 탐지
배열과 객체 작업
테스트 작업
문자열 작업
Url

jQuery 학습 방법

jQuery는 수많은 메소드를 가지고 있는 클래스!

정확히 말하자면 자바스크립트 문법 중 프로토타입으로 만들어진 클래스!

jQuery를 배운다는 것은 jQuery 메소드를 배우는다는 의미!

노드 다루기
스타일 다루기
속성 다루기
이벤트 다루기
위치 및 크기 다루기
애니메이션 효과 다루기
....

http://www.w3schools.com/jquery/default.asp

http://api.jquery.com/

jQuery를 사용하는 이유

자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 덩어리!

자바스크립트로 10줄 짤걸 jQuery로 1줄이면 OK!

CSS 선택자를 이용해서 원하는 노드를 쉽게 찾을수 있음!

예제01: 아이디가 header인 노드를 찾아 border를 4px solid #f00으로 변경하기
$(document).ready(function(){           
    $("#header").css("border", "4px solid #f00");
});

예제01: 아이디가 header인 노드를 찾아 border를 4px solid #f00으로 변경하기
window.onload = function() {
    var target = document.getElementById("header");
    target.style.border = "4px solid #ff0000";
}

예제02: 태그이름이 p인 노드를 찾아 border를 4px solid #f00으로 변경하기
$(document).ready(function() {
    $("p").css("border", "4px solid #f00");
})

예제02: 태그이름이 p인 노드를 찾아 border를 4px solid #f00으로 변경하기
window.onload = function() {
    var ps = document.getElementsByTagName("p");
    for (var i = 0; i < ps.length; i++) {
        ps[i].style.border = "4px solid #ff0000";
    }
}

예제03: 문서 내용 중 div의 자식 p요소 중 클래스 test2이 적용된 요소를 모두 찾아 border를 4px solid #ff000으로 변경하기
$(document).ready(function() {
    $("div>p.test2").css("border", "4px solid #ff0000");
})

예제03: 문서 내용 중 div의 자식 p요소 중 클래스 test2이 적용된 요소를 모두 찾아 border를 4px solid #ff000으로 변경하기
window.onload = function() {
var data2List = document.getElementsByClassName("test2");
    for (var i = 0; i < data2List.length; i++) {
        var data2 = data2List[i];
        if (data2.tagName == "P") {
            if (data2.parentNode.tagName == "DIV") {
                data2.style.border = "4px solid #ff0000";
            }
        }
    }
}

jQuery를 사용하는 이유

예제 04: 버튼을 클릭하면 "안녕하세요" 메시지를 띄워 주세요.
$(document).ready(function(){           
    $("#btn1").on("click", function() {
        alert("안녕하세요.");
    });
});

예제 04: 버튼을 클릭하면 "안녕하세요" 메시지를 띄워 주세요.
window.onload = function() {
    // DOM Level 2방식으로 이벤트 리스너 등록하기.
    var btn1 = window.document.getElementById("btn1");
    // 크로스 브라우징 처리.
    if (btn1.attachEvent){
        btn1.attachEvent("onclick", function() {
            alert("안녕하세요.");
        });
    } else{
        btn1.addEventListener("click", function() {
            alert("안녕하세요.");
        }, false);
    }
}

예제 05: 버튼을 클릭하면 물고기를 왼쪽에서 오른쪽으로 움직여 주세요.
$(document).ready(function() {
    //물고기 노드 구하기.
    var $fish = $("#fish");
    
    $("#btnStart").click(function() {
        // 물고기 움직이기
        $fish.animate({
            left : 430
        }, 5000);
                     
    });
})

예제 05: 버튼을 클릭하면 물고기를 왼쪽에서 오른쪽으로 움직여 주세요.
window.onload = function() {
    //물고기 노드 구하기.
    var fish = document.getElementById("fish");
    var btnStart = document.getElementById("btnStart");
    
    var left = 50;
    var timerID = 0;
    
    btnStart.addEventListener("click", function() {
    
        // 물고기 움직이기
        timerID = setInterval(function() {
            left++;
            fish.style.left = left + "px";
            
            if (left >= 430) {
                clearInterval(timerID);
                timerID = 0;
            }
        }, 20)
    }, false)
}

예제 06: 아이디가 header인 노드를 찾아 border를 4px solid #f00으로 변경하기
$(document).ready(function() {
    $("#header").css("border", "4px solid #f00");
})

예제 07: 문서 내용 중 div의 자식 p요소 중 클래스 t est2가 적용된 요소를 모두 찾아 border를 4px solid #ff000으로 변경하기
$(document).ready(function() {
    $("div>p.test2").css("border", "4px solid #f00");
});

jQuery를 사용하는 이유

jQuery 와 CSS 차이점?

CSS 정적(웹페이지 문서 실행되기전)
jQuery 동적(웹페이지 문서 실행된 후)

jQuery 개발 환경 설정

jQuery 라이브러리 삽입

CDN(Content Delivery Network) 방법

구글 Ajax API CDN
MS CDN
jQuery CDN

jQuery 개발 환경 설정

jQuery 라이브러리 삽입

파일 다운로드 방법

http://jquery.com/download/

jQuery 개발 환경 설정

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

// 방법1
jQuery(document).ready(function(){
    alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});

// 방법2
// 방법1을 간소화
jQuery(function(){
    alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});

// 방법3
// 방법1에서 jQuery함수 대신 $함수로 변경
$(document).ready(function(){
    alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});

// 방법4
// 방법3을 간소화
$(function(){
    alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});

jQuery 개발 환경 설정

DOMContentLoaded vs load

jQuery - DOMContentLoaded 포장
이벤트 발생 시점에는 이미지나 플래시같은 컨텐츠는 아직 로드 되지않음!

예제3

jQuery의 정체

$() 기본 사용법

<script>
    $(document).ready(function(){

    });
</script>

jQuery의 정체

$() 의미

이름이 $인 함수 그 자체
$()는 $함수를 호출하는 의미
window.jQuery = window.$ = jQuery

$("div").css("border", "4px solid #f00");
jQuery("div").css("border", "4px solid #f00");

jQuery의 정체

$() 함수의 리턴값

. 은 접근 연산자
css() 메서드 중 하나
리턴값 jQuery 객체
http://api.jquery.com/jQuery/

var $divs = $("div");
$divs.css("border", "4px solid #f00");

jQuery의 정체

$() 함수의 리턴값

1. $("#target").css("font-size").addClass("select");
2. $("#target").css("font-size", 12).addClass("select");

둘중 뭐가 되고 안될까요?

jQuery의 정체

인스턴스 생성

var 인스턴스 이름 = new 클래스 이름();

왜 인스턴스를 생성하지 않고 바로 사용할 수 있는 이유는 뭘까?

jQuery의 정체

내부적으로 생성 해주기 때문!

function $(){
    .....
    return new jQuery()
}

jQuery는 자바스크립트에 prototype으로 구현되어 있음!

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

CHAPTER 02

jQuery 소개

들어가며..

끝

deck

deck

ohyas

CHAPTER 02

jQuery 소개

들어가며..

끝

deck

More from ohyas