jQuery API: Manipulation, Events, Effects, Internals, Utilities

http://jquery.com

목차
Manipulation
Events
Effects
Internals
Utilities

Manipulation

DOM의 제어, 갱신 조작

● 내부 삽입

append(content)

 : 매치되어진 원소에 주어진 내용을 추가로 삽입한 후 객체 반환

 : Return jQuery 객체

?

1 2 3 4

// p 태그에 내용 추가 -> 결과 : 『중요과목 : 프레임워크』 $("p").append("<b>프레임워크</b>");        : <p>중요과목: </p>

 

appendTo(content)

 : 매치되어진 원소들의 내용들을 주어진 조건에 맞는 원소에 추가로 삽입한후  객체 반환

 : Return jQuery 객체

?

1 2 3 4 5 6 7 8

// body 마지막 부분에 제이쿼리 추가  $("<div><p>제이쿼리</p></div>").appendTo("body");   // id가 a인 태그의 뒷 부분에 span 태그의 내용을 추가 ->  결과 : 『중요과목 : 프레임워크』 $("span").appendTo("#a");         : <span>프레임워크</span> <div id="a">중요과목 :  </div>

 

prepend(content)

 : 매치되어진 원소들에 맨앞에 주어진 내용을 삽입한후 객체를 반환

 : Return jQuery 객체

?

1 2 3

$("p").prepend("<b>Hello </b>");   <p><삽입위치>there friend!</p>

 

prependTo(content)

 : 매치되어진 원소의 내용을 주어진 것에 매치되는 원소의 맨앞에 추가 삽입한후 객체를 반환

 : Return jQuery 객체

?

1 2 3 4

$("span").prependTo("#foo");   <div id="foo"> <삽입위치>FOO!</div> <span>I have something to say...</span> //span element는 기존 위치에서 사라짐

 

● 외부 삽입

after(content)

 : 매치되는 모든 원소의 뒤에 주어진 내용을 삽입

 : Return jQuery 객체

?

1 2 3 4

$("p").after("<b>Hello</b>");   <p>I would like to say: </p> <삽입위치>

 

before(content)

 : 매치되는 모는 원소의 앞에 주어진 내용 삽입

 : Return jQuery 객체

?

1 2 3 4

$("p").before("<b>Hello</b>");   <삽입위치> <p> is what I said...</p>

 

 

insertAfter(content)

 : 매치되어진 원소들을 주어진 것에 매치되는 원소의 뒤에 삽입한다.

 : Return jQuery Object - 피삽입 객체 (앞에 오는 선택자)

?

1 2 3 4

$("p").insertAfter("#foo");    <p> is what I said... </p><div id="foo">FOO!</div> //<p>태그 객체가 #foo 뒤로 이동한다.

 

insertBefore(content)

 : 매치되어진 원소앞에 주어진 것에 매치된 원소를 삽입한다.

 : Return jQuery 객체

?

1 2 3 4

$("p").insertBefore("#foo");    <div id="foo">FOO!</div><p>I would like to say: </p> //<p>태그 객체가 #foo 앞으로 이동한다.

 

● 주위에의 삽입

wrap(html)

 : 매치되어진 원소를 주어진 html로서 감싼후 객체를 반환

 : Return jQuery 객체

?

1 2 3 4

// p요소를 지정 div로 둘러싼다. $("p").wrap("<div class='wrap'><b></b></div>");          : <p>Test Paragraph.</p>

 

wrap(elem)

 : 매치된 모든 원소를 주어진것에 매치되는 원소로 감싼다.

 : Return jQuery 객체    

?

1 2 3 4

// p요소를 "content" id의 요소로 둘러싼다. $("p").wrap($('#content'));         : <p>Test Paragraph.</p><div id="content"></div>

 

wrapAll(html)

 : 매치되는 원소들을 주어진 html로 모두 하나로 감싼다.

 : Return jQuery 객체

?

1	$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");

 

 

wrapAll(elem)

 : 매치되어진 원소들을 주어진 것에 매치되는 것으로 하나로 감싼다.

 : Return jQuery 객체

?

1 2 3 4 5 6 7 8 9 10 11 12

$(document).ready(function(){      $("p").wrapAll(document.createElement("div")); });   <style type="text/css"> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style>   <p>Hello</p> <p>cruel</p> <p>World</p>

 

 

wrapInner(html)

 : 매치되어진 원소 속의 내용을 주어진 것으로 감싼다.

 : Return jQuery 객체   

?

1	$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");

 

wrapInner(elem) 

 : 매치되어진 원소 속의 내용을 주어진 것에 매치된것으로 감싼다.

 : Return jQuery 객체   

?

1	$("p").wrapInner(document.createElement("b"));

 

unwrap() : 특정한 부모요소를 제거한다.

?

1 2 3 4 5 6

// <p>태그를 감싸고 있는 <div> 요소를 제거 $('p').unwrap();      : <div>     <p>Foo</p> </div>

 

 

● 치환

replaceWith(content)

 : 매치되어진 원소를 주어진 내용과 치환한다.

 : Return jQuery 객체   

?

1 2 3 4

