jQuery Quick API

$("p").add("div")  // p 요소와 div 요소를 선택한다.

$("p").not(".green")  // p 요소의 확장집합에서 class가 green인 요소를 제거한다.

$('.container').contents().filter(function(){}); 

// class container 요소의 자식요소(text 포함)를 가져와 filter 한다. iframe text를 가져올때 사용

$("#term").nextUntil("dt").css('background-color', 'red'); 

// id term 요소부터 dt가 나올때까지 형제요소를 검색하고 배경을 red로 변경

$("#term").nextUntil($("#term2"), "dd").css('background-color', 'red'); 

// id term 요소부터 id term2 요소까지 중 dd 요소만 배경을 red로 변경

$("#term").parentsUntil("dt").css('background-color', 'red'); 

// id term 요소부터 dt가 나올때까지 부모요소를 검색하고 배경을 red로 변경

$("#term").parentsUntil($("#term2"), "dd").css('background-color', 'red'); 

// id term 요소부터 id term2 부모요소까지 중 dd 요소만 배경을 red로 변경

$("div").eq(2).css('background-color', 'red'); // div의 3번째 요소의 배경을 변경

$("div").index($("div:contains('Third')")); 

// div 안에서 div에 'Third'라는 단어를 포함하고 있는 div index 값

$.inArray("John", arr);     // arr 배열에서 "John"의 인덱스를 찾아서 반환

$("#div").find(ul); // id div의 자식노드에서 ul 요소를 찾는다.

$("#div").filter(ul); // id div 노드 자신을 포함한 요소에서 ul 요소를 찾는다.

