[jQuery] jQuery Quick API

jQuery Quick API 

1. 제어

(1) 선택

.add() : 요소를 추가 선택한다. 

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

.not() : 선택된 확장집합에서 인자에 해당하는 요소를 제거한다.

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

.children() : 요소의 고유한 자식으로 구성된 확장 집합을 반환한다.

.contents() : 선택한 요소의 자식 요소를 가져온다.(text node 포함)

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

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

.first() : 요소의 첫번째 노드 반환

.last() : 요소의 마지막 노드 반환

.next() : 요소 집합내의 바로 다음에 나오는 형제로 구성된 요소 반환

.nextAll() : 요소 집합내의 다음에 나오는 모든 형제로 구성된 확장집합 반환

.nextUntil() : 선택 요소부터 인자가 나올때까지 집합을 선택한다.

$("#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로 변경

.parent() : 요소 집합의 바로 위 부모로 구성된 확장 집합 반환

.parents() : 요소 집합의 모든 조상 확장 집합을 반환. 부모와 상위 모든 조상이 포함되지만 문서루트는 미포함

.parentsUnitl() : 선택 요소부터 인자가 나올때까지 부모 집합을 선택한다.

$("#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로 변경

.prev() : 요소 집합의 바로 이전에 나오는 형제로 구성된 확장 집합을 반환

.prevAll() : 요소 집합의 이전에 나오는 모든 형제로 구성된 확장 집합을 반환

.siblings() : 요소의 모든 형제를 포함하는 확장 집합을 반환.

.eq() : 선택 요소의 index번째 요소를 선택한다.

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

.index() : 선택 요소에서 인자의 index 번호를 반환

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

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

$.inArray() <jQuery.inArray()> : 대상 배열 내의 값을찾아서 인덱스를 반환한다. ; 첫번째 배열은 0, 요소가 없으면 -1

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

.find() : 선택된 요소의 자식노드에서 인자의 요소를 찾는다.

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

.filter() : 선택된 요소를 포함한 노드에서 인자의 요소를 찾는다.

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

.end() : jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다.

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

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

.each() : 다중 요소를 순서대로 선택한다.

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

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

});

.has() : 인자를 가지고 있는 확장집합을 선택 

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

.slice() : 선택한 요소 집합을 인자의 범위로 잘라낸다.

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

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

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

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

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

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

.clone() : 선택된 요소를 복사한다. 

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

.closest() : 현재 위치한 요소에서 DOM 트리를 탐색하여 일치된 요소를 선택한다.

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

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

.andSelf() : 선택된 구조 요소를 이어붙인다.

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

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

.offsetParent() : 위치(css:position) 요소를 기반으로 한 부모 요소를 찾는다.

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

$.grep() <jQuery.grep()> : 배열 요소를 조건에 따라 필터링하여 제거 한다. 특정 로직에 의해 true가 되는 결과만 반환

$.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]

$.proxy() <jQuery.proxy()> : jQuery의 네임스페이스를 관리할 수 있게 한다. "this" 키워드를 통하여 다른 개체를 유지할 수 있게 한다.

           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 키워드를 유지한채 실행된다.

(2) 삽입

.after() : 지정한 요소 뒤에 새로운 요소를 삽입 

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

.insertAfter() : 지정한 요소 뒤에 새로운 요소를 삽입 

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

.append() : 지정한 요소 뒤에 내용 삽입

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

.appenTo() : 지정한 내용을 요소 뒤에 삽입

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

.before() : 지정한 요소의 앞에 요소를 삽입 

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

.insertBefore() : 지정한 요소의 앞에 요소를 삽입 

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

.prepend() : 지정한 요소 앞에 내용 삽입

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

.prependTo() : 지정한 내용을 요소 앞에 삽입

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

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

.pushStack() : jQuery 스택에 DOM 요소를 추가한다.

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

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

.wrap() : $() 형식으로 쓰는 함수의 선택한 요소 각각을 문자열 또는 객체로 감싼다.

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

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

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

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

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

});

.unwrap() : 선택한 요소 집합의 부모를 제거한다.

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

.wrapAll() : $() 형식으로 쓰는 함수의 선택한 요소 전체를 문자열 또는 객체로 감싼다.

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

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

.wrapInner() : $() 형식으로 쓰는 함수의 선택한 요소 각각의 내부를 문자열 또는 객체로 감싼다.

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

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

(3) 삭제

.detach() : 지정한 요소를 포함 하위 요소 모두 제거

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

.empty() : 지정한 요소의 하위 요소를 제거

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

