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 라이브러리 삽입

파일 다운로드 방법

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의 정체

$() 함수의 리턴값

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의 정체

jQuery의 정체

인스턴스 생성

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

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

jQuery의 정체

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

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

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

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

끝

Made with Slides.com