$("button").click(function () {   $(this).replaceWith("<div>" + $(this).text() + "</div>"); }); //버튼을 클릭하면 해당객체의 텍스트만 가져와 <div>객체로 치환한다.

 

 

replaceAll(selector)

 : 매치되어진 것들을 주어진 것에 매치되는 것에 모두 바꿈

 : replaceWith()와 비슷하지만 source/target의 위치가 반전되어 있다.

 : Return jQuery 

?

1	$("<b>Paragraph. </b>").replaceAll("p");

 

● 삭제

empty() : 내용을 비운다. 

?

1 2 3 4

//<p> element의 자식 element, 텍스트, html이 사라진다. $("button").click(function () {   $("p").empty(); });

 

remove([expr]) : 삭제한다. empty()와 다르게 element 자체가 사라진다.

?

1 2 3

$("button").click(function () {   $("p").remove(); });

 

 

detach( [ selector ] )

 동적인 조작을 돕기 위해서 detach() 라는 새로운 메서드가 추가되었다. 이는 DOM에서 특정 요소를 제거하는 역할을 한다는 부분에서는 remove()와 기능적으로 동일하지만, 해당 요소의 데이터(이벤트 등)를 제거하지 않는다는 주요한 차이가 있다. 그렇기에, 이는 일시적으로 요소를 DOM에서 제거했다가 다시금 DOM에 추가해야 하는 경우 매우 유용하다. 

 재사용될 만한 요소에만 사용하는 것이 중요하다. DOM에서 요소를 제거하거나 추가하는 일이 빈번하게 

발생할 때 매우 유용하게 사용할 수 있다.

● 카피

http://api.jquery.com/clone/

clone([withDataAndEvents])

 withDataAndEvents: 요소에 바인드된 이벤트를 복사에 포함할지 여부

?

1 2 3 4 5 6 7 8 9 10

$(document).ready(function(){     $("button").click(function(){         //$(this).clone().insertAfter(this);         $(this).clone(true).insertAfter(this);           // 위 둘의 차이는 복사에 이벤트를 포함하는지 안하는지의 여부다     }); });    <button>Clone Me!</button>

 

사용하기 전에 반드시 요소의 어디까지 복사되는지 확인해야한다.

clone()은 기본적으로 요소뿐만 아니라 데이터도 함께 복사한다. 예를 들어 text inputbox의 경우 입력된 value도 같이 복사한다.^[각주:1]

Events

● Page Load

ready(handler) : DOM 이 로드 되어 조작·해석이 가능하게 된 타이밍에 함수를 실행

load() 와 ready()

 : load()는 이미지등 페이지가 전부 다운로드 된 다음에 실행. 즉, onload와 같이 페이지가 모두 로드완료된 후 코드를 실행시키고자 할 때에는 아래와 같이 표현한다.

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

$(window).load(function() {      // 해당 기능   });    //ready()는 HTML이 준비가 되면 실행  //페이지 전체가 모두 완료된 시점이 아니라 HTML이 준비된 시점에서 실행이 된다.  $(document).ready(function() {     // 해당 기능   });    $(function() {     // 해당 기능  });     //주의  <script>     window.onload = function(){ alert("onload1"); }     window.onload = function(){ alert("onload2"); } // 마지막것 한번만 실행       $(document).ready(function(){         alert("ready1");     })     $(document).ready(function(){         alert("ready2");     })  </script>    //실행결과  ready1  ready2  onload2   //주의사항 브라우저에 따라 항상 $(document).ready가 먼저 발생되는 것은 아니다.

 

● Event Handling

bind(eventType, [eventData], handler(eventObject))

 : 일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당한다. 

 : eventType - (String)핸들러를 할당할 이벤트 타입의 이름

 : eventData - (Object)핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능 

 : return 확장 집합

 ※ jQuery 1.7.x 이상이라면 bind() 대신 on()으로 사용한다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// '.'을 통하여 여러 커맨드를 실행할 수가 있다.   $('img').bind('click', function(event){        alert('안녕1!');   })   .bind('click', function(event){        alert('안녕2!');   })   .bind('click', function(event){alert('안녕3!');   });   // a 라는 id를 가지고 있는 요소를 마우스 클릭 시 body에 test_class라는 CSS class를 추가한다. $(function(){     $('#a').bind('click', function(){         $('body').addClass('test_class');     }); });

 

bind(events) : bind를 이용하여 이벤트를 여러개 추가할 수 있다.

?

1 2 3 4 5 6 7 8 9 10 11 12

// a 라는 id를 가지고 있는 요소를 마우스 오버시 '마우스오버'라는 경고 문구가 나타나고 마우스 클릭시 '클릭'이라는 경고 문구가 나타난다. $(function() {   $("#a").bind({       click : function() {           alert("클릭");       },       mouseover : function() {           alert("마우스오버");       }    }); });

 

one(eventType, [eventData], handler(eventObject))

 : 일치된 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당한다. 

 : 실행된 뒤 삭제된다. 즉, 페이지당 단 한번만 실행된다.

 : eventType - (String)핸들러를 할당할 이벤트 타입의 이름

 : eventData - (Object)핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능

 : handler - (Function)이벤트 핸들러로 할당될 함수 

 : return 확장 집합

?

1 2 3 4 5 6 7

// a 라는 id를 가지고 있는 요소를 클릭 하면 //one CSS class를 추가하고 바로 click 이벤트가 해제된다.       $(function(){           $('#a').one('click', function(){             $('body').addClass('one');           });       });

 

trigger(eventType, extraParamters) : 각 요소의 인수로 건네준 이벤트를 한번 실행

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// a라는 id를 가진 요소의 click 이벤트를 발생시킨다.    $(function(){        $('#a').trigger('click');    });    // trigger() 메서드 기능을 간소화하여 사용하였다.   $(function(){       $('#a').click();   });   $(function(){     $("#div1").click(function(){         alert("엣헴");     });           $("#div2").one("click", function(){         alert("난 한번만 실행한다");     });           $("#div1").trigger("click");              //#div1.click 이벤트를 페이지 로드시에 발생시킨다.             //위에서 정의한 이벤트함수를 강제로 실행하는 용도로 쓰인다. });

 

triggerHandler(eventType, extraParamters)

 : 요소의 이벤트를 실행하지만 핸들러에 들어가 있는 함수만을 실행한다. 브라우저가 디폴트로 가지고 있는 동작은 행해지지 않는다.

unbind(eventType, [eventData], handler(eventObject))/unbind(event)

 : 확장 집합의 모든 엘리먼트에서 전달된 매개변수에 따라 이벤트 핸들러를 선택적으로 제거한다. 

 : eventType - (String)매개변수를 제공하면 지정된 이벤트 타입에 할당된 리스너만 제거한다.

 : handler(eventObject): (Function)매개변수를 제공하면 지정된 리스너와 동일한 것만 제거한다.

 : event - (Event) Event인스턴스의 정보로 알 수 있는 이벤트가 발생했을 때 호출될 리스너를 제거한다. 

 : return 확장 집합

?

1 2 3 4 5 6 7 8 9

// a 라는 id를 가지고 있는 요소를 마우스 클릭시 test의 기능인 body에 test_class라는 CSS class를 추가하는 기능을 만든후 unbind 메서드를 이용하여 다시 그 기능을 제거하고 있다.  $(function(){      var test = function(){          $('body').addClass('test_class');      };      $('#a').click(test);      $('#a').unbind('click', test);  });

 

click(handler(eventObject))

 : 핸들러를 이벤트에 연결하는 것은 흔한 작업이기 때문에, jQuery는  보다 더 간단하고 명료한 방식의 간소화된 이벤트 메서드를 제공하고 있다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

//사용예 1   // a 라는 id를 가지고 있는 요소를 클릭시 body에 test_class라는 CSS class를 추가시킨다.   $(function(){       $('#a').click(function(){           $('body').addClass('test_class');       });   });      //사용예 2  $(function () {     $('table tr:gt(0) td').click(      alert($(this).text());     );  });  $(function () {     $('table').append("<tr><td>테스트</td></tr>");  // click 이벤트 적용되지 않음     );  });        :   <table border="1">     <tr><td>제목</td></tr>     <tr><td>자바</td></tr>     <tr><td>프레임워크</td></tr> </table>

 

click() : click 이벤트를 실행 시킨다.

?

1 2 3 4

// a 라는 id를 가지고 있는 요소의 click 이벤트를 실행시킨다. $(function(){     $('#a').click(); });

 

 

● Interaction Helpers

hover(handerIn(eventObject), handerOut(eventObject)) 

 : 요소에 마우스가 이동 했을 때의 동작을 설정한다. out은 마우스가 벗어났을 때 호출

?

1 2 3 4 5 6 7 8 9

// a 라는 id 가지고 있는 요소에 마우스 커서가 들어가면 hover CSS class 를 추가하고 마우스가 떠나면 hover CSS class를 제거 한다.  $(function(){      $('#a').hover(function(){          $('body').addClass('hover');      }, function(){          $('body').removeClass('hover');      });  });

 

 

● on() / off()

on(events [, selector] [, data], handler(eventObject) )
on(events-map [, selector] [, data])

 jQuery 1.7.x 버전 이상에서는 향상된 메소드인 .on() 메소드를 제공한다. 1.7.x 버전 이상에서는 bind(), live(), delegate() 메소드들도 모두 on 메소드로 동작하도록 소스코드가 바뀌었으며 성능 문제로 인해 문제가 발생하는 경우 1.7.x 이상의 버전으로 교체한다.

on을 이용하면 문서 로딩 후 새롭게 만들어진 태그에 접근할 수 있다.

bind() : $(selector).on(eventName,eventHandler)

delegate() : $(ancestor selector).on(eventName, selector,eventHandler)

live() : $(selector).on(eventName, eventHandler)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

//사용 예 : Header를 마우스 클릭시 복제     <script type="text/javascript">     // 밑 3가지 중 하나를 선택.        $(document).ready(function() {       // 1. bind()일 경우           $('div').on('click',function() {               $(this).clone().appendTo('body'); //body에 clone()메서드 이용 복제           });       // 2. delegate()일 경우 조금 다르다.           $('body').on('click','div',function(){               $(this).clone().appendTo('body'); //body에 clone()메서드 이용 복제           });         // 3. live()일 경우(이벤트에 대해서 핸들러를 등록)          $(document).on('click','div',function(){               $(this).clone().appendTo('body'); //body에 clone()메서드 이용 복제          });     });  </script>  <div id="wrap">  <h1>Header</h1>  </div>           /* 이후에 생성된 div는 click 이벤트가 처리 되지 않는다. //      $("div").click(function(){ //          $(this).css("background", "red"); //      });         */                   //동적으로 추가된 div도 click 이벤트가 처리됨.         $(document).on("click", "div", function(){                    //on/off 에서 document는 "body"로 대체할 수 없다.             $(this).css("background", "red");         });                   $("body").append("<div>추가됨</div>");

 

events-map은 JSON 혹은 map이 올 수 있다.

?

1 2 3 4 5 6 7 8

$(document).on({     click : function() {         alert("클릭");     },     mouseover : function() {         alert("마우스오버");     }   }, "button");

 

.off( events [, selector] [, handler(eventObject)] )
.off( events-map [, selector] )

: 이벤트 제거

?

1 2 3 4

$("#btn").click(function(){ $(document).off("click", "div"); }); //div click 이벤트에 해당하는 함수를 제거해 더 이상 해당 함수가 실행되지 않는다.

 

● Ajax Events

ajaxComplete(handler()) : AJAX request의 송신 완료시에 실행되는 함수를 지정한다.

ajaxError(handler()) : AJAX request의 송신 실패시에 실행되는 함수를 지정한다.

ajaxSend(handler()) : AJAX request의 송신전에 실행되는 함수를 지정한다.

ajaxStart(handler()) : AJAX request의 송신 개시에 active request가 없는 경우에 실행되는 함수를 지정한다.

ajaxStop(handler()) : AJAX request의 송신 종료시에, 실행되는 함수를 지정한다.

ajaxSuccess(handler()) : AJAX request의 송신이 성공시에 실행되는 함수를 지정한다.

?

1 2 3 4 5

$(document).ajaxStart(function() {     console.log('ajax stated'); }).ajaxComplete(function(){     console.log('ajax complete'); });

 

※ 1.9.x 이후 버전에서는 ajax event 트리거를 document에만 바인드할 수 있다.^[각주:2]

http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

● Event 인스턴스 프로퍼티  

altKey : Alt 키가 눌리면 true, 아니면 fasle

ctrlKey : Ctrl 키가 눌리면 true, 아니면 fasle

data : bind() 커맨드의 두 번째 매개변수로 전달된 값

KeyCode : 눌린 키를 반환

metaKey : 메타키가 눌리면 true, 아니면 false

pageX : 마우스 이벤트의 경우 이벤트가 발생한 x좌표

pageY : 마우스 이벤트의 경우 이벤트가 발생한 y좌표

relatedTarget : 마우스 이벤트의 경우 커서가 들어가거나 나온 엘리멘트

screenX : 마우스 이벤트의 경우 스크린에서 이벤트가 발생한 x좌표

screenY : 마우스 이벤트의 경우 스크린에서 이벤트가 발생한 y좌표

shiftKey : Shift 키가 눌리면 true, 아니면 fasle

target : 이벤트가 발생한 엘리먼트

type : 이벤트 타입을 명시

which : 이벤트 키 코드 또는 마우스 눌려진 값(왼쪽1, 중간2, 오른쪽3) 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(function(){      $('.test').keypress(function(event){          if (event.which && (event.which  > 47 && event.which  < 58 || event.which == 8)) {              alert('숫자임!');          } else {             alert('숫자아님!');             event.preventDefault();          }      });  });        : <div class="test">     <input type="text"/> </div>

 

ie 계열의 Browser에서는 event.returnValue = false;

그 외의 Browser에서는 event.preventDefault();를 이용하여 자기 자신의 기본 이벤트를 취소 한다.

● Event Helpers

blur() : 각 요소의 blur 이벤트를 실행. blur 이벤트는 요소가 마우스등의 pointing, device나 탭 키등에서 포커스를 잃은 때 발생.

blur(handler(eventObject)) : 각 요소에 blur이벤트를 설정

change()

 : 각 요소의 change 이벤트를 실행. change 이벤트는 포커스를 잃은 상태의 input요소가 포커스를 얻고, 값의 변경을 완료했을 때에 실행된다.

change(handler(eventObject)) : 각 요소에 change 이벤트를 설정

?

1	$("select").change(function () {...});

 

click() : 각 요소의 click 이벤트를 실행

click(handler(eventObject)) : 각 요소에 click 이벤트를 설정

?

1	$("p").click(function () {...});

 

dblclick() : 각 요소의 dblclick 이벤트를 실행

dblclick(handler(eventObject)) : 각 요소에 dblclick 이벤트를 설정

error() : 각 요소의 error 이벤트를 실행. 브라우저의 디폴트의 error의 동작과 이것에 bind된 모든 함수가 실행된다.

error(handler(eventObject)) : 각 요소에 error 이벤트를 설정

focus() : 각 요소의 focus 이벤트를 실행. focus 이벤트는 마우스등의 pointing, device 나 탭 키로 요소가 포커스를 받았을 때에 실행한다.

focus(handler(eventObject)) : 각 요소에 focus 이벤트를 설정

focusin( handler(eventObject)) / focusin( [ eventData ], handler(eventObject))

focusout( handler(eventObject) ) / focusout( [ eventData ], handler(eventObject))

 : "focus"와 "blur" 이벤트를 위임한 것으로 "focusin"과 "focusout"으로 명명한 것 이다. 

 : 특정한 요소 및 자식 요소에서 일어나는 액션을 감지하여 이벤트를 발생한다.

?

1 2 3 4 5 6 7 8 9

jQuery('form')    .focusin(function(){        jQuery(this).addClass('focused');    });    .focusout(function(){        jQuery(this).removeClass('focused');    }); //주의해야 할 점은 "bubble"이 발생하지 않는 다는 것이다. //즉 부모 요소는 대상 요소보다 먼저 트리거되는 것을 의미한다.

 

keydown() : 각 요소의 keydown 이벤트를 실행

keydown(handler(eventObject)) : 각 요소에 keydown 이벤트를 설정

keypress() : 각 요소의 keypress 이벤트를 실행

keypress(handler(eventObject)) : 각 요소에 keypress 이벤트를 설정

keyup() : 각 요소의 keyup 이벤트를 실행

keyup(handler(eventObject)) : 각 요소에 keyup 이벤트를 설정

load(handler(eventObject)) : 각 요소의 load 이벤트를 설정

mousedown(handler(eventObject)) : 각 요소의 mousedown 이벤트를 설정

mousemove(handler(eventObject)) : 각 요소의 mousemove 이벤트를 설정

mouseout(handler(eventObject)) : 각 요소의 mouseout 이벤트를 설정

mouseover(handler(eventObject)) : 각 요소의 mouseover 이벤트를 설정

mouseup(handler(eventObject)) : 각 요소의 mouseup 이벤트를 설정

resize(handler(eventObject)) : 각 요소의 resize 이벤트를 설정

scroll(handler(eventObject)) : 각 요소의 scroll 이벤트를 설정

select() : 각 요소의 select 이벤트를 실행.  select 이벤트는 텍스트 에리어의 문자열을 선택 상태로 하거나 선택 범위를 변경했을 때에 실행 한다.

select(handler(eventObject)) : 각 요소에 select 이벤트를 설정

submit() : 각 요소의 submit 이벤트를 실행

submit(handler(eventObject)) : 각 요소에 submit 이벤트를 설정

unload(handler(eventObject)) : 각 요소에 unload 이벤트를 설정

 

Effects

● Basics

show() : 각 요소가 보이지 않는 경우 표시한다.

show([speed], [callback])

 : 표시시의 스피드를 설정할 수 있다. 또, 표시가 완료했을 때에 호출하는 함수를 설정할 수도 있다.

?

1 2 3 4 5

//a의 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 나타난다. speed를 사용시 정한 시간동안    //요소의 높이를 맨 위로부터 바닥까지, 너비는 왼쪽에서 오른쪽까지, 불투명도는 0에서 1까지 증가시킨다.    $("button").click(function () { $("p").show("slow");    });

 

hide() : 각 요소를 보이지 않게 한다.

 : Return jQuery Object - 대상 객체

hide([speed], [callback])

 : 비표시시의 스피드를 설정할 수 있다. 또, 비표시 되었을 때에 호출하는 함수를 설정할 수도 있다.

?

1 2 3 4 5

// a라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 사라진다. speed를 사용시 요소의     //높이, 너비, 불투명도를 정한 시간동안 0까지 감소시키고 display:none 상태를 적용시킨다.    $("button").click(function () { $("p").hide("slow");    });

 

.toggle([duration] [, callback])

.toggle([duration] [, easing] [,callback])

.toggle( showOrHide )

 : 가시성을 컨트롤하는 .toggle()로 지정된 요소의 표시/비표시를 호출될 때 마다 반대의 값으로 변경한다.

 duration: 밀리세컨드 시간 값. 가시성 속성이 변경되는 속도를 의미한다. 가령 'slow'의 경우 서서히 보여지거나 사라진다.

 easing: 토글 특수 효과

 callback 콜백 함수

 http://www.websamo.com/bbs/board.php?bo_table=jquery_api&wr_id=191&sfl=wr_subject&stx=toggle&sop=and

?

1 2 3

$("button").click(function () {     $("p").toggle(); //show(), hide() 함수가 토글 시 매번 교차호출 });

 

.toggle(callback, callback [, callback)  jQuery 1.8에서 삭제(Deprecated)

 : 지정된 콜백함수를 교차 호출한다. 가시성 컨트롤과는 관련이 없다.

 http://www.websamo.com/bbs/board.php?bo_table=jquery_api&wr_id=168&sfl=wr_subject&stx=toggle&sop=and

delay(duration, [ queueName ])

 : 콜백과 애니메이션 사이이의 혼란을 방지하고 "setTimeout" 함수를 호출하지 않고도 지연시키고 싶은 만큼 애니메이션을 지연시킬수 있다.

?

1 2 3 4 5 6 7

jQuery('#foo')     .slideDown() // Slide down     .delay(200) // Do nothing for 200 ms     .fadeIn(); // Fade in   //".delay()"의 첫 번째 인자로 밀리세컨즈 단위의 지연 시간값을 기입한다. 만약 다른 애니메이션 //대기열을 사용하려면 두번째 인자로 대기열 이름을 전달할 수 있다.(기본: "fx")

 

● Sliding

slideDown([speed], [callback]) : 비표시의 요소를, 그 요소의 높이가 될 때까지 서서히 표시해 간다.

?

1 2 3 4 5 6

// test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 슬라이딩(DOWN) 효과를 나타낸다. $(function(){     $("#test_id").click(function(){         $("#a").slideDown(500);     }); });

 

slideUp([speed], [callback]) : 각 요소를, 높이가 제로가 될 때까지 서서히 보이지 않게 한다.

?

1 2 3 4 5 6

// test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 슬라이딩(UP) 효과를 나타내며 사라진다. $(function(){     $("#test_id").click(function(){         $("#a").slideUp(500);     }); });

 

slideToggle([speed], [callback]) : 이 함수가 불릴 때마다 각 요소에 slideDown/slideUp(을)를 교대로 실행한다.

 : Return jQuery Object - 대상 객체

?

1 2 3 4 5 6 7

// test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소의 style의 display 값이 //none일 경우 slideDown, 아닐 경우(block 또는 liline) slideUp 효과를 나타낸다.  $(function(){      $("#test_id").click(function(){          $("#a").slideToggle(500);      });  });

 

 

● Fading

fadeIn([speed], [callback])

 : 지정한 시간동안 투명도를 0에서 1로 증가시키고 style의 display를 none의 이전상태 (block 또는 liline)로 적용시킨다. 해당 요소가 서서히 나타나게 표현된다.

?

1 2 3 4 5 6

// a 라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 0.5초간 페이딩(In) 효과를 나타낸다. $(function(){     $("#a").click(function(){         $("#b").fadeIn(500);     }); });

 

fadeOut([speed], [callback])

 : 지정한 시간동안 투명도를 1에서 0으로 감소시키고 style의 display:none 상태로 적용시킨다. 해당 요소가 서서히 사라지게 표현된다.

?

1 2 3 4 5 6

// a 라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 0.5초간 페이딩(Out) 효과를 나타내며 사라진다. $(function(){     $("#a").click(function(){         $("#b").fadeOut(500);     }); });

 

  

fadeTo(speed, opacity, [callback])

 : 지정한 시간동안 투명도를 opacity만큼 증가 또는 감소시킨다.(opacity 만큼 fade 시킨다.)

?

1 2 3 4 5 6

// a 라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 0.5초간 투명도를 0.33으로 변경되면서 페이딩(To) 효과를 나타낸다. $(function(){     $("#a").click(function(){         $("#b").fadeTo(500, 0.33);     }); });

 

 

● Custom

animate(params, [duration], [easing], [callback]) : 독자적인 애니메이션을 작성, 실행한다.

animate(params, options) : 독자적인 애니메이션을 작성 실행한다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$("#left").click(function(){ $(".block").animate({"left": "-=50px"}, "slow");    });       // test_id1이라는 id를 가진 요소를 클릭하면 a라는 요소의 width값을 90%, height값을    270px로 0.5초동안 변화 후 fontSize를 10px로 변경한다.     // test_id2라는 id를 가진 요소를 클릭하면 a라는 요소의 width값을 50%, height값을    500px로 3초동안 변경 과 동시에 queue:false 설정으로 대기 없이 바로 fontSize 24px로 변경한다.     $(function(){         $("#test_id1").click(function(){             $("#a").animate({ width : "90%", height : "270px" }, 500)             .animate( { fontSize : "10px" } );         });         $("#test_id2").click(function(){             $("#a").animate({ width: "50%", height : "500px" }                                               , { queue : false, duration : 3000 })             .animate( { fontSize : "24px" } );         });     });

 

stop() : 실행중의 효과를 정지한다.

?

1 2 3 4 5 6

// test_id라는 id를 가진 요소를 클릭하면 a라는 요소의 효과를 정지시킨다. $(function(){    $("#test_id").click(function(){        $("#a").stop();    }); });

 

queue() : 최초의 요소가 가지는 효과의 큐를 함수 배열로 돌려준다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<html> <head>   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js" ></script>   <script type="text/javascript">   $(document).ready(function(){      $("#show").click(function () {      var n = $("div").queue("fx");      $("span").text("Queue length is: " + n.length);    });    function runIt() {      $("div").show("slow");      $("div").animate({left:'+=200'},2000);      $("div").slideToggle(1000);      $("div").slideToggle("fast");      $("div").animate({left:'-=200'},1500);      $("div").hide("slow");      $("div").show(1200);      $("div").slideUp("normal", runIt);    }    runIt();     });   </script>   <style>   div { margin:3px; width:40px; height:40px;        position:absolute; left:0px; top:30px;        background:green; display:none; }   div.newcolor { background:blue; }   span { color:red; }   </style> </head> <body>   <button id="show">Show Length of Queue</button>   <span></span>   <div></div> </body> </html>

 

queue(callback) : 각 요소가 가지는 큐의 마지막으로 실행되는 함수를 추가한다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<html> <head>   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js" ></script>   <script type="text/javascript">   $(document).ready(function(){      $(document.body).click(function () {      $("div").show("slow");      $("div").animate({left:'+=200'},2000);      $("div").queue(function () {        $(this).addClass("newcolor");        $(this).dequeue();      });      $("div").animate({left:'-=200'},500);      $("div").queue(function () {        $(this).removeClass("newcolor");        $(this).dequeue();      });      $("div").slideUp();    });     });   </script>   <style>   div { margin:3px; width:40px; height:40px;        position:absolute; left:0px; top:30px;        background:green; display:none; }   div.newcolor { background:blue; }   </style> </head> <body>   Click here...   <div></div> </body> </html>

 

queue(queue) : 함수 배열을 건네주어 각 요소의 효과 큐를 옮겨놓는다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<html> <head>   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js" ></script>   <script type="text/javascript">   $(document).ready(function(){      $("#start").click(function () {      $("div").show("slow");      $("div").animate({left:'+=200'},5000);      $("div").queue(function () {        $(this).addClass("newcolor");        $(this).dequeue();      });      $("div").animate({left:'-=200'},1500);      $("div").queue(function () {        $(this).removeClass("newcolor");        $(this).dequeue();      });      $("div").slideUp();    });    $("#stop").click(function () {      $("div").queue("fx", []);      $("div").stop();    });     });   </script>   <style>   div { margin:3px; width:40px; height:40px;        position:absolute; left:0px; top:30px;        background:green; display:none; }   div.newcolor { background:blue; }   </style> </head> <body>   <button id="start">Start</button>   <button id="stop">Stop</button>   <div></div> </body> </html>

 

dequeue() : 기다리는 행렬의 선두로부터 처리를 꺼내 실행한다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<html> <head>   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js" ></script>   <script type="text/javascript">   $(document).ready(function(){      $("button").click(function () {      $("div").animate({left:'+=200px'}, 2000);      $("div").animate({top:'0px'}, 600);      $("div").queue(function () {        $(this).toggleClass("red");        $(this).dequeue();      });      $("div").animate({left:'10px', top:'30px'}, 700);    });     });   </script>   <style>   div { margin:3px; width:50px; position:absolute;        height:50px; left:10px; top:30px;        background-color:yellow; }   div.red { background-color:red; }   </style> </head> <body>   <button>Start</button>   <div></div> </body> </html>

 

 

● Settings

jQuery.fx.off : 효과를 켜거나 끈다.

?

1 2 3 4 5 6 7

// test_id라는 id를 가진 요소를 클릭 시 a가 0.5초동안 서서히 사라지지 않고 바로 사라져 버린다. $(function(){     jQuery.fx.off = false;     $("#test_id").click(function(){         $("#a").hide(500);     }); });

 

 

Internals

● 데이터 캐쉬

jQuery.data(elem) : 요소를 식별할 수 있는 독특한ID(을)를 돌려준다.

jQuery.data(elem, name) : 요소에 관련지을 수 있었던 데이터를 돌려준다.

jQuery.data(elem, name, value) : 요소에 관련지을 수 있었던 데이터를 설정해, 설정치를 돌려준다.

jQuery.removeData(elem) : 어느 요소에 관련지을 수 있었던 데이터를 모두 삭제한다.

jQuery.removeData(elem, name) : 어느 요소에 관련지을 수 있던, 지정된 값을 삭제한다.

● Ajax

jQuery.param(obj) : form 요소나 오브젝트의 값을 시리얼라이즈 한다.

Utilities

각종 유틸리티

● 유저 에이전트

jQuery.support : 브라우저마다의 기능의 차이나 버그등의 정보를 구조체로 돌려준다.

jQuery.browser : jQuery 1.3에서는 jQuery.support를 사용

jQuery.browser.version : jQuery 1.3에서는 jQuery.support를 사용. 브라우저 렌더링 엔진의 버젼 번호.

jQuery.boxModel : jQuery 1.3에서는 jQuery.support(을)를 사용. W3C 표준 CSS Box Model(을)를 사용하고 있는지 여부

?

1 2 3 4 5 6 7 8 9 10

$(document).ready(function () {        var result = "";        //$.browser의 모든 속성 출력          jQuery.each(jQuery.browser, function (i, val) {              result += i + ";" + val + "\n";        });          alert(result); });

 

 

● 문자열 조작

jQuery.trim(str) : 문자열을 트림

● 배열과 오브젝트 조작

jQuery.each(object, callback) : 범용적인 반복 함수. each() 문에서 return false;을 만나면 each문을 빠져 나감

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

//예제1 $(document).ready(function () {     //h3요소 모두 가져오기     var headers = $('h3');     // 반복문을 이용한 반복: for문 보다는 jQuery의 each문이 사용하기 편리     for (var i = 0; i < headers.length; i++) {         alert($(headers[i]).html());     }       $('h3').each(function (index) {         alert($(this).html());     }); });   //예제2 $(document.body).click(function() {     $("div").each(function(i) {         if (this.style.color != "blue") {             this.style.color = "blue";         } else {             this.style.color = "";         }     }); });   //폼 입력값 가져오기 function getAllValue() {     var address = "";           $("#address").find("input:text").each(function(i) {         address += $(this).val();     });           alert(address); }   $(function() {                $("#button1").click(function(event) {               var data = [];                            var form = $("form :input[type=text]");                            $.each(form, function(e, textBox) {                                    data.push($.trim(textBox.value));                            });                            $("#addressData").val(data.join(" "));                            alert($("#addressData").val());           });            }); </script>   </head>   <body style="font-size: 9pt;"> <form id="form1">     <div id="address">              우편번호 : <input type="text" /> - <input type="text" /> <br />        주소 : <input type="text" /> <br />        상세 주소 : <input type="text" /> <br />     <input  type="button" value="모든 입력 내용값" on_click="getAllValue();" />     <input id="button1" type="button" value="AllValueToHidden" />     <input id="addressData" type="hidden" />           </div> </form>

 

jQuery.extend(target, object1, [objectN]) : 오브젝트를 확장

jQuery.grep(array, callback, [invert]) : 배열로부터, 함수를 이용해 특정의 값을 제거

jQuery.makeArray(obj) : 배열과 같이 이용하고 있는 오브젝트를, 실제로 배열로 변환

jQuery.map(array, callback) : 배열의 각 치를 함수로 처리하고, 새로운 배열을 작성

jQuery.inArray(value, array) : 지정한 값이 배열중에 있으면, 그 인덱스를 리턴

jQuery.unique(array) : 배열중으로부터 중복 하고 있는 값을 제거

● 검사

jQuery.isArray(obj) : (jQuery 1.3) 파라미터로 건네받은 값이 배열일지를 판별

jQuery.isFunction(obj) : 건네받은 값이 함수인지 어떤지를 판별

● 함수의 컨텍스트 조작하기

jQuery 1.4부터 새롭게 제공되는 "proxy" 함수는 jQuery의 네임스페이스를 관리할 수 있게한다. 이 함수는 "scope"와 메소드 이름을 받는 두개의 인자를 가지며 자바스크립트의 "this" 키워드를 통하여 다른 개체를 유지할 수 있게 한다. 

    예를 들어 "app" 개체는 "config" 개체와 "clickHandler" 메소드로 구성된 두개의 속성을 가지고 있다면,

?

1 2 3 4 5 6 7 8

var app = {     config: {        clickMessage: 'Hi!'     },     clickHandler: function() {         alert(this.config.clickMessage);     } };

 

    "clickHandler" 메소드를 실행하면 "this" 키워드를 통하여 "app" 개체에 접근하고 "config" 개체를 호출하여 값을 취득할 수 있음을 확인할 수 있다.

    app.clickHandler(); // "Hi!" is alerted

    이 메소드를 이벤트 핸들러로 바인딩하면,

    jQuery('a').bind('click', app.clickHandler);

    이렇게 바인딩된 메소드는 정상적으로 작동하지 않는다. 왜냐하면 jQuery(정확히 말하면 event model)에 의해서 "this"가 재정의 되어 버리기 때문이다. 이러한 문제들을 해결하기 위해서 제공하는 함수가 바로 "proxy"이다.

?

1 2 3 4

jQuery('a').bind(     'click',     jQuery.proxy(app, 'clickHandler') );

 

    이제 앵커를 클릭하면 "Hi!"라는 문구가 나타난다.

    "proxy" 함수가 리턴하는 것은 "wrapped"된 함수이다. 여기에는 이벤트가 되돌려준 개체와 "app"가 들고있는 두 속성을 "this"로 확장해서 돌려준 것이다. 이것은 이벤트를 바인딩 할 때 뿐만아니라 플러그인을 만들거나 콜백을 호출하는 데에도 유용하게 사용될 수 있다. 

● jQuery.contains( container, contained )

jQuery 1.4에서는 jQuery 네임스페이스에 "contains" 함수를 제공한다. 이 함수는 낮은 수준의 함수로써 두개의 DOM 노드를 인자로 받아 수용여부를 구분한다. 첫 번째 요소가 두번째 요소를 포함하고 있는지에 대한 여부를 불린(boolean) 형식으로 반환한다.

?

1 2	jQuery.contains(document.documentElement, document.body); // Returns true - <body> is within <html>

 

 

 

1. 파라미터의 이름만 보면 false일 때는 데이터를 제외하고복사하는것 같지만, false를 줘도 value는 여지없이 복사된다. [본문으로]
2. UPDATE: Starting jQuery 1.9, AJAX events should be attached to document only [본문으로]