본문 바로가기

Web & Mobile/jQuery6

Lecture 43 - jQuery(3) attr(), 문서객체제거 및 생성, before(), prepend(), append(), after(), on(), 토글기능, off(), 이벤트객체, trigger(), 이벤트전달, 마우스이벤트, 윈도우이벤트, infinity scroll, 입력양식 이벤트 jQuery jQueryEx01.ex21 - 문서 객체의 속성 검사, 추가, 제거 속성 내용 속성 추가 속성 삭제 속성 내용 속성 추가 속성 삭제 속성 내용 속성 추가 속성 삭제 data-index="200" 추가됨 jQueryEx01.ex22 - 문서 객체의 스타일 검사 내용 추가 출력 내용 추가를 누르면 위와 같이 "새롭게 변경된 내용"이라고 지정한 값으로 바뀐다. 내용 추가 출력 내용 html을 text로 바꾸면 위와 같이 text타입으로 들어가진다 jQueryEx01.ex23 - pg.66 그림 15-16처럼 출력 jQueryEx01.ex24 - 문서 객체 제거 제거 1 제거 2 Header - 0 Header - 1 Header - 2 remove() - 전체가 날아감 empty() - 내용만 .. 2023. 6. 20.
Lecture 41 - jQuery(2) 배열 관리, extend(), noConflict(), filter(), end(), eq(), add(), is(), find(), addClass(), removeClass(), toggleClass() jQueryEx01.ex09 - 배열 관리 제어문 없이 루프가 돈다 jQueryEx01.ex10 - 자바스크립트 배열 관리 item - 1 item - 2 item - 3 item - 4 item - 1 item - 2 item - 3 item - 4 item - 5 item - 1 item - 2 item - 3 item - 4 item - 5 jQueryEx01.ex12 - 객체 확장 jQueryEx01.ex13 - jQuery 충돌 방지 $를 사용하는데 다른 프레임워크에서도 사용하면 충돌이 일어나므로 $.noConflict()를 해준다. jQueryEx01.ex14 - filter 선택자 : CSS를 동시에 주고 싶을 때 Header-0 Header-1 Header-2 Header-3 Header-.. 2023. 6. 20.
Lecture 40 - jQuery(1) Eclipse에 jQuery세팅법, jQuery 기초 jQuery 세팅법 위 두 파일을 받는다 지핑 jQuery 라이브러리를 다운 받아 jquery-3.3.1.min.js의 소스를 확인하면 모든 코드가 들여쓰기 구분이 없는 것을 확인할 수 있고 이렇게 한 이유는 클라이언트에게 제공할 웹 페이지의 용량을 줄이기 위해 이와 같이 한다. min이 없는 것은 개발용이다 CDN 호스트를 사용하여 원격에서 불러와 사용할 수 있다. 다운 받은 jQuery 라이브러리를 위와 같이 추가한다 jQueryEx01.ex01 - $(document).ready() jQuery를 사용한 모든 웹 페이지는 위와 같은 코드로 시작 $(document).ready(function() {를 여러개 해도 되지만 한 개 만 있는 것이 효과적이다 $는 자바스크립트에서 식별자로 사용할 수 있는 .. 2023. 6. 20.
Lecture 79 - jQuery(6) jQuery를 이용한 게시판 jQueryBoardEx01.index 1 : 글쓴이 2018-09-01 제목 1 내용 1 수정 삭제 2 : 글쓴이 2018-09-02 제목 2 내용 2 수정 삭제 1 : 글쓴이 2018-09-01 제목 1 내용 1 수정 삭제 2 : 글쓴이 2018-09-02 제목 2 내용 2 수정 삭제 글쓰기 1 : 글쓴이 2018-09-01 제목 1 내용 1 수정 삭제 2 : 글쓴이 2018-09-02 제목 2 내용 2 수정 삭제 글쓰기 writeDialog를 추가 제 목 이 름 메 일 비밀 번호 본 문 1 : 글쓴이 2018-09-01 제목 1 내용 1 수정 삭제 2 : 글쓴이 2018-09-02 제목 2 내용 2 수정 삭제 글쓰기 제 목 이 름 메 일 비밀 번호 본 문 1 : 글쓴이 2018-09-01 제목 1 .. 2019. 7. 17.
Lecture 78 - jQuery(5) jQueryUI 사용법(2) jQueryUIEx02.datepicker01 Date: Date: Date: 위 소스를 chrome에서 확인해 보면 Date: Date: Date : jQueryUIEx02.datepicker02 Date: Format options: Default - mm/dd/yy ISO 8601 - yy-mm-dd Short - d M, y Medium - d MM, y Full - DD, d MM, yy With text - 'day' d 'of' MM 'in the year' yy Date: Format options: Default - mm/dd/yy ISO 8601 - yy-mm-dd Short - d M, y Medium - d MM, y Full - DD, d MM, yy With text - 'day.. 2019. 7. 16.
Lecture 77 - jQuery(4) jQueryUI 설치법 및 기초 사용법 //20180904 frontend engine(gui) - javascript -jQuery - jQueryUI - Bootstrap -> 발전 *ECMAScript 6 / 7 -> mvc - angular => pc / mobile -> jquery Mobile -> react -> vue * 데이터 시각화 D3 d3js.org backend engine - spring, MyBatis - 지속적으로 발전중 www.jqueryui.com pc - jquery ui mobile - jquery mobile (*) - egovframe getbootstrap.com 반응성웹(pc, mobile 동시 사용 가능) - startup에서 많이 사용(사이트에 사람이 많이 안몰리는 곳) http://jqueryu.. 2019. 7. 15.