D48일 JQUERY
20241202 D48
01_jQuery
- 자바스크립트 언어만으로 구현하기에 복잡했던 구문들을 간소화 하기 위해 개발된
자바스크립트 기반의 라이브러리- 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발할 수 있다.
- DOM요소와 관련된 스크립트를 쉽게 구현해 놨으며, AJAX(비동기 통신), 이벤트처리,
확장 플러그인 및 오픈 API등 각종 편의성 기능을 제공한다.jQuery 라이브러리 적용 방법
- jquery라이브러리 다운로드 (압축버전) <script src="js/jquery-3.7.1.min.js"></script> - CDN Content Delivery Network 상에서 직접 다운로드 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> // jquery함수 // 페이지 로딩이 완료된 후 실행할 함수를 정의 $(document).ready(function(){ console.log('hello jquery') }); jQuery(document).ready(function(){ console.log('heelo jq'); }); // ready 함수와 같은 역할(교육중에 주로 사용하게 될 방법) 가장 짧다 ㅎ $(function(){ console.log('hello jq3') }); // onload : 페이지가 로딩이 완료되면 자동으로 실행하는 함수 window.onload = function(){ console.log('window onload'); } </script>
02_Selector
//html:5 문서 형식에서 <head></head> 에 jQuery를 연결해서 사용 <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script> // 웹페이지에서 연결하기 // method chaining 이 가능하다 $("#bar1").css("font-size","3em") .css("background","deeppink") .css("color","white"); //다음과 같이 css속성을 체인닝으로 변경이 가능 //jquery 방식 이벤트 부여 $("[name=menu]").change(function(e){ // 현재객체의 속성중 checked속성에 저장된 값을 //console.log($(this).prop("checked")); //getter // console.log($(this).prop("checked" , false)); // setter //console.log($(this).val()); // getter // console.log($(this).val("ㅋㅋㅋ")); // setter }); $("#checkValue").click(function(){ // jquery방식 객체 순회 $("[name=menu]").each(function(index, elem){ // elem == HTMLInputElement console.log(index, elem); // elem은 javascript객체이므로 jquery함수 사용불가 //elem.prop("checked", false); $(elem).prop("checked", false); console.log(elem.value , $(elem).val()); }) }); </script>attr (atrribute)
- "html태그상에 기록된 속성"을 가져오거나 설정할 경우 사용
- attr은 html에 기록된 속성을 가져오는 함수
<script> $("img").click(function(){ console.log($(this).attr("src") , $(this).attr("style"), $(this).attr("height")); console.dir(this); console.log($(this).prop("src") , $(this).prop("height")); // js의 property에 접근 $(this).attr("src","../resources/image/flower2.jpg"); }); </script> // :not(selector) -> js에서도 사용가능 function test6(){ $(".wrapper p:not(:first-child)").css("color","green"); } // :has(selector) function test5(){ $(".wrapper p:has(a)").css("background-color","lightgray");} // p태그들중 a태그를 가지고 있는 요소 선택 // :contains(문자열) : 특정 문자열을가진 태그요소 조회 function test4(){ $(".wrapper p:contains('안녕8')") .css("text-decoration","line-through"); } // :gt, :lt(index) function test3(){ $(".wrapper p:gt(3)").css({ "font-size" : "3em", "color" : "blue" }); $(".wrapper p:lt(3)").css({ "font-size" : "3em", "color":"pink" }) } //:eq(index) function test2(){ // $(".wrapper p:eq(3)").css("font-size","3em") // .css("color","blue"); $(".wrapper p:nth-of-type(4)").css("font-size","3em") .css("color","blue"); }
03_Filter.html
<input type="button" value="filter" onclick="test1()"> <input type="button" value="first | last | eq | not" onclick="test2()"> <div class="wrapper"> <p class="test">안녕1</p> <p class="test">안녕2</p> <p class="test">안녕3</p> <p class="test">안녕4</p> <p class="test">안녕5</p> <p class="test">안녕6</p> <p class="test">안녕7</p> <p>안녕8</p> <p>안녕9</p> <p>안녕10</p> </div> <script> function test1(){ var $p = $(".wrapper > p"); // filter(선택자) var filteredP = $p.filter(".test"); console.log(filteredP); var evenP = $p.filter(":even"); // 인덱스 기준 짝수 console.log(evenP);// :odd 홀수 인덱스만 반환 // filter함수를 통해 p태그안의 내용중 안녕을 제외한 숫자가 짝수인 경우 css변경 $p.filter(function(index, p){ // 1. p태그 안의 문자열 가져오기 var text = p.innerText; // innerHTML, textContent console.log(text); // 2. 문자열에서 숫자만 뽑아오기 /[^0-9]/g var num = text.replace(/[가-힣]/g,""); // 안녕1 -> 1 console.log(num); // 3. 짝수인 경우 true가 오도록 조건 설정. return num % 2 === 0; }) .css("color","deeppink"); } function test2(){ var $p = $(".wrapper p"); console.log($p.first()); // jquery의 첫 번째 객체 리턴 console.log($p[0]); // javascript의 첫 번째 요소 //$p.last() //$p.eq(5) $p.not(".test") .css("font-size","3em") .css("color",'springgreen'); } </script>
04_Traversing(객체순회,탐색)
//filtering메서드 //선택자로 지정한 객체를 기준으로 객체 그룹에서 위치를 가지고 객체를 선택하는 매서드 $(‘요소 명’).first() //선택된 요소 중 제일 처음 있는 요소 리턴 $(‘요소 명’).last() //선택된 요소 중 제일 마지막에 있는 요소 리턴 $(‘요소 명’).eq(숫자) //인덱스번호와 일치하는 요소 리턴(0부터 시작) $(‘요소 명‘).filter(‘검색식|선택자’) //인자값과 일치하는 요소 리턴 $(‘요소 명‘).not() //선택된 요소와 일치하지 않는 요소 리턴 //Ancestors메소드 (조상순회) //선택된 요소의 상위 요소들을 선택할 수 있는 메소드 $(‘요소 명‘).parent() //선택된 요소의 바로 위 상위 요소 리턴 $(‘요소 명’).parents([인자]) //선택된 요소의 모든 상위 요소 리턴, //매개변수가 있으면 매개변수와 일치하는 부모만 리턴 $(‘요소 명‘).parentsUntil([인자]) //선택된 요소부터 인자 요소까지 범위의 요소 리턴 //Descendants메소드 (자식순회) //선택된 요소의 하위 요소들을 선택할 수 있는 메소드 $(‘요소 명‘).children([인자]) //선택된 요소의 모든 자손(다음 레벨) 객체 리턴 //선택된 요소의 인자와 일치하는 자손 객체 리턴 $(‘요소 명‘).find(인자) //선택된요소의 인자와 일치하는 모든 후손(모든 레벨) 객체 리턴 //Sideways메소드 (동위레벨) //같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드 $(‘요소 명‘).siblings([인자]) //선택된 요소와 같은 레벨(형제)에 있는 요소 리턴 //선택된 요소와 같은 레벨 중 인자와 일치하는 요소 리턴 $(‘요소 명‘).next() //선택된요소의 같은 레벨 중 선택된 요소 다음 한개 요소 리턴 $(‘요소 명‘).nextAll() //선택된요소와 같은 레벨 중 선택된 요소 다음 모든요소 리턴 $(‘요소 명‘).nextUntil(인자) //선택된요소의 같은 레벨 중 인자까지의 모든 요소 리턴 $(‘요소 명‘).prev() //선택된 요소와 같은 레벨 중 선택된 요소 이전의 한 개요소 리턴 $(‘요소 명‘).prevAll() //선택된 요소와 같은 레벨 중 선택된 요소 이전의 모든요소 리턴 $(‘요소 명’).prevUntil(인자) //선택된 요소의 같은 레벨 중 선택된 요소 이전의 모든요소 리턴 //요소가 있는지 찾는 메소드 //선택자로 지정된 범위에 특정한 요소가 존재하는지 찾을 때 사용 $(‘요소 명‘).is(인자) //선택된 요소의 범위 내에 인자와 동일한 요소가 //있는지 찾아서 있으면 true, 없으면 false 리턴
05_Event
event 객체 속성 값
- currentTarget : 이벤트 발생한 bubbling범위 내 이벤트핸들러의 this와 같은 값을 가짐
- data : 이벤트 핸들러로부터 받아오는 값
- delegateTarget : 현재 호출된 이벤트핸들러에 연결된 객체 리턴
- namespace : 사용자지정 이벤트명 리턴
- pageX : 왼쪽기준 마우스위치 리턴
- pageY : 위쪽기준 마우스위치 리턴
- relatedTarget : 마우스가 요소에 들어오거나 나오는 요소리턴
- result : 이벤트핸들러가 반환한 값을 보관
- target : 이벤트가 발생한 요소 리턴
- timestamp : 이벤트가 발생한 시간, 밀리세컨초로 리턴
- Type : 발생한 이벤트를 리턴
- Which : 키/마우스를 눌렀을 때 그 키의 정수 값 리턴
이벤트 객체 메서드
메소드 내용 event.isDefaultPrevented() preventDefault()가호출되었는지 확인 event.isImmediatePropagationStopped() stopImmediatePropadation()이 호출되었는지확인 event.isPropagationStopped() stopPropagation()호출됐는지 확인 event.preventDefault() 기본이벤트 발생 방지 event.isImmediatePropagation() 실행된 한 개 이벤트 제외하고 나머지는 동일한 이벤트 중단 event.stopPropagation() bubbling을 막는 메소드 event 연결 메서드
- 요소 객체에 이벤트 발생 시 연결된 이벤트 핸들러 지정하는 메서드
1). bind(), on()
- $(‘s’).bind(‘이벤트명 [이벤트명]’,function( ){ })
: 지정 이벤트에 이벤트 핸들러 지정 (다수 이벤트 지정 시 띄어쓰기로 구분)- $(‘s’).bind(‘이벤트명 [이벤트명]’,{ 객체},function(){})
: 이벤트처리 객체를 인자로 넣어서 처리(event객체 data에 들어감)- $(‘s’).on(‘이벤트명[,이벤트명],’function( ){ })
: 지정 이벤트에 이벤트 핸들러 지정- $(‘s’).on(‘이벤트명 [이벤트명]’,{ 객체},function(){}
: 이벤트처리 객체를 인자로 넣어서 처리 (event객체 data에 들어감)- $(‘s’).on(‘이벤트’, ’선택자’,function(){})
선택된 요소 중 새로 동적으로 생성되는 선택자에 이벤트를 적용 동적적용(bind메소드는 3.0버전부터 사용하지 않으니 on메소드 사용 권고)
2). one() : 이벤트 연결시 한번만 실행하는 메서드
- $(‘s’).one(‘이벤트명 [이벤트명]’,‘핸들러’)
: 핸들러에 있는 기능을 한 번만 실행 이벤트 명을 다수로 설정하면 각 이벤트 별 한 번씩만 실행3). off() : on()메서드로 지정된 이벤트 헨들러 제거 메서드
- $(‘s’).off(“이벤트명 [이벤트명]”,[“선택자”]);
: 선택자에 이벤트명이 있는 이벤트제거- (‘s’).off(event);
: 이벤트핸들러에 인자로 event를 받아 event객체를 기준으로 이벤트삭제on -> addEventListener(), off-> removeEventListener()
4). 간단한 연결 이벤트
- $(‘s’).method(function(event){});
메소드 내용 메소드 내용 blur 요소가 focus해제시 scroll 스크롤을 움직일 때 focus 요소가 focus받을 때 click 클릭했을때 focusin 요소, child가 focus받을 때 dbclick 더블 클릭 했을 때 focusout 요소,child가 focus해제 시 mousedown 마우스 왼쪽 버튼 누를 때 resize 윈도우 크기 변경 시 mouseup 마우스 왼쪽 버튼 뗄 때 mouseover 마우스가 요소에 있을 때 mousemove 마우스가 요소, child에서 움직일 때 mouseout 마우스가 요소,child에서 나갈 때 mouseenter 마우스가 요소에 들어올 때 mouseleave 마우스가 요소에서 나갈 때 change 요소의 값이 변경 되었을 때 select 텍스트가 선택 됐을 때(textarea,filed) submit form이 전송 되었을 때 keydown 키를 눌렀을 때 keypress 키를 눌렀을 때(alt, ctrl, shift, esc인식X)
- mouserenter와 leave는 자식요소까지 이벤트가 버블링되지 않는다.
5) hover()
- mouseenter, mouseleave 이벤트를 동시에 연결
- 한 개의 이벤트 핸들러가 설정, 두 이벤트 모두 작동
- 이벤트 발생 객체는 함수에서 this로 호출 가능
$(‘s’).hover(‘function(){}, function(){}’); * 첫 번째 함수가 mouseenter에서 작동, 두 번째 함수가 mouseleave에서 작동6) trigger()
- 특정 이벤트나 기본 이벤트를 강제로 발생시키는 메소드
- 사용자 정의 이벤트 발생 시 사용
- 이벤트 발생 시 인자 값 전달 가능
$(‘s’).trigger(‘이벤트명’[, ‘전달 값‘, ‘전달 값‘, …]);이벤트 함수와 사용되는 여러 태그, 함수
1) var value = $textarea.val(); // &태그명,val(); -> 태그안의 작성내용 2) var $counter = $("#counter"); $counter.text(len); //text == innerText 같은의미
06_DOM
요소 생성 및 제거
1).동적으로 요소 생성
<script> $("#btn").click(function(){ // p 태그 동적 생성하기 // 1. 문자열로 요소 생성하기 var el1 = "<p>Create Element By Text</p>"; // 2. DOM메소드로 생성하기(crateElement, createTextNode) var el2 = document.createElement("p"); var text = document.createTextNode("Create Element By Dom"); el2.appendChild(text); // 3. jquery방식으로 만들기 var el3 = $("<p></p>").text("Create Element By jQuery"); console.log(el1, el2, el3); $("#area1").append(el1, el2, el3); }); </script>2). 삽입 관련 메서드
- 선택 된 요소를 기준으로 새로이 생성된 요소를 추가하는 메소드
: $(A).append(B, ...) : A요소 내에 가장 마지막에 B를 추가
: $(A).prepend(B) : A요소 내에 가장 앞에 b를 추가
: $(A).before(B) : A요소 앞부분에 동위레벨로 B를 추가
: $(A).after(B) : A요소 뒷부분에 동위레벨로 B를 추가- 새롭게 생성된 요소를 기준으로 특정 위치에 요소를 추가하는 메소드
: $(B).appendTo(A) : B요소를 A요소 내에 가장 마지막에 추가
: $(B).prependTo(A) : B요소를 A요소 내에 가장 앞부분에 추가
: $(B).insertBefore(A) : B를 A요소 앞에 추가
: $(B).insertAfter(A) : B를 A요소 뒤에 추가<h1 id="test1"><span>A</span></h1> <h1 id="test2"><span>A</span></h1> <h1 id="test3"><span>A</span></h1> <h1 id="test4"><span>A</span></h1> <script> $(function(){ //part1 // $("#test1").append("<span class='added'>B</span>"); // $("#test2").prepend("<span class='added'>B</span>"); // $("#test3").before("<span class='added'>B</span>"); // $("#test4").after("<span class='added'>B</span>"); //part2 $("<span class='added'>B</span>").appendTo("#test1"); $("<span class='added'>B</span>").prependTo("#test2"); $("<span class='added'>B</span>").insertBefore("#test3"); $("<span class='added'>B</span>").insertAfter("#test4"); }); </script>3). 요소 객체 "복제" 메소드
- $("선택자").clone(true/false) : 선택된 요소를 복제해서 반환해주는 메소드
- 매개변수(true/false) : 선택된 요소에 바인딩된 이벤트까지 복사할건지 여부(기본값 false)
<button id="clone">복제</button> <div id="clone-test"> <!-- 복제할 요소--> <div id="item1" class="item"><span>안녕</span></div> </div> <div id="clone-result"></div> <script> $(function(){ $(".item").hover(function(){ $(this).addClass("lime"); }, function(){ $(this).removeClass("lime"); }); // 복제버튼 클릭시 요소를 복사하여 clone-result에 추가 $("#clone").click(function(){ $("#item1").clone(true).appendTo("#clone-result"); }); }); </script>요소 객체 제거 및 잘라내기 메서드
- $("선택자").empty() : 선택된 요소의 모든 하위 요소를 제거하는 메소드
- $("선택자").remove() / .detach() : 선택된 요소를 제거 후 제거된 요소를 반환
- remove() : 잘라내기시 잘라낸 요소의 이벤트는 가져오지 않는다.
- detach() : 잘라내기시 잘라낸 요소의 이벤트도 가져온다.
<button id="empty">empty</button> <button id="remove">remove</button> <button id="detach">detach</button> <div id="remove-test" style="border : 3px solid red; width : 110px; height:110px;"> <div id="item2" class="item"><span>안녕</span></div> </div> <div id="remove-result" style="border : 3px solid blue; width: 110px; height: 110px;"> </div> <script> $(function(){ $("#empty").click(function(){ //$("#remove-test").empty(); $("#remove-test").html(""); }); $("#remove").click(function(){ var el = $("#item2").remove(); $("#remove-result").append(el); }); $("#detach").click(function(){ //var el = $("#item2").detach(); //el.appendTo("#remove-result"); $("#item2").appendTo("#remove-result"); }); }); </script> <div id="test" class="item"> <button class="copy">복제</button> <button class="delete">삭제</button> </div> <div id="result"></div> <script> /* 응용문제 1 복제 버튼 클릭시 현재 버튼의 부모 div를 복제하여 #result에 붙여넣기 삭제 버튼 클릭시 현재 버튼의 부모 div를 삭제시키기 */ $(".copy").click(function(){ $(this).parent().clone(true).appendTo("#result"); }); $(".delete").click(function(){ $(this).parent().remove(); }); </script>
07_JQ-Methods
1) each 메서드
- "배열[]"의 모든 인덱스에 순차적으로 접근하고자 할때 사용
- "객체{}"가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 사용
[표현법] 1) $.each(객체/배열 , function(index/propertyname , item){ //실행할 코드 }) 2) $(배열).each(function(index, item){ //실행할 코드 })<div id="area1"></div> <script> $(function(){ // 배열 var arr = ["M",'K','M']; // $.each $.each(arr , function(index , value){ console.log('인덱스 : ', index , '값 : ', value); }); // javascript forEach arr.forEach(function(value, index){ console.log('인덱스 : ', index , '값 : ', value); }); // 객체/배열.each메소드 $(arr).each(function(index, value){ console.log('인덱스 : ', index , '값 : ', value); }); // 객체를 반복 시키는 경우.. var student = { name : '임세윤', age : 27, status : '아픔' }; // $.each 사용 $.each( student, function( key , value ){ console.log("속성명 : ", key, "속성값 : ", value); }); // 객체배열 사용 var links = [ {name : "네이버" , link : "https://naver.com"}, {name : '구글' , link : "https://google.com"}, {name : '다음' , link : "https://daum.net"} ]; $(links).each(function(index, value){ // "" , '', `` $("#area1").html($("#area1").html()+`<br><a href='${value["link"]}'>${value.name}</a>`); }) }); </script>2). is method
- $("선택자").is("선택자")
: 선택된 요소가 내가 전달한 선택자와 일치하는지 판단 한 후 그에 해당하는 논리값을 반환<h3 class="test">test1</h3> <h3>test2</h3> <h3 class="test">test3</h3> <h3 class="test">test4</h3> <h3>test5</h3> <h3 class="test">test6</h3> <script> $(function(){ $("h3").each(function(){ // 현재 선택된 h3요소에 class명으로 test가 존재하는 경우 // 배경색을 변경 if( $(this).is(".test") ){ $(this).css("background-color","orange"); }else { $(this).css("background-color",'purple'); } }) }); </script>
08_Css(Effect-시각적인 효과 메서드)
- 페이지 내에 애니메이션 효과를 만들기 위해 사용되는 메소드 집합
$(‘s’).메소드 명(); $(‘s’).메소드 명([speed, easing, callback]); // speed : 실행 속도(밀리세컨 초) / 숫자 or slow, fast // easing : 변경되는 지점 별 속도 / linear, swing 가능 // callback : 메소드 실행 후 실행할 함수 //show/hide() show() //선택된 요소를 보여주는 메소드 hide() //선택된 요소를 숨겨주는 메소드 toggle() //show, hide를 동시에 적용하는 메소드 $(‘s’).show / hide / toggle([시간], [구간 별 속도], [callback]); //속도 설정하지 않으면 서서히 변화하지 않음 <button id="hide">숨기기</button> <button id="show">보여주기</button> <button id="toggle">토글</button> <br><br> <img src="../resources/image/bono.jpg" id="bono"> <script> $(function(){ $("#hide").click(function(){ $("#bono").hide(1000); }); $("#show").click(function(){ $("#bono").show(1000); }); // toggle()은 on/off기능 $("#toggle").click(function(){ $("#bono").toggle(500); }) }) </script> //slide() slideDown() //선택된 요소 위치에서 내려가 요소를 보여주는 효과 //(hidden속성을 주고 실행) slideUp() //선택된 요소를 밀고 올라가 숨겨주는 효과 slideToggle() //slideDown, slideUp를 동시에 적용하는 메소드 $(‘s’).slideDown/ slideUp/ slideToggle([시간], [구간 별 속도], [callback]); //속도 설정하지 않으면 서서히 변화하지 않음 <div>Q. 반품이 가능한가요?</div> <p>A. 아뇨 불가능합니다.</p> <div>Q. 상품 위치가 어디인가요?</div> <p>A. 배송 조회를 해보세요 ^^</p> <div>Q. 이 상품은 사이즈가 몇 까지 있나요?</div> <p>A. Free사이즈 입니다</p> <div>Q. 전화 통화 가능한 시간을 알려주세요.</div> <p>A. 카톡 플러스 친구를 통해 문의해주세요.</p> <script> $(function(){ $("div").click(function(){ // 클릭이벤트가 발생한 div요소의 바로 다음에 있는 요소 선택 var $p = $(this).next(); if($p.css("display") == "none"){ //$p.show(1000); $p.siblings("p").slideUp(); $p.slideDown(1000); }else{ //$p.hide(1000); $p.slideUp(1000); } //console.log($p.text()); }); }); </script> //fade() fadeIn() //점점 진하게 변하면서 보이는 효과 fadeOut() //점점 희미하게 변하면서 사라지는 효과 fadeTo() //설정한 값까지 희미해지는 효과 (opacity값으로 투명도 설정) fadeToggle() : fadeIn, fadeOut을 동시에 적용하는 메소드 $(‘s’).fadeIn/ fadeOut/ fadeToggle([속도], [구간 별 속도], [callback]); //속도 설정하지 않으면 서서히 변화하지 않음 $(‘s’).fadeTo([시간], [투명도], [구간 별 속도], [callback]); <button id="fadeout">숨기기</button> <button id="fadeIn">보여주기</button> <button id="fadeToggle">토글</button> <img src="../resources/image/peng.jpg" id="peng"> <script> $(function(){ $("#fadeout").click(function(){ $("#peng").fadeOut(2000); // opacity의 값이 0이 되는 순간 크기를 0으로만듬; }); $("#fadeIn").click(function(){ $("#peng").fadeIn(2000); }); }) </script> //기타 메서드 ‘s’).clearQueue([큐명칭]) queue에 있는 함수를 제거하는 메소드, 인자가 있으 면 인자와 동일한 함수 제거, default인자 : fx 시작된 함수가 있으면 완료 후 함수제거 $(‘s’).delay([시간],[큐명칭])선택된 요소의 기능 수행을 시간만큼 연기하고 실행 $(‘s’).dequeue()큐에 있는 다음 함수를 지우고 함수 실행 $(‘s’).finish() 현재 실행중인 애니메이션을 중단하고 큐에 있는 모든 애니메이션을 지우면서 실행을 한번에 완료하는 메소드 $(‘s’).queue([큐명칭],[함수]) 선택된 요소의 fx큐에 들어가 있는 함수들 리턴 dequeue() 메소드와 함께 콜백 함수 사용 후 큐에 있는 다음 함수 실행 가능 $(‘s’).stop([true|false][true|false]) 인자 X: 현재 실행 중인 애니메이션 정지 후 다음 실행 true : 현재 실행 중과 모든 애니메이션 중단 true, true : 현재 실행중인 애니메이션 정지후 완료 // animate() 현재의 CSS속성을 설정한 값으로 차츰 변경되는 효과를 주는 메소드 $(‘s’).animate({CSS속성설정}[, 시간][, linear | swing][, 함수]); * CSS속성 : 객체로 지정, 속성 명:속성 값 (속성 명은 ‘-’ 없이 사용) 시간 : 정수(ms), slow, fast / default 400ms 구간 별 속도 : linear, swing 사용, 플러그인 추가 시 추가적인 것 사용 가능 함수 : 애니메이션 종료 후 실행할 함수 설정 // animate() 옵션 duration종료까지의 시간 / 애니메이션 속도설정 easing구간별 속도 설정 complete애니메이션 종료 후 실행함수 설정 step지정한 단계별 실행되는 함수 설정 progress단계별 종료 후 실행되는 함수 설정 queue effectsqueue에 애니메이션이 있는지 확인 true 순차적으로 실행 / false면 즉각 실행 specialEasing스타일에서 설정한 속성에 대해 구간속도를 지정 start애니메이션이 시작될 때 실행될 함수지정 done애니메이션이 끝났을 때 실행될 함수 지정 fail애니메이션이 제대로 실행되지않았을 때 실행될 함수지정 always애니메이션이 중단 되었을 때 실행될 함수 지정
