2014. 7. 12. 17:30

[javascript] Using Handlebars

Language/javascript

There is a sample.


TestHandleBars.zip


reference : http://handlebarsjs.com


Posted by CoolDragon
2011. 4. 4. 11:52

[javascript] 스크립트 압축 사이트

Language/javascript
자바스크립트 압축 모듈을 종합적으로 제공하고 있으며 압축률에 따라 개발자가 선택할 수 있도록 한다.


The JavaScript

 
2. 압축 선택

 
3. 선택 결과

 

Posted by CoolDragon
2011. 3. 11. 10:10

[javascript] 동적으로 div에 스크롤바 생성하기

Language/javascript
function fncShow(id, xy, type)
{
    var    obj    = document.getElementById(id);

  switch(xy)
  {
        case 'X' :
                obj.style.overflowX = type;
            break;
        case 'Y' :
                obj.style.overflowY = type;
            break;
    }
}

축에 따라 설정이 가능하며 overflow 속성은 visible | hidden | scroll | auto | inherit 등이 있다.
Posted by CoolDragon
2010. 9. 14. 18:55

[javascript] Client Side File Size 확인

Language/javascript
크로스브라우징 파일사이즈 체크 (IE, FF, 사파리, 크롬 사용가능)

function filesize() {

var size = 0;

var browser=navigator.appName;
if (browser=="Microsoft Internet Explorer")
{
var oas = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.getElementById('file').value;
var e = oas.getFile(filepath);
size = e.size;
}
else
{
var node = document.getElementById('file');
size = node.files[0].fileSize;
}
alert(size);
}
Posted by CoolDragon
2010. 7. 22. 01:17

[jquery] Events (이벤트)

Language/javascript
[Browser Events]
■ .error()
  선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생하는 오류 이벤트
   - .bind('error', handler) 의 축약형

  .error( handler(eventObject) )  version 1.0
   (예) 
     1) <img src="missing.png" alt="Book" id="book" />
     2) $('#book').error(function() {  alert('Handler for .error() called.') }); // 이미지가 로드되지 않을 경우 오류 이벤트 발생
       
■ .resize()
  browser window의 사이즈가 변경될때 발생하는 이벤트
   - .bind('resize', handler) 의 축약형
   - .trigger('resize') 를 통하여 이벤트를 발생시킬 수 있다.

  .resize( handler(eventObject) ) version 1.0
   (예) $(window).resize(function() { $('#log').append('<div>Handler for .resize() called.</div>'); });

  .resize() version 1.0

■ .scroll()
  선택한 Element의 스크롤바가 움직일 경우 발생하는 이벤트
   - .bind('scroll', handler) 의 축약형
   - .trigger('scroll') 를 통하여 이벤트를 발생시킬 수 있다.

  .scroll( handler(eventObject) ) version 1.0
   (예) $('#target').scroll(function() { $('#log').append('<div>Handler for .scroll() called.</div>'); });


[Document  Loading]
■ .load()
  선택된 Element(URL : images, scripts, frames, iframes, 그리고 window object 등) 가 로드(load)가 완료되었을 때 발생하는 이벤트
   - .bind('load', handler) 의 축약형
   - "load" JavaScript event

  .load( handler(eventObject) ) version 1.0
    (예)
      1) <img src="book.png" alt="Book" id="book" />
      2) $('#book').load(function() { // Handler for .load() called. }); // 정상적으로 #book의 이미지가 로드되면 이벤트 발생
    (예) $('img.userIcon').load(function(){ if($(this).height() > 100) { $(this).addClass('bigImg'); } });
    (예) $(window).load(function () { // run code });

■ .ready()
  DOM이 준비된(완전히 로드된) 이후 발생하는 특별한 이벤트
   -  <body onload=""> 와 .ready() 는 양립할 수 없으며 둘중에 하나만 사용하도록 한다.
   -  또는 jQeury의 $(window).load() 함수에서 attach 해서 사용한다.

  .ready( handler ) version 1.0
   - $(document).ready(handler) == $().ready(handler) == $(handler) == $(document).bind("ready", handler)
   (예) $(document).ready(function() {
          // Handler for .ready() called.
        });
   
■ .unload()
  페이지가 unload될 때 발생하는 이벤트
   - "unload" 자바스크립트 이벤트
   - 이 이벤트는 브라우저별로 다르게 동작할 수 있다. (http://api.jquery.com/unload/ 참조)

  .unload( handler(eventObject) ) version 1.0
   (예) $(window).unload( function () { alert("Bye now!"); } );

[Event Handler Attachment]
■ .bind()
  선택된 element에 이벤트 핸들러를 붙인다.
   - blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, 
   - mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 
   - change, select, submit, keydown, keypress, keyup, error

  .bind( eventType, [ eventData ], handler(eventObject) ) version 1.0
   (예) $('#foo').bind('click', function() { alert('User clicked on "foo."'); });
   (예) $('#foo').bind('mouseenter mouseleave', function() {  $(this).toggleClass('entered'); }); // 다중 이벤트
   (예) $("p").bind("click", function(event){ 
             var str = "( " + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happened! " + str); 
        }); // 이벤트 핸들러에 event 인자 포함
   (예) $("p").bind("click", {foo: "bar"}, function(event){ alert(event.data.foo); }); // eventData 포함한 예제
   (예) 커스텀 이벤트(Bind custom events)

  .bind( events ) version 1.4
   (예)
      $("div.test").bind({
        click: function(){
          $(this).addClass("active");
        },
        mouseenter: function(){
          $(this).addClass("inside");
        },
        mouseleave: function(){
          $(this).removeClass("inside");
        }
      });

    (예) 참고 : http://api.jquery.com/bind/

■ .unbind()
  선택된 element의 선언된 이벤트 핸들러를 제거한다.

  .unbind( eventType, handler(eventObject) )
    (예) $('#foo').unbind();  // 선택된 element의 모든 이벤트 제거
    (예) $('#foo').unbind('click'); // click 이벤트를 제거
    (예) $('#foo').unbind('click', function() {  alert('The quick brown fox jumps over the lazy dog.'); }); // 이벤트를 제거하면서 함수동작

■ .delegate()
  선택된 Element의 selector의 이벤트 핸들러를 붙인다. (앞으로 추가될 element의 이벤트 핸들러도 적용된다.)
   - live()함수를 보완하여 만들어진 함수
   - http://honey83.cafe24.com/100

  .delegate( selector, eventType, handler ) version 1.4.2
   (예)
     $("table").delegate("td", "hover", function(){
       $(this).toggleClass("hover");
     });
   (예) $("body").delegate("a", "click", function() { return false; }) // 버블링 방지
   (예) $("body").delegate("a", "click", function(event){  event.preventDefault(); }); // 기본 동작을 취소
   
  .delegate( selector, eventType, eventData, handler ) version 1.4.2

   (예) 커스텀 이벤트 --> http://api.jquery.com/delegate/

■ .undelegate()
  선택된 Element의 이벤트 핸들러를 제거한다.
   - (예) http://api.jquery.com/undelegate/

  .undelegate() version 1.4.2
   - 모든 이벤트 제거
  .undelegate( selector, eventType ) version 1.4.2
   (예) $("body").undelegate("p", "click");
  .undelegate( selector, eventType, handler ) version 1.4.2
   (예) $("body").undelegate("p", "click", function(){ "Does nothing..." }); // 이벤트가 제거되면서 function()함수가 호출된다.

■ .live()
  선택된 element의 이벤트 핸들러를 바인드 한다.
   - bind()와의 차이점은 append()등의 함수로 추가된 요소들에도 이벤트가 적용된다.
   - 1.4.2버전 부터 live()함수를 보완한 delegate() 함수를 사용한다.
   -  eventType = click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
   
  .live( eventType, handler ) version 1.3
   (예) $("p").live("click", function(){ alert( $(this).text() ); });
   (예) $("a").live("click", function() { return false; }) // 버블링 방지
   (예) $("a").live("click", function(event){  event.preventDefault(); }); // 기본 동작을 취소

  .live( eventType, eventData, handler ) version 1.4
   (예) $("a").live("click", {foo: "bar"}, function(event){ alert(event.data.foo); });

■ .die()
  선택된 element의 이벤트 핸들러중 live()함수에 의해 바인드된 이벤트 핸들러를 제거한다.

  .die( eventType, [ handler ] ) version 1.4.1
   (예) $("p").die() // 모든 live 이벤트의 바인드를 제거한다.
   (예) $("#theone").die("click"); // live 이벤트의 click 바인드를 제거한다.
   (예) $("#theone").die("click", function(){ ... }); // die()함수가 호출되면서 function()함수가 호출된다.

■ .one()
   bind() 함수처럼 선택된 element에 이벤트 핸들러를 붙인다. 하지만 딱 한번의 이벤트를 발생시킨다.
    - 즉 bind() 함수의 이벤트 핸들러 내부에서 unbind()한다.

  .one( eventType, [ eventData ], handler(eventObject) ) version 1.1
   (예) $('#foo').one('click', function() { alert('This will be displayed only once.'); });
        == $('#foo').bind('click', function(event) { alert('This will be displayed only once.'); $(this).unbind(event); });

■ .jQeury.proxy()
  컨텍스트의 이벤트 핸들러를 리턴한다.
   (예) http://api.jquery.com/jQuery.proxy/

■ .trigger()
  선택된 element의 이벤트를 발생시킨다.

  .trigger( eventType, extraParameters ) version 1.0
   (예)
    $('#foo').bind('click', function() {
      alert($(this).text());
    });
    $('#foo').trigger('click');  

   (예) custom event 트리거
    $('#foo').bind('custom', function(event, param1, param2) {
      alert(param1 + "\n" + param2);
    });
    $('#foo').trigger('custom', ['Custom', 'Event']);

   (예)
    var event = jQuery.Event("logged");
    event.user = "foo";
    event.pass = "bar";
    $("body").trigger(event);

   (예) http://api.jquery.com/trigger/

■ .triggerHandler()
  trigger()함수와 비슷하게 동작한다.
   - 예외
      1) form submission에는 동작하지 않는다.
      2) 선택된 Element중 가장 첫번째 element만 영향을 미친다.
      3) 브라우저의 기본동작(default actions), bubbling, live events는 일어나지 않습니다. 단순히 handler 메서드를 호출만 합니다.
         http://api.jquery.com/triggerHandler/ 의 예제 참고

   
  .triggerHandler( eventType, extraParameters ) version 1.2

[Event Object]
  이벤트 핸들러(function(event)) 의 파라메터로 사용된다.
   - var e = jQuery.Event("click");

   멤버
    - event.currentTarget
    - event.data
    - event.isDefaultPrevented()
    - event.isImmediatePropagationStopped()
    - event.isPropagationStopped()
    - event.pageX
    - event.pageY
    - event.preventDefault()
    - event.relatedTarget
    - event.result
    - event.stopImmediatePropagation()
    - event.stopPropagation()
    - event.target
    - event.timeStamp
    - event.type
    - event.which

    (예) http://api.jquery.com/category/events/event-object/

[Form Events]
■ .focus()
  자바스크립트의 focus 이벤트
   - form 컨트롤의 포커스가 생겼을때 발생되는 이벤트

  .focus( handler(eventObject) )
   (예) $(select).focus(function( alert('focused'); ));

  .focus()
   -  trigger('focus')와 같은 기능을 제공

■ .blur()
  자바스크립트의 blur 이벤트 
   - form 컨트롤의 포커스를 잃어버림, focus이벤트의 반대기능

  .blur( handler(eventObject) ) version 1.0
   - .bind('blur', handler) 와 동일
   (예) $('#target').blur(function() { alert('Handler for .blur() called.'); });

  .blur() version 1.0
   -  trigger('blur')와 같은 기능을 제공

■ .change()
  자바스크립트의 change 이벤트 
   -선택박스, 텍스트박스, 체크박스, 라디오버튼 등의 입력값, 선택값 변경 이벤트

  .change( handler(eventObject) ) version 1.0
   -  .bind('change', handler) 와 동일
   (예) $('#target').blur(function() { alert('Handler for .change() called.'); });

  .change() version 1.0
   -  trigger('change')와 같은 기능을 제공

■ .select()
  자바스크립트의 select 이벤트 
   - <input type="text">와 <textarea> 에만 사용된다.
   - 텍스트가 선택될 때 발생되는 이벤트

  .select( handler(eventObject) ) version 1.0
   -  .bind('select', handler) 와 동일
   (예) $('#target').select(function() { alert('Handler for .select() called.'); });

  .select() version 1.0
   -  trigger('select')와 같은 기능을 제공

■ .submit()
  자바스크립트의 submit 이벤트 
   - <form> 요소에만 사용된다.
   - <input type="submit">, <input type="image">, or <button type="submit"> 에서 submit하는 기능

  .submit( handler(eventObject) ) version 1.0
   -  .bind('submit', handler) 와 동일
   (예) $('#target').submit(function() { return true; });

  .submit() version 1.0
   -  $('#target').submit(); == $('#target').trigger('submit')와 같은 기능을 제공

[Keyboard Events]
■ .focusin()
  자바스크립트의 focusin 이벤트 
   - .bind('focusin', handler). 와 동일
   - 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트

  .focusin( handler(eventObject) ) version 1.4
   (예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });

■ .focusout()
  자바스크립트의 focusout 이벤트
   - .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
   - 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트

  .focusout( handler(eventObject) ) version 1.4
   (예) http://api.jquery.com/focusout/

■ .keydown()
  자바스크립트의 keydown 이벤트
   - .bind('keydown', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 누르고 있을때 발생되는 이벤트

  .keydown( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keydown/
   (예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });

■ .keyup()
  자바스크립트의 keyup 이벤트
   - .bind('keyup', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 누른 키보드를 띌 때 발생되는 이벤트

  .keyup( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keyup/
   (예) $('#target').keyup(function(event) { alert('Handler for .keyup() called.'); });

■ .keypress()
  자바스크립트의 keypress 이벤트
   - .bind('keypress', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 눌렀을때 발생되는 이벤트
   - 실제 키보드가 눌렸을때 발생되는 이벤트 순서 : keydown or keypress > keyup

  .keypress( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keypress/
   (예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });

KeyDown, KeyPress, KeyUp Event 차이
 - http://mytory.textcube.com/495, http://hurrah.springnote.com/pages/1099088, http://winflahed.tistory.com/72

[Mouse Events]
■ .click()
  선택된 element를 클릭했을때 발생하는 이벤트

  .click( handler(eventObject) ) version 1.0
    (예) $('#target').click(function() { alert('Handler for .click() called.'); });

  .click() version 1.0
   - $('#target').click(); == $('#target').trigger('click');

■ .dblclick()
  선택된 element를 더블 클릭했을때 발생하는 이벤트

  .dblclick( handler(eventObject) ) version 1.0
    (예) $("p").dblclick( function () { alert("Hello World!"); });

  .dblclick() version 1.0
   - $('#target').click(); == $('#target').trigger('click');

■ .focusin()
  자바스크립트의 focusin 이벤트 
   - .bind('focusin', handler). 와 동일
   - 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트

  .focusin( handler(eventObject) ) version 1.4
   (예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });

■ .focusout()
  자바스크립트의 focusout 이벤트
   - .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
   - 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트

  .focusout( handler(eventObject) ) version 1.4
   (예) http://api.jquery.com/focusout/

■ .hover()
  선택된 element에 마우스가 올라갔을때와 밖으로 나왔을때에 발생되는 이벤트
   - hover()를 unbind()할 경우 = $(obj).unbind('mouseenter mouseleave');

  .hover( handlerIn(eventObject), handlerOut(eventObject) ) version 1.0
    (예)
         $("li").hover(
           function () {
             $(this).append($("<span> ***</span>"));
           }, 
           function () {
             $(this).find("span:last").remove();
           }
         );

■ .mouseover()
  자바스크립트의 mouseover 이벤트
   - 선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
   - .bind('mouseover', handler) 와 동일,
   - 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseenter() 함수를 사용    (http://api.jquery.com/mouseover/)

  .mouseover( handler(eventObject) ) version 1.0
    (예)
       $("div.overout").mouseover(function() {
         i += 1;
         $(this).find("span").text( "mouse over x " + i );
       }).mouseout(function(){
         $(this).find("span").text("mouse out ");
       });

  .mouseover() version 1.0

■ .mouseout()
  자바스크립트의 mouseout 이벤트
   - 선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
   - .bind('mouseout', handler) 와 동일,
   - 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseleave() 함수를 사용   (http://api.jquery.com/mouseover/)

  .mouseout( handler(eventObject) ) version 1.0
    (예)
       $("div.overout").mouseover(function() {
         i += 1;
         $(this).find("span").text( "mouse over x " + i );
       }).mouseout(function(){
         $(this).find("span").text("mouse out ");
       });

  .mouseout() version 1.0

■ .mouseenter()
  선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
   - IE에서만 제공되는 mouseenter 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
   - .bind('mouseenter', handler) 와 동일,
   - 비슷한 함수 = .mouseover() , 차이점 : 버블링의 발생여부

  .mouseout( handler(eventObject) ) version 1.0
    (예)
      $("div.enterleave").mouseenter(function(){
        $("p:first",this).text("mouse enter");
        $("p:last",this).text(++n);
      }).mouseleave(function(){
        $("p:first",this).text("mouse leave");
      });

  .mouseout() version 1.0

■ .mouseleave()
  선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
   - IE에서만 제공되는 mouseleave 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
   - .bind('mouseleave', handler) 와 동일,
   - 비슷한 함수 = .mouseout() , 차이점 : 버블링의 발생여부

  .mouseout( handler(eventObject) ) version 1.0
    (예) .mouseenter() 함수 예제 참고

  .mouseout() version 1.0

■ .mousemove()
  선택된 element에 마우스가 포인터가 움직일때 발생되는 이벤트
   - .bind('mousemove', handler) 와 동일,

  .mousemove( handler(eventObject) ) version 1.0
    (예) $("div").mousemove(function(e){ alert(e.pageX + " / " + e.pageY);  } );

  .mousemove() version 1.0

■ .mousedown()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누를때 발생되는 이벤트
   - .bind('mousemove', handler) 와 동일,

  .mousedown( handler(eventObject) ) version 1.0
    (예) 
      $("p").mouseup(function(){
        $(this).append('<span style="color:#F00;">Mouse up.</span>');
      }).mousedown(function(){
        $(this).append('<span style="color:#00F;">Mouse down.</span>');
      });

  .mousedown() version 1.0

■ .mouseup()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트
   - .bind('mouseup', handler) 와 동일,

  .mouseup( handler(eventObject) ) version 1.0
    (예) .mousedown() 함수 예제 참고

  .mousedown() version 1.0

■ .toggle()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트

  .toggle( handlerA(eventObject), handlerB(eventObject), [ handlerC(eventObject) ] ) version 1.0
   - handlerA(eventObject) : 짝수번째 클릭시 이벤트
   - handlerB(eventObject) : 홀수번째 클릭시 이벤트
   - handlerC(eventObject) : 추가 핸들러로 클릭 후에 A,B 이벤트핸들러가 발생된 이후  발생되는 이벤트
   (예)
     $('#target').toggle(function() {
       alert('First handler for .toggle() called.');
     }, function() {
       alert('Second handler for .toggle() called.');
     });

  .toggle( [ duration ], [ callback ] ) version 1.0
   (예) http://api.jquery.com/toggle/ 참고

Posted by CoolDragon
2010. 6. 28. 19:57

[jquery] Manipulation (조작)

Language/javascript
[Class Attribute]
■ .addClass()
  => 선택된 element에 css 클래스를 추가
   
  .addClass( className ) version 1.0
   (예) $('p').addClass('myClass yourClass');

  .addClass( function(index, class) ) version 1.4
   - index 번째(0번부터), class : element의 현재 설정되어있는 class명
   (예) $('ul li:last').addClass(function() { return 'item-' + $(this).index(); });

■ .hasClass()
   => 선택된 element의 class가 className 할당 되어있는지 유무를 확인 (return value= true / false)

  .hasClass( className ) version 1.2
   (예) $('#mydiv').hasClass('bar')

■ .removeClass()
  => 선택된 element에 css 클래스를 제거

  .removeClass( [ className ] ) version 1.0
   (예) $('p').removeClass('myClass noClass').addClass('yourClass');

  .removeClass( function(index, class) ) version 1.4
   - index 번째(0번부터), class : 이전 클래스명
   (예) $('li:last').removeClass(function() { return $(this).prev().attr('class'); });

■ .toggleClass()
  => 선택된 Element의 css 클래스를 반복적으로 설정된 css 클래스를 설정/해제한다.

  .toggleClass( className ) version 1.0
   (예) 
     1) <div class="tumble">Some text.</div> 
     2) $('div.tumble').toggleClass('bounce'); 호출
     3) <div class="tumble bounce">Some text.</div> // // bounce가 적용
     4) $('div.tumble').toggleClass('bounce'); 호출
     1) <div class="tumble">Some text.</div> // bounce가 해제
   

  .toggleClass( className, switch ) version 1.3
   - [switch]는 boolean값으로 조건값 true이면 토글형태로 동작한다.
   (예) $('#foo').toggleClass(className, addOrRemove);
        == 
        if (addOrRemove) {
 $('#foo').addClass(className);
        }
else {
 $('#foo').removeClass(className);
}

  .toggleClass( function(index, class), [ switch ] ) version 1.4
   (예)
     $('div.foo').toggleClass(function() {
       if ($(this).parent().is('.bar')) {
        return 'happy';
       } else {
        return 'sad';
       }
     });


[Copying]
■ .clone( [ withDataAndEvents ] )
   선택된 element의 element정보를 동일하게 복사

   .toggleClass()
    - Element만 동일하게 복사하고 이벤트 핸들러는 복사안함

   .toggleClass(true)
    - 만약에 click 등의 이벤트 핸들러가 연결된 Element라면 이벤트 핸들러도 같이 복사


[DOM Insertion, Around]
■ .wrap()
   선택된 element를 부모 element(wrappingElement)의 자식 element로 포함시킨다.

   .wrap( wrappingElement ) version 1.0
    (예) 
       1) <div class="container">
            <div class="inner">Hello</div>
            <div class="inner">Goodbye</div>
          </div>
       2) $('.inner').wrap('<div class="new" />'); 호출
       3) <div class="container">
            <div class="new">
              <div class="inner">Hello</div>
            </div>
            <div class="new">
              <div class="inner">Goodbye</div>
            </div>
          </div>

    (예) $("p").wrap(document.createElement("div"));

   .wrap( wrappingFunction ) == .wrap( function() {} ) version 1.4
    (예) $('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />'; });