.remove() : 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거

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

(4) 변경, 변환

.text() : 해당 요소에 text 요소를 삽입 또는 변경한다.

.html() : 해당 요소에 html 요소를 삽입 또는 변경한다.

.val() : 해당 요소의 value 값을 삽입 또는 변경한다.

.replaceAll() : 해당 요소들로 인자 요소를 대체한다.

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

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

.replaceWith() : 해당 요소들을 인자의 요소로 바꾼다.  ; replaceAll() 과 선택,인자(target)이 반대

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

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

.toArray() : 선택한 요소 DOM 집합을 자바스크립트 배열로 만든다.

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

$.makeArray <jQuery.makeArray()> : jQuery 집합의 요소 값을 JavaScript 배열로 변환한다.

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

$.map() <jQuery.map()>

.map() : 선택된 배열 요소를 순서대로 callback 함수를 통해 얻어진 리턴값을 포함하는 새로운 jQuery 오브젝트 생성

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() <jQuery.globalEval()> : 문자열로 명령어를 실행시켜준다.

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

$.merge() <jQuery.merge()> : 두개의 배열을 첫번째 배열에 합칩니다.

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

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

$.trim() <jQuery.trim()> : 문자열 앞뒤에 있는 공백 문자를 제거하고 결과 반환

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

$.unique() <jQuery.unique()> : element 배열의 중복된 모든 element를 제거한다. ; string, number 배열에서는 동작 X

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

$.parseJSON() <jQuery.parseJSON()> : JSON문자열을 JavaScript object로 반환한다.

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

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

cf.) 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception이 발생한다. 문자열의 key 와 value 는 쌍따옴표("")를 사용해야 한다.

$.parseXML() <jQuery.parseXML()> : 유효한 XML문서를 파상한다.

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

(5) 확장

$.noop() <jQuery.noop()> : 비어있는 함수 (function(){})

$.noConflict() <jQuery.Conflict()> : 다른 JavaScript 라이브러리와 함께 사용할때 $의 충돌을 막기위해 사용

$.sub() <jQuery.sub()> : 새로운 jQuery 함수를 정의할때, 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들고자 할때 $.sub() 로 복사하여 사용

  (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

$.extend() <jQuery.extend()> : 첫번째 인자에서 두번째 인자를 병합하며, 확장한다.

두번째 인자값이 첫번째 인자값의 같은 옵션을 대체하며 확장

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

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

         $.extend(object1, object2);

결과 : object1 = { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 };

첫번째 인자값의 원본 값을 유지하며 병합

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

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

         $.extend(true, object1, object2

결과 : object1 == { apple: 0, banana: { weight: 52, price: 200 }, cherry: 97, durian: 100 }

요소에 적용할 명령어 확장

            $.fn.extend({

                 myMethod : function(){...}

            });

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

함수 실행 JQuery 명령어 확장

            $.extend({

                 myMethod2 : function(){...}

            });

            -> $.myMethod();

2. 속성(CSS), 추출

(1) 속성(CSS)

.addClass() : 지정한 요소에 class 값을 추가한다.

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

.hasClass() : 지정한 요소에 class 유무를 확인한다.

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

.removeClass() : 지정한 요소에 class 값을 제거한다.

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

.toggleClass() : 지정한 요소에 class를 추가/제거

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

.attr() 

1) 지정한 요소의 속성값을 입력 또는 변경한다.

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

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

2) 지정한 요소의 속성값을 가져온다.

$("a").attr("href");     // a 요소의 href의 값을 가져온다.

.removeAttr() : 지정한 요소의 속성값을 제거한다.

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

.prop() : .attr()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled

.removeProp() : removeProp()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled

                 

.css() 

1) 지정한 요소의 css 값을 삽입 또는 변경한다..

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

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

2) 지정한 요소의 속성값을 가져온다.

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

cf.) 

css의 속성명과 jQuery에서 쓰는 속성명은 형식이 조금 다르다.

css : background-color , jQuery : backgroundColor

css : padding-left, jQuery : paddingLeft

.width() : 선택한 요소의 현재의 계산된 넓이를 얻거나 넓이 값을 설정한다.

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

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

.innerWidth() : 선택한 요소의 padding을 포함한 넓이를 반환한다. (border 제외)

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

.outerWidth() : 선택한 요소의 padding 과 border를 포함한 넓이를 반환한다. (인자값 true 면 margin 포함)

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

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

.height() : 선택한 요소의 현재의 계산된 높이를 얻거나 높이 값을 설정한다.

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

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

