제이쿼리 기초 + 고급

40회차 속성과정
전체 : 21시간 18분|회차당 평균 : 31분56초

이용기간 2개월

전문강사 : 알지오 R&D [IT] 2명

제이쿼리 기초 + 고급 인강 평생교육원 교육 안내
제이쿼리 기초 부터 고급까지 진행하는 강좌는 최근 웹표준 퍼블리셔 및 모바일홈페이지 제작 강의를 이용하신 분들의 요청강의입니다. 제이쿼리 기초 부터 고급까지 해야하는 이유는 강의는 자바스크립트 라이브러리의 형태로 기본적으로 선수과정은 반드시 학습하실 것을 권장합니다. 알지오 제이쿼리 기초 부터 고급 강좌를 통해 제이쿼리의 실무과정까지 배울 수 잇으며 버전이 지속적으로 업데이트 되어 변경되거나 없어진 내용들은 제이쿼리 해당코드를 이용하여 사용방법을 반드시 숙지하게되면 웹사이트 수정이나 개발을 쉽게 할수 있습니다.

01.23분 절대퀄리티 제이쿼리 기초 과정 - Chapter 1

책갈피[01:30] Jquery 가져오기/[04:22] 기본적인 기능(ready, click, hide)/[06:15] 아이디, 클래스, *, this/[10:05] frist, frist-child/[12:50] href, target/[15:18] botton/[16:48] even, odd
02.25분 절대퀄리티 제이쿼리 기초 과정 - Chapter 2

책갈피[00:00] click, dblclick/[01:46] mouseenter, mouseleave, mouseup/[04:22] hover, focus, blur, on/[07:26] 숨김, 표시 버튼 생성/[09:32] toggle/[10:35] fadein, fadeout, fadetoggle, fadeTo/[14:55] slideDown, slideUp, slideToggle/[17:22] animate/[21:19] animate 활용
03.18분 절대퀄리티 제이쿼리 기초 과정 - Chapter 3

책갈피[00:00] 콜백함수/[03:11] slideDown, slideUp/[04:30] text, html, val/[07:24] link/[10:16] 예제 실습1/[13:36] 예제 실습2
04.23분 절대퀄리티 제이쿼리 기초 과정 - Chapter 4

책갈피[00:00] 링크 주소 변경, 풍선도움말 출력, 복사/[04:44] append, prepend, appendText/[10:20] before, after/[11:32] remove, empty/[16:35] addClass, removeClass
05.29분 절대퀄리티 제이쿼리 기초 과정 - Chapter 5

책갈피[05:29] Inner 과정 추가/[08:29] Border 값 설정/[14:51] button에 따라 변경됨/[18:15] P 태그 안에 span 태그 /[21:39] 모든요소 조상값 반환/[25:19] 웹문서 로드/[27:23] 버튼클릭시 결과
06.35분 절대퀄리티 제이쿼리 기초 과정 - Chapter 6

책갈피[05:14] 필터링/[10:10] success, error 설정/[16:02] children().css값/[21:13] 실행결과 확인/[26:01] next 명령어/[28:55] div내 P 태그 설정/[32:53] eq 값 변경후 실행/[34:01] not 값 설정
07.36분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 1
기본문법과 html

책갈피[06:41] 라이브러리 연동/[11:32] 제이쿼리 문법/[19:44] $("li:lt"), $("li:eq"), $("li:gt")/[25:09] $("#alzio3").text()/[29:14] text()와의 차이/[33:31] insertAfter()/
08.33분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 2
CSS조작 제이쿼리 이벤트

책갈피[02:56] removeClass()/[05:00] 제이쿼리 문법/[11:48] slideUp()/[15:18] button, img/[19:31] return false/[22:27] toggle 실습1/[27:14] mouseout이벤트/[30:39] button 추가/[32:45] unbind()
09.44분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 3
이벤트, 폼태그

책갈피[04:48] focus 이벤트/[14:03] sumit 타입/[18:52] 자바스크립트 알림/[22:47] password 셀렉터/[25:33] $(this).css/[29:51] submit 셀렉터/[34:36] file 셀렉터/[38:25] each함수/[42:30] removeAttr
10.23분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 4
Ajax의 활용, Show함수

책갈피[03:19] loadfile.txt/[06:28] load("01강.html li")/[10:59] success값/[14:15] data 파라미터/[17:42] + 연산자/[21:44] show함수 문법/
11.38분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 5
animate

책갈피[01:02] display:none/[05:17] button#on/[09:57] $("div").toggle()/[13:32] $("button").click/[17:02] fade 효과/[21:17] fadeTo 함수/[25:26] display, visibility/[29:38] anomate() 문법/[34:26] 결과값 확인
12.39분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 6
슬라이드 갤러리

책갈피[02:10] th:nth-child(odd)/[08:12] $("th:nth-child(odd)")/[12:47] ("tr:not(:first-child)")/[15:49] td:nth-child/[21:52] removeClass("point")/[27:02] $("#main img").before()/[33:02] 슬라이드 이미지 갤러리/[36:16] animate()
13.54분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 7
Accordion, Tooltip

책갈피[00:23] Accordion 완성내용/[05:44] $("dd").slideUp()/[10:26] dt.selected/[14:01] 가로Accordion/[22:21] 마우스오버효과 추가/[27:47] addClass("selected")/[42:53] mousemove()/[48:50] offset()/[51:09] mouseout()/
14.58분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 8
Drop-down, Modal, Floating

책갈피[02:27] $(".sub").hide()/[13:17] 속성 셀렉터/[17:56] Modal Window1/[28:34] Modal Window2/[36:56] return false/[44:23] fadein/[55:59] mouseup()
15.38분 만족도 100% 마지막 제이쿼리 과정 - Chapter 1
Validation, 수식

책갈피[06:19] submit이벤트/[09:54] each/[17:03] if문/[25:29] && 앤드연산자/[30:01] 메일 어드레스/[32:41] replace/[37:34] filter
16.24분 만족도 100% 마지막 제이쿼리 과정 - Chapter 2
에러처리

책갈피[00:47] required/[04:09] size()== 0/[08:43] prepend()/[13:40] prepend 출력값/[16:24] animate()/[19:20] 스크롤 위치/[23:31] 유효성검사 주의사항
17.29분 만족도 100% 마지막 제이쿼리 과정 - Chapter 3
Sliding Window

책갈피[04:29] overflow:hidden/[10:40] prependTo()/[19:24] 콜백함수/[27:28] appendTo, prependTo
18.33분 만족도 100% 마지막 제이쿼리 과정 - Chapter 4
Paging 효과

책갈피[05:12] CSS 적용/[12:24] .question 적용/[18:54] return false/[20:55] date/[25:32] 콜백함수/[31:47] return false
19.29분 만족도 100% 마지막 제이쿼리 과정 - Chapter 5
jQuery 플러그인

책갈피[00:03] jQuery 플러그인/[05:35] 플러그인의 위치/[10:37] corner위치값/[23:43] headers/[25:48] sortForce/[27:35] sortForce: [[3,1]]
20.49분 만족도 100% 마지막 제이쿼리 과정 - Chapter 6
동적인 이미지, 탭패널

책갈피[03:58] items/[12:14] 이미지 링크/[16:55] .item .text/[23:16] var move, var zoom/[28:21] 마우스오버 animate/[40:13] list-style:none/[46:33] #tab .allpanel/[48:13] #tab .panel
21.43분 탭패널 구현, 동적 이미지구현

책갈피[00:14] hover 이벤트구현/[06:06] panelIds의 값/[17:12] $('.item').each/[19:45] $(this).append/[28:25] hover 이벤트 구현/[31:30] effects 파일[39:45] topRight 정의/
22.45분 텍스트 크기 조절, 메뉴에서 사용할 수 있는 제이쿼리

책갈피[00:10] 텍스트 줌 인/아웃 기능/[08:05] return false/[12:45] 이미지 대체효과/[16:15] var fade/[25:33] var top /[29:41] 아웃 animate 구현/[33:06] 메뉴를 따라다니는 아이콘/[37:20] 아이콘 위치 수정/[43:42]addClass('hover')
23.29분 스크롤메뉴

책갈피[04:35] #scroll/[12:31] var paddingL, paddingR/[16:46] animate/[21:09] mousemove/[26:45] top: top_value/[28:05] 계산식수정
24.16분 텍스트 대체 이미지메뉴

책갈피[02:41] body/[05:18] .menu ul/[10:57] menu ul li a/[14:09] 아웃 animate
25.21분 동적 메뉴제작실습 part1

책갈피[00:05] 동적 메뉴/[04:38] #ALL/[12:28] .list:last-child dt/[16:43] var $allDT/[18:52] var $allDD
26.19분 동적 메뉴제작실습 part2

책갈피[00:45] delegate 메서드/[03:36] dt에 click이벤트설정/[06:10] $otherWraps/[09:38] next().slideDown/[13:00] $otherWraps.animate/[17:35] trigger
27.23분 슬라이딩 박스메뉴 제작실습 part1

책갈피[02:41] submenu 구조/[08:52] ul.menu li > a/[15:45] z-index:10/[19:37] div.submenu/[21:42] div.submenu a:first-child/[22:57] display:none
28.17분 슬라이딩 박스메뉴 제작실습 part2

책갈피[01:11] mouseenter/[05:46] animate/[08:54] callBack함수설정/[15:24] $sub_menu.hide()/[16:40] text 재설정
29.26분 API ection 1
add(), addBack(), addClass()

책갈피[00:19] Add 메소드/[03:31] Add에서 "span"값을 삭제/[09:06] Clone().add 추가/[12:28] Collection/[15:20] Addback/[16:46] nextAll().addBack()/[19:07] Find 메소드/[21:46] Addback() 추가
30.33분 API section 2
NodeType, after(), ajaxComplete(), ajaxError()

