메뉴 건너뛰기

2016.09.13 18:39

jQuery Quick API

조회 수 6933 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

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() 실행


  1. jquery 팝업 차단 없이 띄우기

    Date2019.03.05 Views2855
    Read More
  2. [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

    Date2019.03.05 Views1129
    Read More
  3. jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값)

    Date2019.01.16 Views1079
    Read More
  4. jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경)

    Date2019.01.16 Views1502
    Read More
  5. jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

    Date2019.01.16 Views1261
    Read More
  6. jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입)

    Date2019.01.16 Views1181
    Read More
  7. jQuery 기초 (JQuery - text(), val(), html(), attr(), prop())

    Date2019.01.16 Views1054
    Read More
  8. jQuery 기초 (attr()로 두가지 동시에 접근 / 변경)

    Date2019.01.16 Views1119
    Read More
  9. jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery)

    Date2019.01.16 Views1409
    Read More
  10. jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty)

    Date2019.01.16 Views1084
    Read More
  11. jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json))

    Date2019.01.16 Views3222
    Read More
  12. Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

    Date2019.01.16 Views2191
    Read More
  13. jQuery 기초 (jQuery 달력 (datepicker))

    Date2019.01.16 Views1321
    Read More
  14. jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼)

    Date2019.01.16 Views1349
    Read More
  15. .removeAttr() : 특정 속성을 제거

    Date2019.01.16 Views1021
    Read More
  16. .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정

    Date2019.01.16 Views961
    Read More
  17. popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

    Date2019.01.16 Views1233
    Read More
  18. jQuery Plugin : Slider

    Date2019.01.10 Views1113
    Read More
  19. jQuery datepicker 팝업창 사이즈 바꾸기

    Date2019.01.10 Views1495
    Read More
  20. jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

    Date2019.01.10 Views1093
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved