728x90 jQuery 제이쿼리15 [헤더/푸터] 반복 코드 나누기 : header / footer 나누기 헤더와 푸터를 나눠두면, 여러 페이지에 동일한 네비게이션 등을 수정할 때 좋아요. #복사해서 쓰기 DOCTYPE html> jQuery로 반복 코드 나누기 $(function(){ $('#header').load("header.html"); $("#footer").load("footer"); }) 2021. 5. 20. 배열로 동적으로 문서 객체 생성 : $.each() // 자바스크립트 배열 관리 $(function () { // 변수 선언 var array = [ { name: 'Tistiory', link: 'https://www.tistory.com/' }, { name: 'Daum', link: 'https://daum.net/' }, { name: 'Naver', link: 'https://naver.com/' } ]; // $.each() 메서드 사용 $.each(array, function (index, item){ // index : 배열의 인덱스 or 객체의 키 // item : 해당 인덱스나 키가 가진 값 // 변수를 선언 var output = ''; // 문자열을 만듦 output += ''; output += ' ' + item.name + ''.. 2021. 5. 16. [애니메이션 정지] .clearQueue() .stop() .delay() $('div').click(function(){ $('div').click(function(){ $(this).clearQueue(); // 더블 클릭 등으로 대기열에 들어가는 animate를 막아줌 // 계속된 실행이 일어나지 않도록 하는 메서드. // 클릭되어 실행된 경우에는 animate 실행 대기를 일으키지 않도록 막아준다. $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' }, 2000); // 한꺼번에 실행되는 것이 아니라 // 차례차레 순서대로 실행된다 }); }); $('div').click(function(){ $('div').click(function(){ $(t.. 2021. 5. 14. [이벤트] .animate() : 사용자 정의 효과 $('div').click(function(){ $(this).animate({ width: 300 // 세미콜론 사용 X }); }); $('div').click(function(){ $(this).animate({ width: "+=100", height : "+=100" // 클릭할 때마다 클릭할 당시의 값에서 상대적으로 100px을 더하여 줌 }, 1500); // duration: 1.5초 }); 2021. 5. 13. 이전 1 2 3 4 다음 728x90
