학원/JQuery - 학원 (8) 썸네일형 리스트형 제이쿼리 플러그인 - 제이쿼리를 모아놓았다고 볼 수 있음 - 관련 사이트 : htmldrive.net - 관련 사이트 : bestjquery.com 제이쿼리 플러그인 연동 제이쿼리 ui 플러그인 활용 jqueryui.com : 사용자 환경(ui) 개 발에 매우 유용한 메서드 제공 - 테마 - 갤러리 - 원하는거 찾아서 버전 1.12.1 확인하고 다운 - 압출풀기 - js폴더에 붙여넣기 - jquery-ui.js가 플러그인 bxSlider 플러그인 활용 - 파일을 작업중인 js폴더로 붙여넣기 - css파일도 css폴더에 붙여넣기 bxSlider 옵션 종류 슬라이드 제어 메서드와 종류 jquery-cookie 플러그인 - 간편하게 쿠키 생성하고 쿠키 만료일 설정 가능한 플러그인 - https://cdnjs.com/에서 ‘jq.. 제이쿼리 비동기 방식 연계 Ajax - 화면 전체를 리로딩 - 화면이 고정된 상태에서 데이터만 변환 Ajax 관련 메서드 - $ajax() 메서드를 거의 만능처럼 사용 - jquery_ajax_news.html - jquery_ajax_1.html news의 내용을 불러와서 1에서 실행시키는 것인데 저기서 VS에서 실행하면 오류 발생 위의 파일을 이클립스에 복사해서 실행해보면 이렇게 내용을 불러와서 출력하는 것을 확인 가능하다. 이클립스에서 실행할 때 주의할 점은 js파일도 가져와야한다는 것 $ajax() 메서드 JSON (비동기 방식)AJAX와 XMLHttpRequest의 차이점 XMLHttpRequest는 XML뿐만 아니라 모든 유형의 데이터를 검색하는 데 사용할 수 있으며 파일 및 ftp를 포함한 HTTP 이외의 프로토콜을 .. 효과 및 애니메이션 메서드 효과 메서드 종류와 기본형 애니메이션 효과 제어 메서드 delay() 메소드 - 지정한 시간 이후에 애니메이션 실행 queue() / dequeue() 메서드 clearQueue() 메서드 - opacity 사용 - fadeout메소드 사용 이벤트 이벤트 등록 메서드 - 클릭을 했을 때 function안의 코드를 처리 이벤트 등록 방식 - 단독 이벤트 - 글릭을 했을 때 welcome 경고창 띄움 이벤트 등록 방식 - 그룹 이벤트 이벤트 등록 방식 - 강제 이벤트 발생 이벤트 등록 방식 - 이벤트 제거 메서드 ready() / load() 이벤트 메서드 - ready, load는 단독실행 - 아래는 실행 순서 확인 마우스 이벤트 - 클릭, 더블클릭 , 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기 마우스 이벤트 - mouseover(), mouseout(), hover() mouseenter() / mouseleave() 이벤트 메서드 mousemove()이벤트 메서드 포커스 이벤트 - focus() / blur() 포커스 이벤트 - focus.. 문제 1. not 메소드 사용 - #myList li로 바꿈 2. 위치 탐색자 이용(eq) 3. 제이쿼리 배열 관련 메소드 - 4가지 형태가 있으며, 이 중 하나를 골라서 사용하면 됨 --- - grep 사용하면 참거짓으로 배열을 뽑아냄 - map으로 저렇게 하면 참거짓 값 출력 맵, 그랩 - 배열에 있는 값에 해당하는 인덱스 번호 - 배열여부 - 합치는거 속성 탐색 선택자 종류 그 외의 선택자들 - 콘텐츠 탐색 선택자 메소드 종류 객체 조작 메소드 새 요소 생성, 복제, 삭제, 변경 속성 조작 메소드 수치 조작 메소드 객체 편집 메서드 탐색 선택자 위치 탐색 선택자 - eq(index) / lt(index) / gt(index) 문서 객체 선택자와 조작법 제이쿼리란 - 쉽고 편리한 애니메이션 효과 기능 구현 - 자바스크립트를 이용해 만든 라이브러리 언어 제이쿼리 연동 - 다운로드 방식 https://cdnjs.com/libraries/jquery - 버전 : 1.12.4 - 2번째거 url 복사 : https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js - 적당한 곳에 저장해서 놔둠 연동 - 네트워크 전송방식 선택자 - 문서 객체 모델 $붙여서 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Document $(function(){ $("#title").css("color","red"); }); 제목 Colored by Color Scripter cs 기본 선택.. 이전 1 다음