.innerHeight() : 선택한 요소의 padding을 포함한 높이를 반환한다. (border 제외)

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

.outerHeight() : 선택한 요소의 padding과 border를 포함한 높이를 반환한다. (인자값 true면 margin 포함)

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

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

.data() 

1) 지정한 요소에 값을 삽입 또는 변경한다.

$("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 배열 삽입

2) 지정한 요소의 값을 가져온다.

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

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

$.data() <jQuery.data()> : 첫번째 인자의 요소에 두번째 인자를 키로 세번째 값을 저장한다. .data()와 동일

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

.removeData() : 지정한 요소에 데이터를 제거한다.

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

$.removeData() <jQuery.removeData()> : 지정한 요소에 데이터를 제거한다.

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

$.hasData() <jQuery.hasData()> : $.data()에 의해 저장된 임의의 값들이 있는지 확인한다.  true / false

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

(2) 추출

$.browser <jQuery.browser> : JQuery가 실행되는 browser의 version, browser 종류를 Map 형식으로 리턴한다.

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

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

}

cf.)

$.browser.version : 브라우저의 버전을 문자열로 리턴

$.browser.safari : 사파리 브라우저 여부 true & false 리턴

$.browser.opera : 오페라 브라우저 여부 true & false 리턴

$.browser.msie : Internet Explorer 브라우저 여부 true & false 리턴

$.browser.mozilla : Mozilla 브라우저 여부 true & false 리턴

$.support <jQuery.support> : 브라우저마다의 기능의 차이나 버그등의 정보를 구조체로 반환 ; 1.3 이후 버전에서는 $.browser 대신 $.support를 사용 권장

옵션값 : http://api.jquery.com/jQuery.support/

                       

.size() : 선택한 요소 배열의 길이를 반환한다.

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

.length : 선택한 요소의 배열의 길이를 반환한다.  (선택 요소에 "" 는 적용이안된다. '' 사용)

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

.offSet() : 선택한 요소의 전체 문서 내(document)에서의 left, top 좌표를 구한다.

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

.position() : 선택한 요소의 부모요소를 기준으로 left, top 좌표를 구한다.

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

.scrollLeft() : 선택한 요소의 스크롤바의 수평 위치(x좌표)를 얻거나 변경한다.

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

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

.scrollTop() : 선택한 요소의 스크롤바의 수직 위치(y좌표)를 얻거나 변경한다.

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

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

$.type() <jQuery.type()> : 인자의 obj의 type을 반환한다.

$.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() <jQuery.now> : 현재 시간을 number로 반환

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

$.fx.interval<jQuery.fx.interval> : 브라우져 애니메이션 프레임 조절

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

$.fx.off<jQuery.fx.off> : 모든 애니메이션 효과를 전역적으로 끈다.

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

3. 검증

.is() : 현재 상태를 확인하여 반환한다. true / false

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

$.contains() <jQuery.contains()> : 첫번째 인자 요소에 두번째 인자 요소를 가지고 있는지 확인한다.

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

$.isArray() <jQuery.isArray()> : 인자가 배열인지 확인한다.

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

$.isEmptyObject() <jQuery.isEmptyObject()> : 인자가 empty 인지 체크한다.

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

$.isFunction() <jQuery.isFunction()> : 인자가 JavaScript 함수인지 체크한다.

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

$.isPlainObject() <jQuery.isPlainObject()> : 인자가 plain Object인지 확인한다. (Plain Object : "{}" 나 "new Object"로 만들어진)  ; IE8에서는 Error

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

$.isWindow() <jQuery.isWindow()> : Window 인지 판별한다.

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

$.isXMLDoc() <jQuery.isXMLDoc()> : XML 문서의 DOM 노드 또는 XML 문서인지 체크

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

4. 효과

.animate() : 해당 객체의 CSS 변화 효과를 준다.  /$('p').animate({CSS Map}, {options});

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

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

.delay() : 해당 시간만큼 실행을 delay 시킨다.

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

.stop() : 실행중인 애니메이션을 중지한다.

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

.show() : 해당 요소를 보여준다.

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

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

.hide() : 해당 요소를 숨긴다.

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

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

.toggle() : 해당 요소가 show 상태면 hide() / hide 상태면 show() 실행

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

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

.fadeIn() : 서서히 나타나게 한다.

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

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

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

.fadeOut() : 서서히 사라지게 한다.

.fadeToggle() : show 상태면 fadeOut(), hide 상태면 fadeIn()이 실행된다.

.fadeTo() : 주어진 시간동안 주어진 투명도로 변화한다.

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

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

