[jquery] jQuery 입문 03 (170329)

 jQuery 입문 03

**중요해서 복습**

• jquery 개요

함수의 형태

var a = function(){     };

=> 제이쿼리도 $라는 변수에 넣은 일종의 함수라고 보면 편하다.

•  var $ = function(){    };

$(    ); 형태를 이용하면 [    ] (외형상 배열)로 변한다. ( jquery 기능이 합쳐진 array로 바뀐다 )

"div", "p", "#one", ".gura" 등 ===> selector

• 개체 생성되는 시점 (javascript 과 일반요소)

- xxx.html의 body속 요소가 생성되는 시점 : 페이지가 로딩될 때

- $("<div/>"), $("<img/>"), $("<li/>") 가 생성되는 시점 : 원하는 시점에 가능하다.

• 체인 형태  

- $( ).text().css().on();  이러한 형태이다

- value값이나 text값을 읽어오는 것( $("div").text(); , $("input").val(); 등의 형태)은 이미 제이쿼리 객체([ ] 형태를 한 제이쿼리 기능이 합쳐진 array요소)가 아니므로 체인형태로 작성이 불가능하다.

***** 복습 끝 *****

• jQuery API 보는 법

1. jquery api 홈페이지를 접속한다. (http://api.jquery.com/)

2. 가장 위에 있는 hide를 예로 들어, .hide()라는 API가 있다는 것을 알 수 있다.

3. .hide( ) 의 괄호 안에 부여할 수 있는 속성값이 나온다. 

(출처 : http://api.jquery.com/hide/#hide)

- hide 안에 부여할 수 있는 속성은 duration과 complete 이다. 

- 따로 속성명을 명시하지 않고도 type인 number/string이나 function() 을 이용하면 빠르고 쉽게 적용이 가능하다.

4. option 이용 방법

(출처 : http://api.jquery.com/hide/#hide)

- option의 type은 PlainObject임을 알 수 있다.

   ( javscript입문 02 포스팅 참고: http://heekim0719.tistory.com/12 )

- object안에 {key:value, key2:value2, ...} 형태로 나열한다.

- key 값은 duration, easing 등이 있고 type에 맞춰 value자리에 입력하면 된다.

** 이 때, 줄맞춤을 잘해서 헷갈리지 않게 하자!! **

** 코드 전체 **

** 출력 결과 **

cf ) 소소한 팁!

 제이쿼리 객체를 생성할 때는 var $a = $("div"); 형태로 제이쿼리 객체 형태를 알아보기 쉽게 변수 생성을 한다.