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() 실행
이미지 클릭시 확대하기
