23.02.27

학습내용

1. jQuery
2. jQuery 사용방법
3. jQuery Object 생성 방법
4. jQuery API

jQuery

JavaScript를 모듈화하여 쉽게 사용가능하게 한 lib이며 아래와 같은 장점을 제공한다.

1. decoupling script

   • cssd의 selector기능을 사용하여 html tag 내부에 javaScript code를 제거해 html과 javaScript 사이의 decoupling 관계를 구축하였다.

2. easy

3. ajax 지원

4. Dom 처리 easy

5. 일관성 event 처리

jQuery 사용방법

1. Tag

   • html에 기술된 시작 tag와 종료 tag

2. Element
   • html의 시작 tag부터 종료 tag까지의 모든 명령어
   • browser에서 parsing되어 메모리에 적재되어있는 상태(java의 인스턴스화와 비슷한 개념)

jQuery는 메모리에 적재되어있는 element를 jQuery Object화 하여 .(dot) 키워드를 통해 api 사용을 가능하게 해준다,

따라서 jQuery에서 제공하는 다양한 api를 사용하고 싶다면 jQuery Object를 생성하면 된다

jQuery Object 생성 방법

jQuery는 html에 접근하기 위해 html의 tag, id, class 정보를 이용한다

//tag 정보를 사용해 접근
$("div").css('color', 'red');

//id 정보를 사용해 접근
$("#uniqueId").css('color', 'red');

//class 정보를 사용해 접근
$(".abc").css('color', 'red')

jQuery API

1. val()

   • 파라미터 값을 넣지 않으면 해당 jQueryObject의 value를 가져고며 파라미터를 넣으면 해당 jQueryObject의 value를 변경한다.

2. html()

   alert($('body').html());

3. appendTo()

   //뒤 객체에 앞의 객체를 붙힌다
   $(html).appendTo("body");

4. append()

   //앞의 객체에 뒤의 객체를 붙힌다
   $('div').append($('h1'));

5. empty

   $('form[name=test01]').empty();

6. remove()

   $('div').remove();

$(document).ready(function(){})

window.onload = function(){ };

기존 javaScript에서는 위 event를 통해 디자인을 입힌 html이 완성되면 해당 이벤트를 호출하였다.

(document).ready(**function**(){}) 

DOM 구조가 완성되면 실행되는 event이다.

html은 DOM이라는 문서 구조가 만들어지면 해당 문서 구조위에 디자인을 입힌뒤 사용자에게 보여준다.

Question

Q. comperss uncompress 차이

A. compress의 source code는 사람이 읽기 쉽게 개행문자가 포함되어있다.

​ 반면 uncompress는 기계어에 가깝게 개행문자등을 제거하여 작성된 파일이다.

Q. class, id, name 차이

A. class는 html 내에 여러 태그에 기술 할 수 있기에 재사용을 목적으로 사용하며 주로 디자인 측면에서 사용된다.

id는 html 내에 고유한 식별자이다.

name은 form 태그로 server에 데이터를 전송시 key값이 되며 name을 통해 value를 가져올 수 있다.