Web/JQuery

쌍용 강북 교육센터 국비학원 Day 65일차 JQuery의 Datepicker Datepicker는 생년월일을 입력하는 등 날짜를 입력하는 input 태그에 텍스트로만 입력하지 않고 이벤트로 직관적인 달력을 띄워 날짜를 선택하는 코드로 jQuery에서 오픈소스로 제공하는 코드이다. 기본적으로 제공하는 것은 영어로 되어있지만 API 문서를 통해 옵션값을 설정하여 커스텀을 할 수 있다. (또한 함수를 이용해 날짜와 날짜사이의 기간을 지정할 수도 있다) 옵션값 설명 옵션값 값 설명 dateFormat 'yy-mm-dd' 와 같은 Date 형식 Input Display Format 변경 showOtherMonths boolean 빈 공간에 현재월의 앞뒤월의 날짜를 표시 showMonthAfterYear bool..

쌍용 강북 교육센터 국비학원 Day 56일차 $선택자1.find(선택자2) - 선택자1 안에 있는 선택자2를 가르키는 것이다. $.prev(); - 선택자의 바로 앞 형제태그 (엘리먼트)를 가르키는 것이다. $.children(); - 선택자의 자식(손자 X) 태그만을 가리키는 것이다. $.parent(); - 선택자의 부모요소 (부모태그)를 가르키는 것이다 $.siblings(); - 선택자의 형제요소 (형제태그) 중 선택자 (자기자신)을 제외한 나머지 모든 형제요소를 가르키는 것이다. $.prev(); - 선택자의 바로 앞의 형제요소를 가리키는 것이다. $.next(); - 선택자의 바로 뒤의 형제요소를 가리키는 것이다. $.fadeIn , fadeOut (second); - 선택자에 해당되는 내용물..

쌍용 강북 교육센터 국비학원 Day 55일차 Tabs 자주 사용하는 tab 메뉴 구현하기 탭 메뉴를 클릭하면 버튼이 활성화 되어 해당 탭 메뉴 내용이 나타나게 한다. addClass() 메소드와 removeClass() 메소드, :eq 메소드를 사용해 구현하였다. 탭 구현의 예 - https://jqueryui.com/tabs/ ※ .eq() 또는 :eq() 메소드 - 선택한 요소의 인덱스 번호에 해당하는 요소를 찾는다. 같은 부모의 자식중에서 '숫자'번째 에게 접근한다. .index()는 숫자만 반환하는 것에 비해 .eq()는 요소를 반환하기 때문에 요소의 컨트롤에 매우 유용하다. Storage 스토리지는 로컬 스토리지 (localStorage) 와 세션 스토리지 (sessionStorage) 가 존재..

쌍용 강북 교육센터 국비학원 Day 54일차 JQuery 주요 메소드 $.bind() , $.on() bind(), on() 둘 다 이벤트(event) 처리기능을 하는 메소드이지만 약간의 차이가 있다. 선택자를 잡을때 선택자가 태그에 직접 기술한 것이라면 선택자를 제대로 잡을수가 있으나 스크립트내에서 기술한 것이라면 선택자를 못 잡아올수도 있다. 이러한 경우 $(document).on() 메소드를 사용해야 한다. (jQuery에서는 on 메소드를 사용하는 것을 권장하고 있다.) $(document).on( "이벤트종류", "선택자", function( ){ } ); [문법] $.on ( events , selector , data , function( ) ); 1 2 3 4 (selector와 data는..

쌍용 강북 교육센터 국비학원 Day 53일차 JQuery 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다. 웹페이지 상에서 요소(Element) 를 쉽게 찾고 조작할 수 있으며 네트워크, 애니메이션 등 다양한 기능을 제공하고 있다. 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어나고 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원한다. 관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있다. 공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근이 가능하다. JQuery 적용 첫 번째 방법은 API를 직접 다운받아 사용하는 방법으로 파일은 c..