■ .unwrap()
   선택된 element의 부모 element를 제거한다.

   .unwrap() version 1.4
    (예) $("p").unwrap();
    (예) http://api.jquery.com/unwrap/

■ .wrapAll( )
   선택된 element 모두를 하나의 부모element(wrappingElement)의 자식 element로 포함한다.

   .wrapAll( wrappingElement ) version 1.2
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapAll('<div class="new" />'); 호출
      3) <div class="container">
           <div class="new">
             <div class="inner">Hello</div>
             <div class="inner">Goodbye</div>
           </div>
         </div>

■ .wrapInner()
   선택된 element의 content가 인자로 넘어온 element의 content로 포함되고 그 element는 선택된 element의 자식element로 포함

   - .wrapInner( wrappingElement ) version 1.2
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapInner('<div class="new" />'); 호출
      3) <div class="container">
           <div class="inner">
             <div class="new">Hello</div>
           </div>
           <div class="inner">
             <div class="new">Goodbye</div>
           </div>
         </div>

   - .wrapInner( wrappingFunction ) version 1.4
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />'; }); 호출
      3) <div class="container">
           <div class="inner">
             <div class="Hello">Hello</div>
           </div>
           <div class="inner">
             <div class="Goodbye">Goodbye</div>
           </div>
         </div>

