jQuery 1.4.x 입문서, jQuery Cookbook (실전 jQuery 쿡북) v1.4.x 증보판

깜장 바탕에 빨간 글씨 jQuery Cookbook.
울 회사 홈피가 까망 빨강인데, 딱 스타일이 맞네요.. ㅎㅎ

관리자 화면 만들다가 갑자기 돌아가지 않는 자바스크립트 코드를 보고,
몇 시간 동안 이리저리 해 보다 결국 포기했더랬어요.
그런데, 여기저기 뒤적이다 보니.. jQuery 는 어떨까 싶어서,
이쪽 코드를 몇개 테스트 했습니다.. 음.. 이제는 잘 되는군요.

범용성이라는 것이 이리 중요한 것을..
조금씩 다른 웹브라우저들을 모두 테스트 해서,
그리고, 동일한 코드로 여러 브라우저에서 작동하게 만들어진 자바스크립트 프레임웍..
jQuery. 이제 슬슬 공부해 봐야겠네요.
그동안 흐릿하게 나마 접해 왔던 jQuery 를 요리해서 맛나게 잘 먹겠습니다.

역시나 인터넷으로 서적을 구매할 때는 예스24 가 낫겠다 싶어, jQuery 관련 서적들을 고르고 고르다 발견하였는데..
구매하고 배송 관련 SMS 를 접하는 순간, 이게 뭐야.. '이노지스' 그 악명 높다던 배송업체..?
오늘 중으로 받는다 했는데.. 갑자기 우울해졌지 뭡니까.
그런데, 아니네요. 오후 2시에 책을 받았습니다. 암튼, 어제 구매하고 오늘 책을 받으니 기분 좋아요.

o 태요(김태영) 님의 jQuery 입문자용 초급 강좌,
http://taeyo.net/Columns/List.aspx?SEQ=29
Cookbook 은 입문서 + α 정도.
각버전에 담긴 기능은 공식 홈페이지 참조.

o 본문 예제. http://jquery-cookbook.com/examples/

o jQuery 공식 홈페이지 (다운로드)
http://jquery.com/
jquery-1.4.2.js 과 jquery-1.4.2.min.js 의 차이는..
주석의 유무와 난독화의 여부 정도.
디버깅 시에는 전체버전, 실사용 시에는 min 버전.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js
http://docs.jquery.com/Downloading_jQuery
http://www.opensource.org
http://www.fsf.org
http://dev.aol.com/dhtml_style_guide
http://gsgd.co.uk/sandbox/jquery/easing/

o jQuery 자체는 MIT License
Cookbook 에 들어 있는 예제는 라이센스 필요.
응용하는 것까지 라이센스를 달라하지는 않을듯..

o 알아두면 좋을 웹사이트
http://docs.jquery.com/Tutorials
http://jquery14.com/
http://plugins.jquery.com/
http://code.google.com
http://github.com
http://sourceforge.net

o 애니메이션 플러그인 cycle
http://www.malsup.com/jquery/cycle/
scrollUp/Down/Left/Right
slideX/Y, blindX/Y/Z, growX/Y, curtainX/Y
shuffle
turnUp/Down/Left/Right, cover, uncover
zoom, fadeZoom
toss
wipe

o http://jqueryui.com/download

o 유효성검사 Plug-ins
http://plugins.jquery.com/project/validate

o 대소문자를 구별한다.
이를테면, bind 함수 사용시 "mouseEnter" 라고 하면 마우스 커서가 올려졌을때 작동하지 않는다.
그리고, slideUp fadeIn 등은 대소문자를 섞어 사용.

o jQuery 뿐만 아니라 JS 는 body 가 끝나기 바로 전에 위치하는 것이 요즘 추세. 본문이 먼저 나오고, 거기에 애니메이션이 얹혀지는 효과라는 건가.. 암튼, 속도도 더 빠르다는..

o 초보는 '1장 jQuery 기초' 필독.
- JScript 코드는 웹페이지 끝부분에 기술
jquery.js 조차도 head 태그에 기술하지 않고 웹페이지 끝부분에 기술.
다만, jQuery 를 사용하는 코드 앞에 jquery.js 를 기술
그리고, 적어도 body 태그가 끝나는 곳 앞에서는 반드시 기술
- 코딩량을 최소화

o Json
- pp. 182-185. 외부 Json 파일을 읽어서 사용.

o jQuery 최적화
- 여러개의 tr 요소 대신 단일 table 또는 tbody 삽입
- DOM 조작 대신 .innerHTML 이나 .html() 사용
- 문자열 결합 대신 배열과 .join() 사용
- $.each 대신 순수 for 루프 사용
- 이름 조회 최소화
- 개체를 변수로 Caching

o for(var i=-1, n=array.length; ++i<n;){ ... }
- 배열의 길이를 캐시
- ++i 이 i++ 보다 몇몇 브라우저에서 빠르다
- 이름 조회를 줄이기 위해 루프 변수의 증가와 테스트를 결합
- while, do~while 보다 for 루프가 느리지 않고, 가독성도 높다.
- 배열이 아닌 개체의 반복은 for(var key in object){ var item=object[key]; .. } (단, jQuery prototype 등에서는 사용금지)