책갈피[00:11] Contents()/[02:59] .wrap 메소드/[05:17] Text node 타입변경/[09:55] End 메소드값 삭제/[13:18] after 설정/[16:33] AjaxComplete/[22:18] On, load 함수 적용/[25:37] Ajaxsend 설정/[28:23] Append 값/[31:07] 에러발생시 팝업
31.24분 API section 3
ajaxStart(), ajaxStop(), ajaxSuccess(), All Selector()

책갈피[00:00] Start 메소드/[05:44] ajaxStart()/[09:05] 다른 위치의 문서/[15:33] .hide() 처리/[18:14] alert 팝업/[19:41] var elementCount/[23:25] 개체가 나오도록
32.34분 API section 4
andSelf(), animate(), append(), appendTo(), attr()

책갈피[00:06] andSelf 메소드/[05:04] animate/[12:08] animate 이중처리/[15:09] toggleClass, slideToggle/[19:29] createTextNode/[25:49] appendTo 메소드/[26:28] $ ("h3").appendTo/[31:31] 버튼을 클릭했을때 함수/[32:45] after
33.28분 API section 5
[name|=”value”], [name*=”value”], [name~=”value”], [name$=”value”], [name=”value”], [name!=”value”], [name=”value”], .before()

책갈피[00:03] AttributeContains/[04:30] 링크언어, 응용예제/[10:53] input에 text를 출력/[15:05] [name="value"]의 기능/[22:17] 곡절부호의 기능/[26:32] Before 응용
34.42분 API section 6
.bind(), .hover(), .focus(), .blur(), :button Selector, callbacks, change(), :checkbox, :checked

책갈피[00:06] bine/[05:39] script설명/[10:12] focus/[19:32] fireWith, disable/[26:25] change/[33:37] checkbox/[37:33] borders;solid/[41:32] checkbox
35.36분 API section 7
Child Selector (“parent > child”), .children(), Class Selector, clearQueue(), click(), clone (), closest(), :contains(), 2contents(), context, data(), dblclick (), deferred always (), done(), fail(), delay()

책갈피[00:01] Child Selector/[05:13] solid blue/[10:52] click메소드 설명/[15:11] parents/[20:41] return.this.nodeType/[25:18] first, last/[29:55] dblclick/[33:22] 팝업 생성[35:23] fadein, fadeout
36.33분 API section 8
delegate(), descendant Selector, detach(), die(), :disabled, each(), Element Selector, empty(), :empty Selector, :enabled Selector, end(), eq(), :eq() Selector, error()

책갈피[00:05] delegate[05:40] descendant Selector/[10:38] 세가지 장착/[13:59] index, value/[19:09] empty Selector/[27:35] end제거시 결과/[31:50] replaceWith
37.28분 API section 9
:even, event.currentTarget, event.data, event.delegateTarget, event.isDefaultPrevented(), event.isImmediatePropagationStopped(), event.namespace, event.pageX, Y, event.preventDefault(), event.relatedTarget, event.result, event.stopImmediatePropagation()

책갈피[00:13] event target/[05:37] event.which/[11:28] filter/[17:13] first-of-type Selector/[21:15] focusin, focusout/[26:24] gt Selector/[32:17] true인 결과
38.34분 API section 10
event.timeStamp, event.type, event.which, fadeIn(), fadeOut(), fadeTo(), fadeToggle(), :file, filter(), find(), finish(), first(), :first-child, :first-of-type, :first, focus(), :focus, focusin(), focusout(), get(), :gt(), has(), hasClass(), :header

책갈피[00:13] event target/[05:37] event.which/[11:28] filter/[17:13] first-of-type Selector/[18:30] focus/[22:47] fadeOut/[27:33] has/[32:17] true인 결과
39.35분 API section 11
height(), :hidden, :image, .index(), :input, .insertAfter(), .insertBefore(), .is(), keypress(), .keyup(), :lang(), :last-child, :last-of-type, :lt(), .map(), .mousemove(), :not(), :nth-child(), :nth-of-type(), :nth-last-of-type(), :nth-last-child(), .offset(), .offsetParent(), .one(), :only-child, :only-of-type, :password, .position(), .prev(), .prevAll(), .prevUntil()

책갈피[00:02] height메소드/[03:51] type/[06:52] 다른 예제 적용/[10:08] script코드/[12:44] keydown/[18:09] It Selector/[21:47] not Selector/[26:32] offsetParent/[32:47] prev/[34:40] prevUntil
40.32분 API section 12
.prop(), :radio, .removeAttr(), .removeData(), .removeProp(), .replaceAll(), :reset, .resize(), :root, .scroll(), .scrollLeft(), .scrollTop(), .select(), .serialize(), .serializeArray(), .slice(), :submit, :text, .toArray(), .triggerHandler(), .unbind(), .undelegate(), .unwrap(), :visible Selector, .wrapAll(), .wrapInner()

책갈피[00:08] prop[07:03] removeProp/[12:35] root Selector/[17:04] serialize메소드/[21:11] submit/[24:47] triggerHandler/[28:01] undergate/[30:40] wrapAll/[31:45] wrapInner