$('ul:first').find('.foo).css('background-color' , 'red')  // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경

.end().find('bar').css('background-color', 'green'); // find를 호출하기 전의 요소($('ul:first))에서 class=bar를 찾아 배경 변경

$("div").each(function(i,element){

// div 요소를 순서대로 선택한다.  i: 순서 시작은 0 ,  element : 선택된 요소 

});

$("li").has("ul");   // li 요소중 ul을 가지고 있는 요소만 선택

$("img").slice(2).css(...);    

// img 요소의 세번째 요소부터 끝 요소까지 css 적용

$("img").slice(2, 4).css(...);    

// img 요소의 세번째 요소부터 5번째 요소를 만날때까지(4번째) css적용

$("img").slice(-2, -1).css(...);    

// img 요소의 끝에서 두번째 요소부터 끝에서 첫번째 요소를 만날때까지 css적용

$("#img").clone();  // id img DOM을 복사한다.

$("#name").closest("ul");   // id name 요소에서 가장 가까운 ul을 선택한다.

$("#name").closest("ul", "#code");   // id code 요소 아래의 id name 요소에서 가장 가까운 ul을 선택한다.

$('div').find('p').andSelf().css(..);  

// div와 내부의 p요소를 선택해서 결합 후 css 적용

$('li.item-a').offsetParent().css(..);   // li의 item-a 클래스의 css position상 가장 가까운 부모요소에 css를 적용

$.grep([0,1,2], function(n,i){ return n>0;});      

// 배열 [0,1,2] 에서 0보다 큰값을 반환 [1,2]

$.grep([0,1,2], function(n,i){ return n>0;}, true);      

// 배열 [0,1,2] 에서 0보다 크지 않은 값을 반환 [0]

           var app={

                   config : { clickMessage : Hi!" }, // config 메서드에 clickMessage를 정의 

                   clickHandler : function(){  // clicHandler 메서드 함수 정의

                                  alert( this.config.clickMessage);   

                                  // this:app 의 config 메시지의 clickMessage를 알람

                       }   

                   }

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

           // 실행되지 않는다. jQuery 이벤트 모델에 의해 this가 app 이 아니다.

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

           // this 키워드를 유지한채 실행된다.

A.after( B) / A뒤에 B를 추가

A.insertAfter(B) / B뒤에 A를 추가

$("div").append("<p>내용</p>");    // div 뒤에 <p>내용</p> 를 삽입한다.

$("<p>내용</p>").appendTo($("div"));   // <p>내용</p>를 div 뒤에 삽입한다. 

A.before(B) / A 앞에 B를 추가

A.insertBefore(B) / B 앞에 A를 추가

$("div").prepend("<p>내용</p>");    // div 앞에 <p>내용</p> 를 삽입한다.

$("<p>내용</p>").prependTo($("div"));  

// <p>내용</p>를 div 앞에 삽입한다. 

$("#ids").pushStack($("div"));   

// id ids 요소에 jQuery 스택에 div 요소를 추가한다.

$(".inner").wrap('<div class="new" />');   

// class=inner 집합 요소 각각을 <div class ="new"></div>

$(".inner").wrap(function(){

      return '<div class="new" />');  

// class=inner 집합 요소 각각을 <div class ="new"></div>

});

$(".inner").wrap();   // class=inner 집합 요소의 부모를 제거한다. 

$(".inner").wrapAll('<div class="new" />');  

// class=inner 집합 요소 전체를 <div class ="new"></div>

$(".inner").wrapInner('<div class="new" />');  

// class=inner 집합 요소 각각의 내부를 <div class ="new"></div> 로 감싼다

$("div").detach();    // div를 포함 하위 요소 모두 제거

$("div").empty();    // div 하위 요소 모두 제거

$("div").remove();    // div 포함 하위 요소, 이벤트, 데이터 모두 제거

$('<h2>New heading</h2>').empty($("div"));    

// div 요소를 <h2>New heading</h2> 요소로 변경한다.

$("div").empty('<h2>New heading</h2>');    

//  <h2>New heading</h2> 요소로 div 요소를 변경 시킨다.

var arr = $("div").toArray();    //  arr[0] === <div>Hello</div>

var arr = $.makeArray($("input"));      //  arr[0] === "Hello"

var arr = $("div").map(function(){

      return $(this).text().toUpperCase();      // 선택된 요소들의 text값을 대문자로 변경한다.

});

var arr = $("div").map({width : 10, height: 15} ,function(value, index){

      return index;      //  key를 반환한다.  ["width", "height"]

});

$.globalEval("var newVar = true;")      // newVar == true

$.merge([0,1,2],[2,3,4]);  // 첫번째 배열 결과 : [0,1,2,2,3,4]

.merge($.merge([],[0,1,2]),[2,3,4]);  // 첫번째 배열의 값을 유지하기 위해 새로운 배열을 만든다. 

var trimStr = $.trim(str);   // str === "   abc def ff  ";    trimStr === "abc def ff";

var divs = $.unique(divs);      // divs의 중복 선택되어 들어간 element를 제거한다.

var obj = $.parseJSON('{"name":"John"}'); // 문자열 {"name":"John"}을 JavaScript object로 변환한다.

alert(obj.name==="John");  // JavaScriptObject인 obj에서 name 요소인 John

$title = $.parseXML(xml).find("title");  // xml 파일에서 title의 값을 찾는다.

  (function(){

    var sub$ = jQuery.sub();

    sub$.fn.myCustomMethod = function(){

      return 'just for me';

    };

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

      sub$('body').myCustomMethod() // 'just for me'

    });

  })();

  typeof jQuery('body').myCustomMethod // undefined

         var object1 = { apple : 0,  banana : {weight : 52, price : 100}, cherry : 97 };

         var object2 = { banana : {price : 200},  durian : 100 };

         $.extend(object1, object2);

         var object1 = {  apple: 0,  banana: {weight: 52, price: 100},  cherry: 97};

         var object2 = {  banana: {price: 200},  durian: 100};

         $.extend(true, object1, object2

            $.fn.extend({

                 myMethod : function(){...}

            });

            -> $("div").myMethod();

            $.extend({

                 myMethod2 : function(){...}

            });

            -> $.myMethod();

$("p").addClass("name");  // class = "name" 추가

if($("p").hasClass("name")==true)  // class 가 "name"인지 확인 true/false

 $("p").removeClass("name");  // class = "name"을 제거

$("p").toggleClass("name");  // class = "name"이 있으면 제거 / 없으면 추가

$("a").attr("href", "http://www.googlec.co.kr");  // a 요소의 href 값을 변경한다.

$("#content").attr({id:'content01', class:'style1'});  // id content 요소의 id와 class 값을 변경한다.

$("a").removeAttr("href");  // a 요소의 "href" 속성값을 제거한다.

$("div").css("color", 'red');  // div 요소의 글자색을 red로 설정한다.

$("div").css({color:'red', border:'1px solid blue'});  // 동시에 여러개의 값을 설정할 수 있다.

 $("div").css("backgroundColor");     // div 요소의 backgroud-Color 값을 가져온다.

$("div").width();  // div 의 현재 넓이 값 (숫자로 반환, .css('width')는 숫자뒤에 px가 붙어 반환 400px)

$("div").width(30);  // div의 넓이를 30으로 설정한다. { 30, 30px, 30%, auto }

$("div").innerWidth();  // div 의 padding을 포함한 현재 넓이

$("div").outerWidth();  // div 의 padding과 border 포함한 현재 넓이

$("div").outerWidth(true);  // div 의 padding과 border, margin 포함한 현재 넓이

$("div").height();  // div 의 현재 높이 값 (숫자로 반환, .css('height')는 숫자뒤에 px가 붙어 반환 400px)

$("div").height(30);  // div의 높이를 30으로 설정한다. { 30, 30px, 30%, auto }

$("div").innerHeight();  // div 의 padding을 포함한 현재 높이

$("div").outerHeight();  // div 의 padding과 border를 포함한 현재 높이

$("div").outerHeight(true);  // div 의 padding과 border, margin을 포함한 현재 높이

$("div").data("foo", '52');  // div 요소에 "foo" 라는 key로 52를 삽입한다.

$("div").data("bar", {color:'red', border:'1px solid blue'});  // "bar" 라는 key로 배열 삽입

$("div").data({baz : [1,2,3]});  // baz 배열 삽입

$("div").data("foo");  // div 요소에 "foo"라는 key로 저장된 값을 가져온다.

$("div").data();  // div 요소에 전체 값을 가져온다. {foo:52, bar:{color....}, baz:[1,2,3,4]}

$.data(document.body, "foo",'52');    // 페이지 body 요소에 foo를 키로 52 삽입

$("div").data("foo");  // div 요소에 "foo" 라는 key의 데이터를 제거한다.

$.data($("div"), "foo");  // div 요소에 "foo" 라는 key의 데이터를 제거한다.

if(.$.hasData(document.body)==true)   // document.body에 data가 있으면 true  

$.each($.browser,function(i, val){

           result += i +":" + val;     //   결과 msie:true version:7.0    

}

var num = $("div").size();  // num은 div의 배열 크기를 숫자로 반환한다. 

var num = $('div').length;  // num은 div의 배열 크기를 숫자로 반환한다 

ar offset = $('div:last').offset();  // div 마지막 요소의 left, top 좌표 반환 offset.left / offset.top

var position = $('div:last').position();  // div 마지막 요소의 부모로부터의 left, top 좌표 반환 position.left / position.top

var x= $('div:last').scrollLeft();  // div 마지막 요소의 현재 수평 스크롤 x좌표를 반환한다.

var x= $('div:last').scrollLeft(300); // div 마지막 요소의 수평 스크롤 x좌표를 300으로 이동한다.

var x= $('div:last').scrollTop();  // div 마지막 요소의 현재 수직 스크롤 y좌표를 반환한다.

var x= $('div:last').scrollTop(300); // div 마지막 요소의 수직 스크롤 y좌표를 300으로 이동한다.

$.type(undefined) === "undefined" //

$.type() === "undefined" //

$.type(null) === "null" //

$.type(true) === "boolean" //

$.type(3) === "number" //

$.type("test") === "string" //

$.type(function(){}) === "function" //

$.type([]) === "array" //

$.type(new Date()) === "date" //

$.type(/test/) === "regexp" //

$.now() // result : 1340954729007     (new Data).getTime(); 

$.fx.interval = 1000;    // 프레임을 1000으로 변경한다.

$.fx.off = true;    // 애니메이션 효과를 끈다.

var chk = $("div").is(":animated");   // chk 는 true, false

$.contains($("#name"), $("#code"))   // #name 요소 아래에 #code 요소가 있다면 true

$.isArray(arr)   // arr이 Array 인지 체크  true / false

$.isEmptyObject(arr)   // arr 이 empty 인지 체크  empty : true / false

$.isFunction(function(){});  // function(){}가 함수인지 체크한다. : true / false

$.isPlainObject({});   // {}가 Plain Object 인지 체크 한다. true /false

$.isWindow(window);   // window가 Window 인지 체크 true / false

$.isXMLDoc(document);   // document가 xml 문서인지 확인 : false

$('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', 

complete : function(){....}});  {queue:false}

$("div").slideDown().delay(5000).slideUp();  // id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 한다.

$("div").stop();   // div의 큐의 애니메이션을 멈춘다.

$("div").show();  // div 가 나타난다.

$("div").show(1000);  // div 가 1초에 걸쳐서 나타난다.

$("div").hide();  // div가 사라진다.

$("div").show(1000);  // div 가 1초에 걸쳐서 사라진다.

$("div").toggle();    // div가 hide 상태면 show() / show 상태면 hide()한다.

$("div").toggle(1000);   // div 가 1초에 걸쳐서 toggle() 한다.

$("div").fadeIn(); // div가 서서히 나타난다.

$("div").fadeIn("slow");  // div가 천천히 서서히 나타난다.

$("div").fadeIn(3000");   // div가 3초에 걸쳐서 서서히 나타난다.

$("div").fadeTo("slow", 0.15);  // 천천히 투명도 0.15 로 변화

$("div").fadeTo("slow", 0.15);  // 천천히 투명도 0.15 로 변화

$("div").slideDown(); // div가 아래로 내려온다.

$("div").slideDown("slow");  // div가 천천히 아래로 내려온다..

$("div").slideDown(3000");   // div가 3초에 걸쳐서 아래로 내려온다.

$("div").show("slow").animate({left:'+=200'}. 2000)  // id div 요소가 천천히 나타난 후, 2초간 오른쪽으로 200이동한다

$("div").queue(function(){  // queue의 함수를 호출한다.

      $(this).addClass("newcolor");  // id div 요소의 class를 newcolor 등록

       $(this).dequeue(); // 다음 애니메이션 실행

});

 $("div").animate({left:'-=200'}, 500);  // 05초간 왼쪽으로 200 이동한다.

$("#stop").click(function(){  // id stop 요소를 클릭하면

       $("div").clearQueue();  // div의 queue가 비워진다. 실행중인 큐는 진행한다.

});

$("#image").bind("mousedown", function(){ // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});

$("#image").live("click", function(){  // id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});

$("#image").delegate("td", "click", function(){ // id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});

$("#image").on("click", "td", function(){ // id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정 

});

$("#image").on("click", "td",{foo: "bar"}, function(event){

    alert(event.data.foo);

// id image 요소 밑의 'td'에 마우스를 클릭했을 때, {foo:"bar"}를 event에 넣어 함수 실행

}); 

$("#img").trigger("click")    // id img 요소에 click 이벤트를 발생시킨다.

$('element").명령어(function(event){  // element 요소에 명령어 실행시 함수 동작

});

$.holdReady(true); // DOM이 로드되는 것을 멈춘다.

$.getScript("myplugin.js", function(){ // myplugin.js 파일을 가져온다.

      .holdReady(false); // 파일 로드가 성공하면 DOM을 구성한다.

});

<img src="missing.png" alt="Book" id="book" />

$('#book').error(function(){ // 이미지가 로드되지 않을 경우 함수 실행

});

$("#p1").hover(function(event){ // 마우스가 오버되었을때 함수 실행 

},

 function(){ 

// 마우스가 떠날때 함수 실행

});

var params = {width : 1680, height : 1050}; // 배열 선언

var str = $.param(params); // Ajax로 전송가능하도록 직렬화

// $.param({a:[2,3,4]});  // "a[]=2&a[]=3&a[]4"

// $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

$("#name").serialize();   //  id name form의 데이터를 직렬화한다. a=1&b=2

$("#name").serializeArray();  //  id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}]

         $.ajax({

                type : 'POST',                                    // post 타입 전송

                url : 'some.php',                                // 전송 url

                data : "name=John&location=Boston",   // 전송 파라미터

                cache : false,                                  // ajax로 페이지를 요청해서 보여줄 경우

                                                  // cache가 있으면 새로운 내용이 업데이트 되지 않는다.

               async : true,                                    // 비동기 통신,  false : 동기 통신

               beforSend : fucntion(){                     // ajax 요청이 전송되기 전 실행 함수

                },

               success : function(msg){                   // 콜백 성공 응답시 실행

                },

               error : function(){                              // Ajax 전송 에러 발생시 실행

                },

             complete : function(){                       //  success, error 실행 후 최종적으로 실행

                  }

            });

$.ajaxPrefilter(function(options)){ // options : request 요청 옵션 값들

}); 

$("button").click(function(){  // button을 클릭할시 ajax 호출에 대한  

          $.ajaxSetup({ // url과 success 함수를 셋팅한다.

                      url : "test_ajax.txt",

                      success:function(result){

          })

});

$.get("test.php", function(data.status){..});   // "test.php"로 get 방식 통신 후 function 실행  

$.post("test.php",  // "test.php"로 

           {  //   name과 message 파라미터 

                    name: "myeonghyeon",

                    message : "hi"

           },

           function(data.status){..}  // callback() 함수 실행

);   // "test.php"로 파라미터를 보내 post 방식 통신 후 function 실행  

$("div").promise().done(function(){

          $("p").append("Finished");  // 모든 div 요소의 요청이 모두 성공하면, done 실행, p 요소에 finished 삽입

});

$("div").promise().then(A).then(B);   // div에 주어진 액션이 성공하면 리턴값을 가지고 A 함수 실행 A함수 리턴값을 가지고 B 함수 실행

$.when( effect() ).done(function(){

        $("p").append("finished");  // effect() 함수를 실행해서 성공하면 p 에 finished를 삽입한다.

});

$.when( A, B ).done(function(){  // 동시에 A,B 함수를 실행하고 모두가 성공할 경우 .done(function() 실행

});