[DOM Insertion, Inside]
■ .append()
   선택된 Element의 Content의 맨끝에 인자로넘어온 내용을 추가한다.

   .append( content ) version 1.0
    (예) $('.inner').append('<p>Test</p>'); // element를 추가
    (예2) $('.container').append($('h2')); // $('h2')에 해당하는 요소를 추가하면서 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

   .append( function(index, html) ) version 1.4
    - index : 0번째 부터 시작, html : 선택된 Element의 이전 Content
    (예) $('.inner').append(function(index, html) { return '(' + index + ')'; }); // element를 추가

■ .appendTo()
   선택된 element를 target에 해당하는 Element의 Content의 끝에 추가한다.(선택된 element가 기존에 존재하는 것이면 잘라내기->붙이기 형태가 된다.)

   .appendTo( target ) version 1.0
    (예) $('<p>Test</p>').appendTo('.inner'); // inner 클래스에 해당하는 Element의 content 마지막에 '<p>Test</p>'를 추가한다.
    (예2) $('h2').appendTo($('.container')); // container 클래스에 해당하는 Element의 content 마지막에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

■ .html()
   [getter]
     선택된 Element의 html을 리턴한다.

     .html() version 1.0
      (예) $('div.demo-container').html();

   [setter]
     선택된 Element의 Content 내용을 변경한다.
     .html( htmlString ) version 1.0
     .html( function(index, oldhtml) {} ) version 1.4

■ .prepend()
   선택된 Element의 Content의 가장 앞에 인자로넘어온 내용을 추가한다.

   .prepend( content ) version 1.0
    (예) $('.inner').prepend('<p>Test</p>'); // .inner css 클래스에 해당하는 element의 content 가장 앞에 '<p>Test</p>'를 추가한다.

   .prepend( function(index, html) ) version 1.4


■ .prependTo()
   선택된 element를 target에 해당하는 Element의 Content의 가장 앞에 추가한다.(.appendTo()와 반대)

   .prependTo( target ) version 1.0
    (예) $('<p>Test</p>').prependTo('.inner'); // inner 클래스에 해당하는 Element의 content 가장 앞에 '<p>Test</p>'를 추가한다.
    (예2) $('h2').prependTo($('.container')); // container 클래스에 해당하는 Element의 content 가장 앞에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