.slideDown() : 선택 요소가 슬라이드 되어 내려온다.

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

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

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

.slideUp() : 선택 요소가 슬라이드 되어 올라간다.

.slideToggle() : 선택 요소가 slideDown 상태면 slideUp(), slideUp 상태면 slideDown()을 실행

.queue() : 애니메이션이 chain으로 연속적으로 연결될 때, 애니메이션이 아닌 실행 함수를 큐에 저장 한다.(ex: class 속성 변경)

.dequeue() : queue에 쌓여있는 나머지 함수를 실행한다.

$("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 이동한다.

.clearQueue() : queue에 쌓인 것을 삭제한다. 현재 실행중인 queue는 계속 실행된다.   

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

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

});

5. Event

(1) event 제어

.bind() : event가 발생하면 실행될 함수를 지정한다. (이미 생성된 DOM에 대하여)

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

});

.unbind() : bind()를 해제한다.

.live() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 발생 가능)

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

});

.die() : live() 제거

.delegate() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 방지)

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

});

.undelegate() : delegate() 제거

.on() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (1.7 이후 버전)

$("#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에 넣어 함수 실행

}); 

.off() : on() 제거 (1.7 이후 버전)

.one() : bind() 함수처럼 선택된 이벤트를 지정한다. 하지만 딱 한번만 이벤트가 실행된다.

.trigger() : 선택된 요소의 이벤트를 발생시킨다.

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

.triggerHandler() : trigger() 함수와 비슷하게 동작한다.

- form submission에는 동작하지 않는다.

 - 선택된 요소들중 가장 첫번째 요소만 영향을 미친다.

- 브라우저 기본동작, 버블링, live Events는 일어나지 않는다.

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

});

(2) 웹 브라우져 Event

.load() : 문서가 불려졌을 때

.unload() : 문서가 닫혔을 때

.ready() : DOM이 모두 준비 되었을 때 함수 실행

$.holdReady() <jQuery.holdReady()> : DOM이 로드되는 것을 지연시켜준다. ; js 파일을 불러들이고 동작을 할때, js가 로드되지 않은 시점에 DOM이 로드 되는것을 방지해준다. / head 영역에 선언하는게 좋다.

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

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

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

});

.resize() : 창 크기가 변경되었을 때 함수 실행

.scroll() : HTML 문서가 스크롤 되었을 때

.error() : 선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생 오류 이벤트

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

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

});

(3) 마우스 Event

.click() : 마우스 클릭시

.dblclick() : 마우스 더블 클릭시

.mousedown() : 마우스 버튼을 누른 순간

.mouseup() : 마우스 버튼을 놓는 순간

.mouseover() : 대상에 마우스 커서가 위치했을 때

.mouseseenter() : 대상에 마우스가 위치했을 때

.mousemove() : 대상에서  마우스 커서가 움직였을 때

.mouseout() : 대상에서 마우스가 벗어 났을때

.mouseleave() : 대상에서 마우스가 벗어났을 때

.hover() : 마우스가 요소에 오버되었을때 첫번째 함수가 실행되고, 마우스가 요소를 떠날때 두번째 함수가 실행된다.

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

},

 function(){ 

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

});

(4) 키보드 Event

.keypress() : 키 입력 시 발생(enter, tabemd의 특수키 제외)

.keydown() : 키 입력을 누르고 있을 때, 모든 키에 대해 적용

.keyup() : 키 입력 후 발생

(5) form Event

.select() : 선택한 개체를  선택 했을 때

.change() : <input />, <textarea />, <select /> 요소의 값 변경시 실행

.focus() : 해당 요소에 포커스를 받았을 때 실행되는 함수

.focusin() : focus() 의 업그레이드(1.4)

.blur() : 해당 요소에 포커스를 잃었을 때 실행되는 함수

.focusout() : blur()의 업그레이드(1.4)

.submit() : submit이 일어날 때

(6) event 함수 option 처리

event.target : event를 발생시킨 Target

event.currentTarget  : event 버블링으로 현재 이벤트 발생되는 Target

event.relatedTarget : 해당 이벤트와 관련된 다른 DOM 요소 선택

event.result :해당 이벤트가 실행한 이벤트 핸들러 함수에 의해 리턴되는 가장 마지막 값

event.data : event 대상이 가지고 있는 값

event.namespace : 이벤트가 tirgger 됐을때, 발생한 이벤트의 namespace

event.pageX : 이벤트가 발생한 요소의 문서의 왼쪽부터의 위치

