Frontend/JQuery (11) 썸네일형 리스트형 응용 예제 : <canvas> 태그 도형이나 이미지 출력 예제 - 1 사각형 그리기 캔버스 지우기 이미지 출력 예제 - 2 : pose.html 포즈 인식 결과 확인 포즈 인식 결과를 이미지에 좌표로 표시 예제 - 2 : pose.js /** * pose.js */ // $(document).ready(function() {}); 축약형 $(function() { // [결과 확인] 버튼 클릭하면 서버에서 좌표 받아서 이미지 출력하는 drawCanvas() 함수 호출 : 좌표, 이미지, src 전달 $('#showBtn').on('click', () => { // 서버에서 응답 결과로 좌표 값 받았다고 가정 (JSON) var result = {"points": [{"x":0.42, "y":0.20}, {"x":0.49, "y":0... jQuery 효과 jQuery로 가능한 시각적 효과 Basic 효과 : hide() / show() / toggle() Sliding 효과 : slideDown() / slideUp() / slideToggle() Fading 효과 : fadein() / fadeOut() / fadeToggle() / fadeTo() Animate 효과 : animate(속성) 공통 인수 duration : 효과 진행 속도 (slow / normal / fast) callback : 효과 완료 후 수행할 함수 easing : 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑 swing : 사인곡선 (느리게 시작 -> 빠르게 진행 -> 느리게 종료) liner : 선형 (일정한 속도로 진행) Basic 효과 hide() .. DOM 요소의 클래스 속성 : CSS 효과 동적 적용 DOM 요소의 클래스 속성 : CSS 효과 동적 적용 CSS의 클래스 선택자에 적용된 여러 효과를 동적으로 추가하거나 제거 addClass('클래스명') // CSS 효과 적용 removeClass('클래스명') // 적용된 CSS 효과 제거(해제) toggleClass('클래스명') // addClass()와 removeClass()를 번갈아 가면서 실행 예제 이미지에 마우스를 올려보세요. toggleClass jQuery DOM 요소 조작 관련 메소드 jQuery DOM 요소 조작 동적으로 쉽고 간단하게 DOM 요소 조작 가능 DOM 요소 삽입 / 삭제 / 속성 추가 및 삭제 / 클래스 속성 DOM 요소 조작 관련 메소드 메소드 설명 text() 글자와 관련된 내용을 반환하거나 설정 html() HTML과 관련된 내용을 반환하거나 설정 $(선택자).append(A) 객체를 대상의 뒷부분에 추가 $(선택자).prepend(A) 객체를 대상 앞부분에 추가 $(A).appendTo(선택자) 객체를 대상의 뒷부분에 추가 $(A).prependTo(선택자) 객체를 대상의 앞부분에 추가 $(선택자).after(A) 선택자 뒤에 A 삽입 $(선택자).before(A) 선택자 앞에 A 삽입 $(A).insertAfter(선택자) A를 선택자의 뒤에 삽입 $(A).i.. jQuery DOM 요소 조작 이벤트 객체 메소드 preventDefault() : 현재 이벤트의 기본 동작 중지 stopPropagation() : 상위 element로 이벤트가 전파되는 것 중지 stopImmediatePropagation() : 현재 이벤트의 다른 리스너 중지 및 상위로 전파되는 것 중지 return false jQuery에서는 preventDefault() + stopPropagation() JavaScript에서는 preventDefault() 이벤트 전파 (Propagation) 자식 요소에서 발생한 이벤트가 부모 요소에까지 전파되는 것 이벤트 버블링이라고도 함 stopPropagation() : 상위 요소로 이벤트가 전파되는 것 중지 자식과 같이 body 작성 + 자식에 click 이벤트 적용한 경우, 자.. each() 메소드 사용 방법 each() 메소드 사용 방법 $(선택자).each(콜백함수 function(){}); $.each(배열, 콜백함수); $.each(객체, 콜백함수); 예제 : eachFunction.html a b c jQuery 이벤트 jQuery 이벤트 기존의 자바스크립트에서 사용했던 이벤트 대부분 사용 자바스크립트 보다 훨씬 간단하고 쉽게 이벤트 처리 가능 이벤트 사용 기본 구조 이벤트 대상 : $(‘#btn’) 이벤트 등록 메소드 (이벤트 유형) : click() / click 이벤트 핸들러 (이벤트처리 함수) : function() { … } 이벤트 등록 메소드 유형 (이벤트 적용 방법) 단독 이벤트 등록 메소드 한 동작에 대해 이벤트를 등록할 때 사용하는 메소드 선택자에 직접 이벤트 메소드를 적용하는 방법 동적 연결 지원 안 됨 $('선택자').이벤트유형(실행함수) $('#btn').click(function(){ }); 그룹 이벤트 등록 메소드 (여러 이벤트 적용) 한 번에 여러 개의 이벤트 등록 가능 선택자에 on() 메소.. hover() 메소드 hover() 메소드 선택한 요소에 마우스 포인터가 올라갔을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 효과 적용하는 함수 첫 번째 매개변수 : 마우스 올렸을 때 실행되는 함수 두 번째 매개변수 : 마우스 땠을 때 실행되는 함수 $(this).hover( function() { // 마우스 올렸을 때 실행되는 함수}, function() { // 마우스 뗐을 때 실행되는 함수} ); 예제 인덱스 : index jQuery 변수 jQuery 변수 변수명 앞에 $ 붙임 object로 jQuery 메소드 사용 가능 일반적으로 태그를 선택한 경우에는 객체로 $를 붙여서 사용 여러 개를 찾은 경우 배열로 저장 값을 가져오려는 경우에는 $를 붙이지 않고 사용해도 됨 값을 저장한 경우, 타입이 number 인 경우 length 사용 가능 var $변수명 = $(‘선택자’); var $변수명 = $(‘선택자’); var 변수명 = document.getElementById('#id'); // 자바스크립와 동일 var tds = document.getElementByTagName('td'); // 여러 개를 찾은 경우 배열로 저장 // 값을 가져온 경우 + 타입이 number -> $ 안 붙이고 사용 가능 + length 사용 가능 var d.. 이전 1 2 다음