■ .text()
   [getter]
     선택된 element의 content중 (html 태그정보를 제외한) text에 해당하는 값만 리턴한다.
     .text() version 1.0
      (예) 
        1) <div class="demo-container">
             <div class="demo-box">Demonstration Box</div>
             <ul>
               <li>list item 1</li>
               <li>list <strong>item</strong> 2</li>
             </ul>
           </div>
2) $('div.demo-container').text() == "Demonstration Box list item 1 list item 2"

   [setter]
     선택된 element의 content에 textString인자를 입력한다. 단 '<p>TEST</p>'와 같은 태그가 존재하면 &lt;p&gt;TEST&lt;/p&gt; 처럼 입력된다.
     .text( textString ) version 1.0
     .text( function(index, text) {} ) version 1.4

[DOM Insertion, Outside]

■ .after()
   선택된 element의 같은 레벨(형제노드)의 바로 다음 Element로 추가한다.

   .after( content ) version 1.0
   .after( function(index) ) version 1.4
    (예) $('.inner').after('<p>Test</p>');

■ .before()
   선택된 element의 같은 레벨(형제노드)의 바로 이전 Element로 추가한다.(contnent가 selector라면 잘라붙이기가 된다.)
   
   .before( content ) version 1.0
    (예) $('.inner').before('<p>Test</p>');

   .before( function(index) ) version 1.4

■ .insertAfter()
   - target 에 해당하는 element의 같은 레벨(형제노드)의 바로 다음에 $(selector)를 추가한다. (.appendTo()와 비슷)
   - .insertAfter( target ) version 1.0
   - (예) $('<p>Test</p>').insertAfter('.inner');

■ .insertBefore()
   - target 에 해당하는 element의 같은 레벨(형제노드)의 바로 이전에 $(selector)를 추가한다. (.prependTo()와 비슷)
   - .insertBefore( target ) version 1.0
   - (예) $('<p>Test</p>').insertBefore('.inner');


[DOM Removal]
■ .detach( [ selector ] )
   선택된 요소를 제거한다. (.remove()와 기능적으로 거의 동일하지만 선택된 요소의 이벤트 핸들러 정보등은 제거되지 않는다.)

   .detach( [ selector ] ) version 1.4
    (예) http://api.jquery.com/detach/

■ .empty()
   선택된 element의 하위 Content를 삭제한다.

    (예) <div class="hello">test</div> --> $('.hello').empty(); --> <div class="hello"/>

■ .remove()
   선택된 element를 삭제한다.

   .remove( [ selector ] ) version 1.0
     - 인자로 selector가 들어갈 경우 선택된 요소의 또다른 조건이라고 생각하면 된다.
     (예) $('.hello').remove(); // .hello 클래스가 있는 element를 삭제
     (예) $('div').remove('.hello'); // div 요소에서 .hello 클래스가 있는 element를 삭제


[DOM Replacement]

■ .replaceAll( target )
   target에 선택된 element를 찾아 $() 형태로 바꾼다. (.replaceWith() 함수와 selecor이냐 target이냐의 차이만 있다.)
   
   .replaceAll( target ) version 1.2
    (예) $('<h2>New heading</h2>').replaceAll('.inner'); // .inner 클래스에 해당하는 element를 '<h2>New heading</h2>' 으로 바꾼다.

■ .replaceWith()
   선택된 element를 newContent로 바꾼다.
   
   .replaceWith( newContent ) version 1.2
    (예)
      1) <div class="container">
           <div class="inner first">Hello</div>
           <div class="inner second">And</div>
           <div class="inner third">Goodbye</div>
         </div>
      2) $('.second').replaceWith('<h2>New heading</h2>'); 호출
      3) <div class="container">
           <div class="inner first">Hello</div>
           <h2>New heading</h2>
           <div class="inner third">Goodbye</div>
         </div>

   .replaceWith( function ) version 1.4


[General Attributes]