event.pageY : 이벤트가 발생한 요소의문서의 상단으로부터의 위치

event.timeStamp : event가 실행된 시간

event.type : 실행된 event 타입

event.which : 이벤트가 발생된 요소의 key (키보드 값<숫자>, 마우스 <왼쪽 1, 중간 2, 오른쪽 3>)

event.preventDefault() : 해당 요소에 걸려있는 다른 이벤트를 무력화 한다. 

event.isDefaultPrevented() : event.preventDefault() 상태인지 체크 true / false

event.stopPropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다.(이벤트 버블링)

event.stopImmediatePropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다. (이벤트 버블링)

event.isPropagationStopped() : event.stopPropagation()이 호출 됐는지 여부 리턴 true / false

event.isImmediatePropagationStopped() : event.stopImmediatePropagation()이 호출됐는지 여부 리턴 true /false 

6. Ajax

$.param() <jQuery.param()> : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다.

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"

.serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다.

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

.serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록  배열로 직렬화 한다.

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

$.ajax() <jQuery.ajax()> : ajax 비동기 호출 전송

         $.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 실행 후 최종적으로 실행

                  }

            });

.ajaxSend()  : ajax 요청이 서버로 보내지기전에 호출됨

.ajaxStart()  : ajax 요청이 서버로보내진 직후에 호출됨.

.ajaxStop()  : 응답을 서버로부터 받은 직후에 호출됨.

.ajaxSuccess() : 요청이 성공적으로 완료된 후에 호출됨.

.ajaxError()  : ajax 실행 후 에러 발생시 함수 실행 / $.ajax() 옵션의 error와 동일.

.ajaxComplete() : ajax 실행 후 최종적으로 함수 실행 / $.ajax() 옵션의 complete 와 동일.

$.ajaxPrefilter() <jQuery.ajaxPrefilter()>  : ajax 요청을 보내기 전에 Ajax 옵션들을 수정하거나 조작한다.

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

}); 

$.ajaxSetup() <jQuery.ajaxSetup()> : 앞으로 발생할 ajax 요청에 대한 디폴트 값을 설정한다.

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

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

                      url : "test_ajax.txt",

                      success:function(result){

          })

});

$.get() <jQuery.get()> : get 방식으로 ajax 통신을 한다. 서버에서 가져온다.

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

$.getJSON() <jQuery.getJSON()> : $.get()과 동일하나, 데이터 타입은 json 타입이다.

$.getScript() <jQuery.getScript()> : $.get()과 동일하나, 데이터 타입은 script, 동적으로 자바스크립트를 불러온다.

                            

$.post() <jQuery.post()> : post 방식으로 ajax 통신을 한다. 서버와 파라미터로 데이터를 주고받는다.

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

           {  //   name과 message 파라미터 

                    name: "myeonghyeon",

                    message : "hi"

           },

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

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

.promise() : 비동기함수(Ajax)가 리턴한 객체를 가진다.

.promise().done(); : 선택된 비동기함수 리턴 객체의 콜백이 성공, done 함수 실행

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

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

});

.promise().fail();  : 선택된 비동기함수 리턴 객체의 콜백이 실패, fail 함수 실행

.promise().then();  : 콜백이 성공하면(success) 리턴데이터를 then의 인자가 받아서 실행

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

$.when() <jQuery.when()> : 인자의 함수의 콜백 후 리턴값을 반환한다.

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

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

});

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

});

$.deferred() <jQuery.deferred()>  : $.ajax가 반환하는 객체, pomise 객체와 같은 일을 할 수 있으며 추가적인 콜백 함수를 가진다.

deferred.always()  : 요청이 성공, 실패에 무관하게 항상 실행된다.

deferred.done() : 요청이 성공시 실행된다.

deferred.fail() : 요청이 실패시 실행된다.

deferred.isRejected() : 요청이 실패됐는지 확인한다.

deferred.isResolved() : 요청이 성공했는지 확인한다.

deferred.pipe() : 요청의 return 값을 인자로 넘겨준다.

deferred.promise() : 요청의 콜백을 객체로 가지고 있는다.

deferred.reject() : 요청이 실패시 fail() 함수를 호출한다.

deferred.resolve() : 요청이 성공시 done() 함수를 호출한다.

deferred.then() : 두개의 인자를 가지고 두개 모두 성공할 때 resolve(), 하나라도 실패하면 reject() 실행

출처: https://devbox.tistory.com/entry/jQuery-jQuery-Quick-API?category=578062 [장인개발자를 꿈꾸는 :: 기록하는 공간]