본문 바로가기

프로그래밍/JQuery

(6)
[JQuery 요약 정리] 5. 애니메이션 5. 애니메이션1) 기본 시각 효과- 메소드 종류 show() : 객체를 크게 확대하며 보여줌hide() : 객체를 작게 축소하며 사라지게 함toggle() : show()와 hide()를 번갈아가며 실행slideDown() : 객체를 슬라이드 효과와 함께 보여줌slideUp() : 객체를 슬라이드 효과와 함께 사라지게 함slideToggle() : slideDown()과 slideUp() 메소드를 번갈아가며 실행fadeIn() : 객체를 선명하게 보여줌fadeout() : 객체를 흐리며 사라지게 함fadeToggle() : fadinIn()과 fadeOut() 메소드를 번갈아 실행- 사용 양식$('선택자').메소드();$('선택자').메소드(speed);$('선택자').메소드(speed, callbac..
[JQuery 요약 정리] 4. 이벤트 처리 4. 이벤트 처리1) on() 메소드- 이벤트를 연결하는 메소드- 형태$('선택자').on('이벤트명', function(event){이벤트 내용}) $('선택자').on({이벤트명1:이벤트함수1, 이벤트명2:이벤트함수2}) - 예시$('#btn1').on('click', function(){alert('클릭이벤트');}); -> btn1에 클릭 이벤트 연결* 이벤트 함수 내 return false; 추가시 상위 태그로의 이벤트 연결을 막을 수 있음 2) 한가지 이벤트를 바로 연결- 형태 $('선택자').이벤트명(function(event) {});- 이벤트의 종류blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, ..
[JQuery 요약 정리] 4. 객체 조작 4. 객체 조작1) addClass() 메소드- 객체의 클래스 속성 추가- 형태: $('선택자').addClass('클래스명'); 2) removeClass() 메소드- 객체의 클래스 속성 제거- 형태: $('선택자').removeClass('클래스명');* toggleClass() 메소드: 클래스 속성이 이미 지정되어있으면 제거하고 없으면 추가함 3) attr() 메소드- 속성과 관련된 모든 기능 수행- 형태$('선택자').attr('키값') -> 속성 반환$('선택자').attr('키값', '속성값') -> 키값의 속성값 변경$('선택자').attr({키값1:속성값1; 키값2:속성값2;...}) -> 여러 키값의 속성값 변경 4) removeAttr(name) 메소드- 객체의 속성 제거- 형태: $(..
[JQuery 요약 정리] 3. 객체 선택 3. 객체 선택1) filter() 메소드- 문서 객체를 필터링- 사용방법: 매개변수에 '선택자' 혹은 'function (index){return index;}의 형태로 사용- 사용 예시$('h1).filter(':even').css('color', 'red') -> h1 중 짝수 요소 빨간색으로 변경$('h1).filter(function (index){return index % 3 == 0;}).css('color', 'red')-> h1 중 3의 배수 요소를 빨간색으로 변경 2) end() 메소드- 문서 객체 선택을 한 단계 뒤로 돌림(ex. filter() 메소드의 선택 제거)- 메소드 체이닝을 통해 다양한 조건을 한꺼번에 입력할 시에 유용*메소드 체이닝: 여러가지 메소드를 연결해서 사용하는 것..
[JQuery 요약 정리] 2. 선택자(Selector) 2. 선택자(Selector)1) 전체 선택자 $('*')- 페이지에 있는 모든 객체를 선택 2) 태그 선택자 $('태그명')- 해당 태그를 선택 3) ID 선택자 $('#ID명')- 해당 ID를 선택 4) 클래스 선택자 $('.클래스명')- 해당 클래스를 선택 5) 자손 선택자 $('부모요소 > 자손요소')- 부모요소의 자손요소를 선택(인접 하위 요소)- 예시$('body > div') body의 하위에 위치한 div 태그만 선택 6) 후손 선택자 $('부모요소 후손요소')- 부모요소의 후손요소를 선택(모든 하위 요소)- 예시$('body > div') : body의 하위에 위치한 모든 div 태그 선택 7) 속성 선택자- 요소의 속성 조건에 맞는 요소를 선택- 기본형태: 요소[속성=값]- 예시$('i..
[JQuery 요약 정리] 1. JQuery 기본 1. JQuery 기본1) JQuery 개요- JQuery: 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리 2) 목적- 문서 객체 모델(Document Object Model)과 관련된 처리를 쉽게 구현- 일관된 이벤트 연결을 쉽게 구현- 시각적 효과를 쉽게 구현- Ajax 어플리케이션을 쉽게 개발 3) 사용 방법- 다운로드 후 스크립트 내에서 참조다운로드 URL: https://jquery.com/download/참조코드: - 웹을 통해서 참조(CDN 방식)참조 URL 받는 곳: https://code.jquery.com/ 4) 기본 형태- $('선택자').함수명(); 5) $(document).ready()- 문서가 준비되면 실행될 함수- 자바스크립트의 window.onload = fu..