■ .attr()
   [getter]
    선택된 element의 속성(attribute)의 값을 리턴한다.
    .attr( attributeName ) version 1.0    

   [setter]
     선택된 element의 속성(attribute)의 값(value)을 설정한다.

     .attr( attributeName, value ) version 1.0

     .attr( map ) version 1.0
      (예) $('#greatphoto').attr( {alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark'} ); // 인자를 json형태로

     .attr( attributeName, function(index, attr) ) version 1.1
      (예) $('#greatphoto').attr('title', function() { return this.alt + ' - photo by Kelly Clark' } );

■ .removeAttr()
   선택된 element의 속성(attribute)을 삭제한다.
   .removeAttr( attributeName ) version 1.0
    (예) $(this).next().removeAttr("disabled");

■ .val()
   [getter]
    선택된 element의 value값을 리턴한다.
    
    .val() version 1.0
    form element(input, select 태그등)에서 사용된다.
     (예)
         function displayVals() {
  var singleValues = $("#single").val(); // 단일값
  var multipleValues = $("#multiple").val() || []; // 복수값
  $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " +  multipleValues.join(", "));
}


   [setter]
   - 선택된 element의 value값을 할당한다.
   - .val( value ) version 1.0
   - (예) $("#multiple").val(["Multiple2", "Multiple3"]);

   - .val( function(index, value) ) version 1.4
   - (예) $('input:text.items').val(function(index, value) { return value + ' ' + this.className; } );

[Style Properties]
 jQuery CSS에서 참조
Posted by CoolDragon
2010. 6. 28. 15:27

[jquery] css

Language/javascript
-------------------------------------------------------------------------

■ .addClass()
  선택된 element의 클래스를 추가

  .addClass( className )
   - version 1.0

  .addClass( function(index, class) {} )  
   - version 1.4
   - index 번째(0번부터), class : element의 현재 설정되어있는 class명

■ .css()
  [getter]
  .css( propertyName )
   - version 1.0
   - 선택된 element의 propertyName에 해당하는 설정된 css정보를 리턴한다. (get)

  [setter]
  .css( propertyName, value )
   - version 1.0
   - 선택된 element의 propertyName에 해당하는 설정된 css정보를 
설정한다. 
   - (예) $("span").css("background-color","yellow"); //단일 설정

  .css( propertyName, function(index, value) )
   - version 1.4
   - index 번째(0번부터), value : propertyName에 해당하는 설정된 css정보

  .css( map )
   - version 1.0
   - map형태로 입력함 {key:value}
   - (예) $("span").css({"width":"100px","height":"100px"}); // 복수 설정

■ .hasClass()
  .hasClass( className )
   - version 1.2
   - 선택된 element의 class가 className 할당 되어있는지 유무를 확인한다.
   - true / false

■ .removeClass()
  .removeClass( [ className ] )
   - version 1.0
   - 선택된 element의 className에 해당하는 class를 삭제한다. (단일, 복수 삭제가능)
   - (예) $('p').removeClass('myClass noClass').addClass('yourClass');

  .removeClass( function(index, class) )
   - version 1.4
   - index 번째(0번부터), class : 이전 클래스명
  
■ .toggleClass()
  .toggleClass( className )
   - version 1.0
   - 선택된 Element의 className을 설정유무에 따라 반복적으로 class를 설정/해제한다.

  .toggleClass( className, switch )
   - version 1.3
   - [switch]는 boolean값으로 조건값 true이면 토글형태로 동작한다.

  .toggleClass( function(index, class), [ switch ] )
   - version 1.4

■ .width()
  [getter]
  .width()
   - version 1.0
   - 선택된 첫번째 element의 가로 길이값을 가져온다.
   - .css('width') 과 .width()의 차이점은 단위없이 리턴한다.
   - 예를들어 400px 에서 px이 없음

  [setter]
  .width( value )
   - version 1.0
   - 선택된 element의 가로 길이값을 설정한다.
   - 100px, 50%, or auto 처럼 단위를 설정하지 않는다.

  .width( function(index, width) )
   - version 1.4.1
   - 선택된 element의 가로 길이값을 설정한다.
   - index 번째(0번부터), width : 이전 width 값

■ .innerWidth()
  [getter]
  .width()
   - version 1.2.6
   - 선택된 첫번째 element의 border길이를 
제외한 padding길이를 포함한 가로 길이값을 가져온다.

■ .outerWidth()
  [getter]
  .outerWidth()
   - version 1.2.6
   - 선택된 첫번째 element의 padding, border, and optionally margin 길이를 포함한 가로 길이값을 가져온다.
   - (예) $(selector).outerWidth() , $(selector).outerWidth(true)

■ .height()
  [getter]
  .height()
   - version 1.0
   - 선택된 첫번째 element의 세로 길이값을 가져온다.
   - .css('height') 과 .height()의 차이점은 단위없이 리턴한다.
   - 예를들어 400px 에서 px이 없음

  [setter]
  .height( value )
   - version 1.0
   - 선택된 element의 세로값을 설정한다.
   - 100px, 50%, or auto 처럼 단위를 설정하지 않는다.

  .height( function(index, height) )
   - version 1.4.1
   - 선택된 element의 세로값을 설정한다.
   - index 번째(0번부터), height : 이전 height 값

■ .innerHeight()
  [getter]
  .width()
   - version 1.2.6
   - 선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 세로 길이값을 가져온다.

■ .outerHeight()
  .outerHeight()
   - version 1.2.6
   - 선택된 첫번째 element의 padding, border, and optionally margin 길이를 포함한 세로 길이값을 가져온다.
   - (예) $(selector).outerHeight() , $(selector).outerHeight(true)

■ .offset()
  [getter]
  .offset()
   - version 1.2
   - 현재 문서(document)로부터 선택된 첫번째 Element의 현재 좌표(오프셋)를 리턴한다.
   - (예) $(selector).offset().left, $(selector).offset().top

  [setter]
  .offset( coordinates )
   - version 1.4
   - 선택된 Element의 현재 좌표(오프셋)를 변경한다.
   - (예) $("p:last").offset({ top: 10, left: 30 });

  .offset( function(index, coords) )
   - version 1.4
   - index 번째(0번부터), coords : 이전 좌표값

■ .position()
  [getter]
  .position()
   - version 1.4
   - 부모 Element로 부터의 현재 좌표
   - (예) $(selector).position.left, $(selector).position.top

■ .scrollTop()
  [getter]
  .scrollTop()
   - version 1.2.6
   - 선택된 첫번째 Element의 스크롤바 수직 위치를 리턴한다.

  [setter]
  .scrollTop(value)
   - version 1.2.6
   - 선택된 Element의 스크롤바 수직 위치를 설정한다.
   - value = integer

■ .scrollLeft()
  [getter]
  .scrollLeft()
   - version 1.2.6
   - 선택된 첫번째 Element의 스크롤바 수평 위치를 리턴한다.

  [setter]
  .scrollLeft(value)
   - version 1.2.6
   - 선택된 Element의 스크롤바 수평 위치를 설정한다.
   - value = integer

Posted by CoolDragon
2010. 6. 25. 19:17

[jquery] Selector (선택자)

Language/javascript
[jquery core]
jQuery( selector, [ context ] )
 - $("input:radio", document.forms[0]);
 - $("div", xml.responseXML);
 - $('span', this) == $(this).find('span')

jQuery( element )
 - $("div")

jQuery( elementArray )
 - $("div > p")

jQuery( html, [ ownerDocument ] )
 - $("<div/>", {
                 "class": "test",
                 text: "Click me!",
                 click: function(){
                     $(this).toggleClass("test");
                 }
}).appendTo("body");


jQuery( callback )
 - jQuery(function() {} ); == jQuery(function($) { });

jQuery.noConflict(); :많은 자바스크립트 라이브러리가 $ 변수명을 사용한다. 
                     jQeury에서 $가 alias로 사용되기 때문에 jQuery.noConflict(); 구문은 jQuery에서 $를 사용하지 않겠다는 의미이다.
                     noConflict()를 호출하고서 $를 사용하는 방법
       jQuery.noConflict();
                        (function($) { 
                            $(function() {
                                // more code using $ as alias to jQuery
                             });
                         })(jQuery);


[Basic]
jQuery('*') : 모든 Element를 선택, 즉 전체를 선택
 (예) jquery("*").css("border", "1px");

jQuery('.class') : css 클래스명이 같은 Element를 선택
 (예) <div class="item"/> -> jquery(".item").css("height", "100px");
 (예) jquery(".item .color").css("height", "100px"); //css 클래스를 복수개로 설정하면 해당하는 element가 선택됨

jQuery('element') : element명과 같은 Element를 선택
 (예) ("div") 처럼 태그명을 직접 넣을 수 있다.

jQuery('#id') : html 태그의 id가 같은 Element를 선택 (id는 한개만 존재하므로 한개만 선택됨)
 (예) <div id="myDiv">id="myDiv"</div> -> jquery("#myDiv").css("border","3px solid red");<

jQuery('selector1, selector2, selectorN') : 다중 셀렉터 (예) $("div,span,p.myClass")

[Basic Filter]
jQuery(':animated') : 애니메이션되고있는 Element를 선택
 (예) http://api.jquery.com/animated-selector/

jQuery(':eq(index)') : index번째의 Element를 선택, Zero-based index
 (예) jQuery('div:eq(2)') 라고 할 경우 3번째  div요소를 의미한다.

jQuery(':gt(index)') : index 번째 Element보다 큰 모든 Element를 선택, Zero-based index
 (예) jQuery('div:gt(2)') 라고 할 경우 2보다 큰 div요소이므로 3번째부터 선택된 div요소 모두를 의미한다.

jQuery(':lt(index)') : index 보다 작은 Element를 선택, Zero-based index
 (예) jQuery('div:lt(2)') 라고 할 경우 2보다 작 div요소이므로 1,2번째 div요소를 의미한다.

jQuery(':even') : index 짝수번째 Element를 선택, (index의0, 2, 4...), zero-indexed
 
jQuery(':odd') : index 홀수번째 Element를 선택, (index의 1, 3, 5...), zero-indexed  
 (예) $("tr:odd").css("background-color", "#bbbbff");

jQuery(':not(selector)') : 해당 selector가 아닌 Element를 선택
 (예) $("input:not(:checked)").css("background-color", "yellow");

jQuery(':header') : h1, h2, h3과 같은 Element를 선택

jQuery(':first') : 첫번째 Element를 선택
 (예) jQuery('div:first') == $("div:eq(0)") == $("div:lt(1)")

jQuery(':last') : 선택한 Element중 마지막 Element를 선택

[Child Filter]
jQuery(':first-child') :  부모 Element의 첫번째 자식 Element를 선택
 (예) jQuery(':first-child') == jQuery(':nth-child(1)')
 (예) jQeury("tr td:first-child") => tr이 복수개일 경우 그중 자식요소 중에 td의 첫번째 요소들이 선택된다.

jQuery(':last-child') : 부모 Element의 자식 Element중 마지막 Element를 선택
 (예) jQeury("tr td:last-child") => tr이 복수개일 경우 그중 자식요소 중에 td의 마지막 요소들이 선택된다.

jQuery(':nth-child(index/even/odd/equation)') : 부모 Element의 자식 index번째의 Element, index는 1부터 시작 
 (예) $("ul li:nth-child(2)") // ul 요소의 2번째 li요소들을 선택
 (예) $("ul li:even") // ul 요소의 짝수번째 li요소들을 선택
 (예) $("ul li:odd") // ul 요소의 홀수번째 li요소들을 선택
 (예) $("ul li::nth-child(3n)) // 3*0, 3*1, 3*2, ... 번째 요소들을 선택

jQuery(':only-child') : 부모Element의 자식Element가 딱 한개만 존재하는 Element
 (예) 
  <div>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>

  <div>
    <button>Sibling!</button>
  </div>

  // 위의 첫번째 div는 button 자식요소가 2개이므로 선택에서 제외되고 아래 button이 한개인 button만 선택된다.
  $("div button:only-child").text("Alone").css("border", "2px blue solid"); 

[Filter]
jQuery(':contains(text)') : text를 포함한 Element를 선택
 (예) $("div:contains('John')") -> <div>~~~~ John~~~</div> 처럼 자식 Content에 John을 포함한 요소들이 선택된다.

jQuery(':empty') : <td></td>, <span/> 처럼 content가 없는 Element를 선택, 반대는 :parent
 (예) $("td:empty").text("Was empty!")

jQuery(':has(selector)') : selector에 해당하는 요소를 자식요소로 포함하는 Element를 선택
 (예) $("div:has(p)") -> <div><p>Hello in a paragraph</p></div>
 
jQuery(':parent') : 텍스트를 포함하고 있고 선택한 부모 Element 
 (예) <tr><td>abcd</td><td></td></tr> // $("td:parent").fadeTo(1500, 0.3); // 이럴 경우 abcd만 선택한다.

[Attribute]
jQuery('[attribute|=value]') : value와 같거나 value + 하이픈(-) 으로 시작하는 Element
jQuery('[attribute*=value]') : % + value + %
jQuery('[attribute$=value]') : % + value
jQuery('[attribute^=value]') : value + %
jQuery('[attribute~=value]') : value와 단어가 같은 Element
jQuery('[attribute=value]')  : value와 같은 Element
jQuery('[attribute!=value]') : value와 다른 Element
jQuery('[attribute]') : 해당 attribute가 존재하는 Element (예) $("div[id]")
jQuery('[attributeFilter1][attributeFilter2][attributeFilterN]') : 다중 속성 셀렉터 (예) $("input[id][name$='man']")

[Form]
jQuery(':button') : <input type="button"/> 또는 <button />
jQuery(':checkbox') : <input type="checkbox"/>, jQuery(':checkbox') == $('[type=checkbox]'), $(':checkbox') == $('*:checkbox'), 보통 $('input:checkbox') 형태
jQuery(':checked') : 체크박스에 체크된 Element
jQuery(':selected') : 콤보박스에 선택된 Element
jQuery(':disabled') : <input name="email" disabled="disabled" />
jQuery(':enabled') : 활성화되어있는 Element (jQuery(':disabled') 과 반대 )
jQuery(':file') : <input type="file"/> $(':file') == $('*:file'), 보통  $('input:file') 형태
jQuery(':image') : <input type="image" />
jQuery(':input') : <input />, <textarea />, <select />, <button />
jQuery(':password') : <input type="password" /> , $(':password') == $('[type=password]'), $(':password') == $('*:password'), 보통 $('input:password') 형태
jQuery(':radio') : <input type="radio" />, $(':radio') == $('[type=radio]'), $(':radio') == $('*:radio'), 보통 $('input:radio') 형태 (예) $('input[name=gender]:radio')
jQuery(':reset') : <input type="reset" /> (예) $("input:reset")
jQuery(':selected') : <option selected="selected">....</option> (예) $("select option:selected")
jQuery(':submit') : <input type="submit" />, <button type="submit">Button type="submit"</button> 또는 <button/>,  단 <button/>은 브라우저마다 type="submit"은 기본이 아닐 수 있다.
jQuery(':text') : <input type="text" />, $(':text') == $('[type=text]'), $(':text') == $('*:text'), 보통 $('input:text') 형태


[Hierarchy]
jQuery('parent > child') : parent(부모)의 child(자식) Element를 선택
 (예) $("div > span") -> <div><span>test</span></div>

jQuery('ancestor descendant') : ancestor 하위의 모든 descendant에 해당하는 Element를 선택
 (예) $("form input") // form 태그 하위의 input 태그 모두를 선택

jQuery('prev + next') : prev Element 다음에 나오는 형제 Element를 선택
 (예) $("label + input").css("color", "blue").val("Labeled!")

jQuery('prev ~ siblings') : prev Element 다음에 나오는 모든 형제 Element를 선택
 (예) $("#prev ~ div").css("border", "3px groove blue");

[Visibility Filter]
jQuery(':hidden')
  (1) display:none; 인 것 // visibility:hidden or opacity: 0 은 보이는 것으로 간주
  (2) type="hidden" 인 것 
  (3) width:0; height:0; 인 것 
  (4) 부모 Element가 hidden 인 것 

jQuery(':visible') : jQuery(':hidden')의 정반대 
  (1) display:none; 가 아닌 것 // visibility:hidden or opacity: 0 은 보이는 것으로 간주
  (2) type="hidden" 가 아닌 것 
  (3) width:0; height:0; 가 아닌 것 
  (4) 부모 Element가 hidden이 아닌 것 
 

Posted by CoolDragon
2010. 6. 23. 11:57

[javascript] ajax 정복

Language/javascript

--------------------------------------------------------------------------------------------------------------------------------

  • Part 1: Ajax 소개


    • Ajax 애플리케이션에 관한 서론 및 이 애플리케이션에 필요한 몇 가지 기본개념들을 설명합니다. 


  • Part 2: JavaScript와 Ajax를 이용한 비동기식 요청


    • XMLHttpRequest 객체에 대해 구체적으로 소개합니다. 이 객체는 서버측 애플리케이션이나 스크립트에 대한 요청을 핸들하고, 서버측 컴포넌트에서 리턴 데이터를 처리하는 Ajax 애플리케이션의 핵심 입니다. 모든 Ajax 애플리케이션은 XMLHttpRequest 객체를 사용하기 때문에 Ajax 애플리케이션의 작동은 여기에 얼마나 익숙해지냐에 달려있습니다. 


  • Part 3: Ajax의 고급 요청 및 응답


    • 지난 글에서 다루었던 기초를 넘어서 요청 객체의 세 가지 핵심 부분들-HTTP 준비 상태,HTTP 상태 코드, 요청 유형들-에 대해 자세히 설명합니다. 애플리케이션에 무언가 문제가 있을 때 준비 상태, HEAD 요청을 하는 방법, 또는 400 상태 코드가 의미하는 것이 무엇인지를 이해하면 간단한 디버깅으로 끝낼 수 있기 때문입니다. 


  • Part 4: 웹 응답에 DOM 활용하기


    • 웹 페이지를 정의하는 문서 객체 모델(Document Object Model)을 소개합니다. 


  • Part 5 : DOM 다루기


    • 이번 글에서는 돔을 보다 자세히 연구합니다. 웹 페이지에 대한 특정 모델은 그 페이지의DOM 트리라고 하는데, 이러한 돔 트리의 부분들을 생성, 제거, 변경하는 방법을 설명하고 그 다음 단계인 웹 페이지를 업데이트 하는 방법을 설명합니다. 여러분은 DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있습니다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 주는데, 일단 DOM 트리로 작업하는 방법을 배우면 풍부하고 동적인 인터랙티브 웹 사이트를 마스터하는 단계로 넘어갈 수 있다. 


  • Part 6 : DOM 기반 웹 애플리케이션 구현하기


    • Document Object Model (DOM)와 JavaScript 코드를 결합하여 인터랙티브 Ajax 애플리케이션을 구현해봅니다. 여러분이 배운 모든 것을 실제로 적용하여, 간단한 웹 페이지를 구현해 봅니다. 웹 페이지의 모든 효과들은 JavaScript를 사용하여 구현됩니다. 


  • Part 7: 요청과 응답에 XML 사용하기


    • 평범한 Ajax 개발자들도 Ajax 단어에 있는 x가 XML.을 의미한다는 것 정도는 알고 있습니다. XML은 가장 인기 있는 데이터 포맷들 중 하나이고, 실제로, 비동기식 애플리케이션에서 서버 응답에 효력을 발휘합니다. 이 글에서, 서버가 XML로 된 응답을 보내는 방법을 설명합니다. 


  • Part 8: 요청과 응답에 XML 사용하기


    • 지난 시리즈에서는, Ajax 애플리케이션인 서버로 가는 요청을 XML로 포맷팅 하는 방법을 설명했습니다. 그리고 대부분의 경우, 이것이 좋은 방법이 아닌지를 설명했습니다. 이번에는, 좋은 방법을 소개합니다. XML 응답을 클라이언트로 리턴하는 방법을 설명합니다. 


  • Part 9 : Google Ajax Search API 사용하기


    • 비동기식 호출은 서버 측 프로그램과의 통신에 대한 것만은 아닙니다. Google 또는 Amazon 같은 퍼블릭 API와 통신할 수 있고, 여러분이 갖고 있는 스크립트와 서버 측 프로그램이 제공하는 것 이상의 기능을 웹 애플리케이션에 추가할 수 있습니다. 이 글에서, Brett McLaughlin은 Google 같은 퍼블릭 API를 통해 요청을 하고 응답을 받는 방법을 설명합니다. 


  • Part 10: 데이터 전송에 JSON 사용하기


    • 비동기식 애플리케이션은 궁극적으로 데이터에 관한 것입니다. 데이터를 전송하거나 수신하기 위해 XML이나 플레인 텍스트 대신, JSON을 사용하는 방법, 시기, 이유를 설명합니다. 


  • Part 11: 서버 측의 JSON


    • 지난 기술자료에서는 JavaScript의 객체를 JSON으로 변환하는 방법을 배웠습니다. 이 포맷은 객체들 또는 객체 어레이들로 매핑하는 데이터를 보내는데(받는데) 사용할 수 있습니다. 본 시리즈 마지막 기술자료에서는, JSON 포맷으로 서버에 보내진 데이터를 핸들하는 방법과, 같은 포맷을 사용하여 스크립트에 응답하는 방법을 설명합니다. 
Posted by CoolDragon
2010. 5. 19. 18:29

[javascript] 화면색상, 해상도

Language/javascript
구글 analytics에서 화면색상과 해상도를 통계로 내주는 것이 있길레 검색해 보았더니..
아래 코드로 해결이 가능하다.

<script type="text/javascript">
  document.write(window.screen.colorDepth);   // 화면색상 bit 율
  document.write(window.screen.width);          // 해상도 가로
  document.write(window.screen.heigh);         // 해상도 세로
</script>

Posted by CoolDragon

티스토리툴바