jQuery 소개

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

jQuery 기능

DOM : 노드찾기 , 추가,수정,삭제

Ajax : 서버와 데이터를 쉽게 주고받을수 있는 다양한 통신기능 제공 , 서버에서 받은 데이터를 jDOM 과 연계할수 있는 기능제공->동적인 화면제작이 쉬움

jQuery플러그인 : DOM과 직접 연계되 있어 DOM요소에 효과를 쉽게 적용가능

jQuery효과

jQuery 기능1

jQuery 기능2

jQuery 를 사용해야 하는 이유?

1. 내용이 복잡할수록 놀라운 효과를 보여준다.

->코드의 양을 줄일수 있다.

2. DOM을 아주 쉽게 다룰수 있는 기능을 제공하는 라이브러리.

크로스 브라우징처리 -> 내부에서 모두 처리해줌

3. 애니메이션 효과 :자체적으로 기능을 제공하고 있다.

주의사항 : 자바스크립트 문법을 이용한 로직 구현 능력이 부족하면 잘 이용할수 없다.

CSS는 정적 : 웹 페이지 문서가 실행 후에는 변경할 수 없음

jQuery는 동적 : 웹 페이지 문서가 실행된 후 변경가능

=>jQuery에서 CSS 선택자 개념은 매우중요하다.

jQuery 개발 환경 설정

jQuery 라이브러리 삽입

삽입 방법

1.CDN(Content Delivery Network)에 올려져 있는 jQuery 파일을이용

구글 : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

jQeury : <script src="//code.jquery.com/1.8.3/jquery-min.js"></script>

2.파일을 다운로드해서 이용

CDN사용시 문제점 : http://blog.joostory.net/386

jQuery 개발 환경 설정

진입점인 ready()함수 설정

ready(): 문서의 노드를 사용할 준비가 되면 Document 객체에서 발생하는 DOMContentLoaded 이벤트 처리를 포장한 메서드

ready() 와 load이벤트 차이점

ready():이 이벤트 발생한 시점에서는 이미지나 플래시 같은 무거운 콘텐츠는 아직 로드되지 않음.

window.onload = 무거운 콘텐츠가 모드 로드되고 난 후에 발생하는 이벤트

-- 상황에 맞게 사용한다.--

jQuery 의 정체

$()기본 사용법

$()의 의미 : 의미 그대로 $함수를 호출한다.

window.jQuery = window.$=jQuery

->jQuery함수를 좀서 쉽게 사용하기 위한 일종의 단축키

$()함수의 리턴값 : jQuery객체 내부에 들어있는 해당 메서드를 리턴

http://api.jquery.com/jQuery/

jQuery 의 내부보기

$("div").css() 는 점을 이용해 내부의 css()에 접근한 것!

jQuery 의 내부보기

jQuery를 prototype으로 표현

fusion jQuery(){}

jQuery.prototype.css=funcion(){}

jQuery.prototype.on=funcion(){}

jQuery.prototype.addClass=funcion(){}

jQuery.prototype.click=funcion(){}

jQuery.prototype.animate=funcion(){}

jQuery 의 내부보기

사용법 : var 이름 = new 클래스이름();

jQuery 의 내부보기

<body>

</body>

var $divs=$("div"); 를 실행 →

jQuery 의 내부보기

fuction css(){

    for(var i-0; i<nodes.length; i++){
        nodes[i].style.color="#f0000";
    }
}

$(document).ready(funfion(){
    //메뉴 항목 추가1
    $("#menu").append("<li>newmenu1</li>");
    //메뉴 항목 추가2
    $("#menu").append("<li>newmenu2</li>");
    //메뉴 항목 추가3
    $("#menu").append("<li>newmenu3</li>");
})

$(document).ready(funfion(){
    var $menu= $("#menu");
    //메뉴 항목 추가1
    $menu.append("<li>newmenu1</li>");
    //메뉴 항목 추가2
    $menu.append("<li>newmenu2</li>");
    //메뉴 항목 추가3
    $menu.append("<li>newmenu3</li>");
})

실제는 jQuery객체 내부에 있는 자바스크립트DOM이 처리

jQuery내부에는 루프도는 로직이 들어있음 -> 호출을 줄여라!

.css()호출시 jQuery내부의 div객체를 for문과 같은 반복문으로 접근

ㄹ홓ㄹ

By yoorikim

jQuery 소개

ㄹ홓ㄹ

More from yoorikim