o animate
- CSS 속성 제어
- scrollTop, scrollLeft DOM 속성 제어
- CSS 계측단위 pixel, em, inch, % 사용
- 상대값 고정값
- toggle, $('..').animate({opacity:'toggle', height:'toggle'});
- easing
- callback
- Queue
- 속도, Mili-Second 단위, slow 600, fast 200 정도. Default 400. 0 은 애니메이션 없음.

$(요소1).animate({scrollTop:요소2},300); 위로 스크롤 되는 애니메이션

animation 은 jQuery 큐에 쌓였다가 순차적으로 실행.
animation 중지는 stop()
stop(true) jQuery 큐에 쌓인 모든 애니메이션 중지

카멜 표기법 사용
html 태그가 margin-left 이면 marginLeft 사용

$(..).removeClass('a b c..')
$(..).addClass('a b c..')
$(..).hasClass('a b c..')

css 다룰때, 괄호({ 와 }) 를 사용할때 하나의 속성만 사용하면 작동하지 않을 수 있다.
$(..).css('width','100px')
$(..).css({width:100px, display:'none'})

$(..).removeAttr('a')
$(..).attr('a','b')
$(..).attr('a')

o toggle

$('..').show() 대신 $('..').toggle() 사용
$('..').slideToggle() 또는 $('..').slideToggle('slow'), $('..').slideToggle(100)
$(..).animate({opacity:'toggle',height:'toggle'})

o 애니메이션
toggle()
slideUp(), slideDown(), slideToggle()
animate()
fadeIn(), fadeOut(), fadeTo()

o
$(..).next().filter(':not(:first)')
$(..).prev()

o bind, unbind

bind 첫번째 파라미터, click keydown keyup input paste mouseover mouseout

$(..).bind('click',function(p){..}); bind 표현
$(..).click(function(p){..}); 단축 표현

function funcA(e){..}
$(..).click(funcA).keydown(funcA);
$(..).bind('click keydown',function(p){..});
$(..).bind({click:function(){..}, keydown:function(){..}});

function handler(e){..}
$(..).unbind('click keydown'); // click 과 keydown 이벤트에 설정된 모든 bind 제거
$(..).unbind('click keydown',handler); // click 과 keydown 이벤트에 설정된 handler 함수만 unbind

http://makand.tistory.com/entry/jQuery-Event-Reference

IE 는 paste 이벤트 발생후에 붙여넣기가 이루어지므로..
$('..').bind('input keyup paste',function(){ setTimeout(fucnA,0); });

bind 함수 안에서 this 라고 하면 해당 개체의 object
<map name="Map" id="Map">
 <area id="a00" shape="poly" coords="..." />
 ...
</map>
와 같이 map 이 정의 될 때
$('#a'+(i>9 ? i : '0'+i))
    .css('cursor','hand')
    .attr('alt',i0[i]+ '. ' +i1[i]+ ', ' +i2[i])
    .bind('click',function(e){ openThis(Number(this.id.substr(1,2))) });

o 매크로

function clicked(e){
$('div.pan').hide();
$('#pan'+e.data.pan).show();
$('#desc').text('..'+e.data.col);
}
$(..).bind('click',{pan:1, col:'red'}, clicked);

$.each(['red','green','blue'],function(p,c){
  n++;
  $(..+n).bind('click',function(e){
    $('div.pan').hide();
    $('#pan'+n).show();
    $('#desc').text('..'+c);
  });
});

$('..').each(function(index,element){ .. });

<ul ...>

  <li ... alt="aa">...</li>

  <li ... alt="bb">...</li>

  ...

</ul>

일때 $('ul>li').each(function(index,element){

  alert(element.alt); // 차례로 aa, bb 가 alert 된다.

});

each 루프 안에서 return false; 하면 break 기능, return true; 하면 continue 기능. (재미있네요.)

o trigger
trigger 는 IE 의 fireEvent 와 동일 기능. 사용자 이벤트를 기다리지 않고 프로그램이 해당 이벤트를 발생시키는 것.
$(..).trigger('click') 이라 하면 사용자가 $(..) 를 마우스로 클릭한 것과 동일한 효과
click 대신에 mouseover 등등을 사용하면 됨.
페이지가 새로 고침되는 순간, 라디오 버튼 체크박스 등의 상태가 유지되는 웹브라우저를 위해 초기 세팅할때 이용

o each
$('..').click(function(){..}); 와 $('..').change(function(){..}); 등을
$('..').each(function(){ .. $(this).click(function(){..} $(this).change(function(){..} } 으로 통합.

$('..').each(function(){ .. if(..) return false; .. }); return false 하면 each 문 안의 function 문이 종료되면서 each 문 중지

o 유효성검사
$(document).ready(function($){
$('..').validate();
});
$.validator.addMethod('..',function(value,element){
return this.optional(element) || /../.test(value);
},'메시지');
$.validator.addMethod('..',function(value,element,params){
return this.optional(element) || value==(params[0]+params[1]);
},'메시지 {0} {1}');

o Drag&Drop 드래그 앤 드랍
http://jqueryui.com/demos/draggable/#sortable 드래그 사이에 넣으면 자리가 자동으로 바뀜. 이외에도 ui 에 대한 데모
http://jqueryui.com/demos/droppable/#photo-manager 이미지 확대
http://jqueryui.com/demos/sortable/#display-grid 그리드
http://jqueryui.com/demos/dialog/#modal 모달 다이얼로그 대화상자
http://findfun.tistory.com/435

http://jqueryui.com/demos/dialog/#modal-form 모달 입력폼