jquery [입문] - 총 21시간 33분 / 강의당평균 : 1시간 4분39초

jquery [입문]

전체 : 21시간 33분 / 강의당평균 : 1시간 4분39초

01 Chapter 1

53분

책갈피 : [00:03] Jquery / [00:42] 예제로 Jquery 설명 / [01:34] Jquery 다운로드 / [01:53] 다운로드버젼확인 / [02:39] 구글,MS 서버CDN서버 사용하기 / [02:54] 예제보기 / [03:39] 다운로드중 알아야할것 / [04:14] 사이트 주석처리 / [04:36] Type선언이 안되어있는 이유 / [05:19] Jquery파일 업로드 / [05:21] Jquert-ver-min.js 파일 불러오기 / [06:02] 사용할 내용 호출하기 / [06:14] 호출된 내용 기능설명 / [06:23] 함수설명 / [06:39] 실행결과 확인 / [06:53] 결과에 대한 설명 / [07:05] Hide함수 / [07:33] 설정변경 후 결과 확인 / [07:52] //로 주석처리 / [08:14] #으로 아이디명 지정 / [08:37] 실행결과 확인 / [08:47] 설정변경 후 결과 확인 / [09:06] .wkk 으로 지정 / [09:21] 설정변경 후 결과 확인 / [09:36] "*"으로 지정 / [09:48] 실행결과 확인 / [10:02] this 지정 / [10:18] 실행결과 확인 / [10:31] span,keid 지정 / [11:25] 실행결과 확인 / [11:46] 따옴표 사용설명 / [13:11] span태그 요소 / [13:55] ("ul li:frist").hide(); 지정 / [14:16] 실행결과 확인 / [14:36] Ul목록이 2개 일때 결과확인 / [15:11] ("ul li:frist-child").hide(); 지정 / [15:22] 실행결과 확인 / [15:37] ("[href]").hide(); 지정 / [15:59] 실행결과 확인 / [16:21] ("a[target='_blank']").hide();지정 / [16:55] 실행결과 확인 / [17:02] 지정값 변경 / [17:14] 실행결과 확인 / [17:27] 변경되지 않은 이유설명 / [17:57] 느낌표(!) 지정후 결과 확인 / [18:27] (";button").hide();지정 / [18:45] 실행결과 확인 / [19:22] button 요소 설명 / [20:20] (tr:even").css("color","red")지정 / [20:54] 실행결과 확인 / [21:24] 짝수관련내용 / [21:40] 관련함수제거 / [21:45] 짝수관련 내용 확인 / [22:22] 이벤트방법 / [22:47] 해당요소 클릭해서 진행 / [23:23] Document / [23:42] Click 메소드사용 / [24:11] 실행결과 확인 / [24:20] Span을 태그로 변경 / [24:23] 실행결과 확인 / [24:50] Click를 dbclick로 변경 / [24:55] 새로고침 실행결과확인 / [25:17] Mouseenter 함수 hide / [25:28] 실행결과 확인 / [25:43] P값을 kek로 변경 / [25:55] 실행결과 확인 / [26:26] Alert("ok!!!") 함수 / [26:37] 실행결과 확인 / [27:09] 설정변경 / [27:17] 실행결과 확인 / [27:51] Mousedown 함수 / [28:04] Mouseup 함수 / [28:08] 실행결과 확인 / [28:30] Hover 함수 / [29:38] Focus 함수 / [29:43] Input 함수 / [29:54] Css값 지정 / [30:27] 실행결과 확인 / [30:47] 메소드 하나이상 사용내용 / [31:00] P 태그를 할때마다 변경내용 / [31:16] 실행결과 확인 / [31:44] 요소에 여러개이벤트를 중첩 / [31:49] 실행결과 확인 / [32:37] 실행결과 확인 / [32:57] 결과 함수내용 확인 / [33:55] 스르륵숨기기 / [34:01] 실행결과 확인 / [34:52] Button.click."P" 태그 설정 / [34:58] Toggle함수 / [35:00] 실행결과 확인 / [35:18] Toggle함수 스르륵숨기기 / [35:42] 실행결과 확인 / [36:10] 버튼클릭시 아이디값 4개 설정 / [36:26] Fadein 함수 / [37:06] 버튼액션 설명 / [37:18] 실행결과 확인 / [37:51] Fade out 함수 / [38:15] 실행결과 확인 / [38:40] Fadetoggle 함수 / [38:53] 실행결과 확인 / [39:10] Fadeto 함수 / [39:31] 알파값주기 / [40:16] 실행결과 확인 / [40:30] 설정변경 / [40:37] 실행결과 확인 / [41:24] Slidedown 함수 / [41:46] Id확인 / [42:06] 실행결과 확인 / [42:36] Slideup 함수 / [43:12] 실행결과 확인 / [43:27] SlideToggle 함수 / [44:13] Animate 메소드 / [44:34] 실행결과 확인 / [45:27] 절대위치 함수 / [45:44] 실행결과 확인 / [46:31] 설정변경 opacity값 설정 / [47:24] 실행결과 확인 / [48:02] 크기변경 / [48:27] 실행결과 확인 / [48:53] 실행결과 먼저보기 / [49:23] Height : toggle 설정 / [49:30] 새로고침 실행결과 확인 / [49:59] Div.animate 함수 설정 / [50:48] 실행결과 확인 / [51:31] 폰트사이즈 변경 / [51:41] 실행결과 확인 / [52:32] Slidedown / stop함수 / [53:13] 버튼생성 / [53:49] 실행결과 확인

02 Chapter 2

53분

책갈피 : [00:12] Botton click 함수 실행 / [00:30] ("p").hide("slow",function(){ / [00:52] Alert로 메세지 남기기 / [01:04] 웹문서 반응 만들기 / [01:14] 콜백함수후 메세지 남기기 / [01:22] 저장 후 실행결과 확인 / [01:43] 버튼클릭하면 결과 확인 설명 / [02:28] 콜백함수 후 메세지 주석처리 / [03:07] 실행결과 확인 / [03:26] 웹문서 반응 주석처리 / [03:34] $("#kjkj").css("color",blue").slideUp("slow")slideDown("slow"); / [03:52] div id="kjkj" / [04:28] 저장후 실행결과 확인 / [04:52] 줄바꿈 가능 / [05:19] 기본 주석처리 / [05:43] Jquery 돔조작 / [05:56] Button 2개만들기 / [06:26] ID확인하기 / [06:48] 각버튼 실행액션 설명 / [07:18] 실행결과 확인 / [07:46] Text와 html 설명 / [08:29] 출력화면 소스확인 / [09:05] 주석처리 / [09:50] 입력값을 전송시 팝업시키는 방법 / [10:18] Value값 설명 / [11:01] 링크주소 팝업시키는 방법 / [11:42] 출력화면 소스 확인 / [12:31] Get방식 / [13:28] 예제로 text, html,vel 설명 / [14:41] Text 변환 / [15:01] Html 변환 / [16:13] 실행결과 확인 / [17:36] 버튼1번 아이디지정 / [18:33] 반영값 지정 / [19:07] 고정값 확대값 / [19:22] 버튼2번 아이디지정 / [19:37] Html로 결과확인지정 / [20:18] b 태그지정 / [20:57] 저장 후 실행결과 확인 / [22:10] Html 결과 확인 / [23:24] 메소드값 설명 / [23:38] 링크값 지정 / [23:46] 실행결과 확인 / [24:24] 실행결과내용 지정 / [25:05] 속성값 변경 / [25:17] 저장 후 실행결과 확인 / [26:03] 풍선도움말 지정 / [26:18] 추가된 내용 / [26:47] 저장 후 실행결과 확인 / [27:09] Return copy / [27:25] 새로운 함수에 새로운 속성 내용추가 / [27:40] Value 함수와 return origvalue 함수 지정 / [27:52] 저장 후 실행결과 확인 / [29:01] 결과값 주소 변경 / [29:08] 이전값 불러올때 캐쉬와 쿠키삭제 / [29:15] 저장후 실행결과 확인 / [30:06] Text 내용 추가하기 / [30:41] P 태그 기본내용 뒤에 콘텐츠 추가 / [31:14] 버튼2 추가 / [31:39] Append 중요 / [31:42] 저장후 실행결과 확인 / [32:45] Prepend 지정 / [32:54] 저장후 실행결과 확인 / [33:35] JavaScript 방식적용 / [34:06] 상황실현의 예 / [34:47] Text 를 돔방식으로 출력 / [35:41] 무한증식 설정 / [35:43] 저장후 실행결과 확인 / [37:06] 버튼 1에 before 지정 / [37:17] 버튼 2에 after 지정 / [37:42] 저장 후 실행결과 확인 / [37:58] Remove / [38:56] 내용을 삭제하는 제거버튼 지정 / [39:19] 저장 후 실행결과 확인 / [40:00] 자식요소만 제거하기 / [40:43] 저장 후 실행결과 확인 / [41:03] Alzio1에 대한 자식요소만 제거한 내용 / [41:44] P태그를 remove / [42:03] 3가지 예를 만듬 / [42:14] 저장 후 실행결과 확인 / [42:25] 결과에대한 설명 / [42:54] 클래스 2 추가후 설정 변경 / [43:13] 저장후 실행결과 확인 / [44:03] Css클래스값 추가 css값에 반영 변경 / [44:27] Addclass("read") / [44:56] Div 추가 / [45:12] Style 시트 생성 / [45:24] 반영될 상황 생성 / [46:10] 저장 후 실행결과 확인 / [47:04] 하나의 요소에 여러가지 css적용 / [47:39] 저장 후 실행결과 확인 / [48:09] 클래스가 정해져있는 웹문서에 remove / [48:29] 실행결과 확인 / [48:37] Jquery 설명 / [49:40] 클릭해서 팝업뜰때 실제 css값 / [50:20] 실행결과 확인 / [50:41] Background 값 맨처음 값 인식 / [50:47] Red 컬러시 숫자 확인 / [51:33] ("P").css("gackground-color","blue");설정 / [51:58] 저장후 실행결과 확인 / [52:15] ("p').css("color","fff")'값 설정 / [52:25] 저장 후 실행결과 확인

03 Chapter 3

1시간 4분

책갈피 : [00:04] Css파일 알기 / [00:31] 문서로드 스크립트 / [00:53] 내용실행 중 맨위에 텍스트 문단만들기 / [01:24] Width 값 + ID값에 width값 함수적용 / [02:04] Height 값 함수적용 / [02:45] ID를 HTML에 Text문서로 적용 / [03:03] ID만들기 / [03:16] body 값 적용한 내용 / [03:32] 실행결과 확인 / [03:51] 결과값 설명 / [04:20] Alzio1 값 결과설명 / [04:50] padding 값 포함 높이.넓이 합산 / [05:15] 줄바꿈추가 / [05:29] Inner 과정 추가 / [06:00] Innerwidth, innerheight 값 설정 / [06:44] 실행결과 확인 / [07:10] Outerwidth, Outerheight 값 설정 / [08:29] Border 값 설정 / [08:44] Text크기에 맞춰 font-size 설정 / [09:45] 실행 확인 / [10:31] Html 문서와 브라우저뷰포트 높이, 넓이 확인 / [11:06] Button 설정 / [11:17] Text 문서값 설정 / [11:24] Var 값 확인 / [11:44] \n설정 설명 / [12:12] 문서에 대한 높이넓이값 설정 / [12:55] 실행결과 확인 / [13:38] 결과 확인 / [13:58] Css 활성화 / [14:51] ID 값은 설정되어있지만 button에 따라 변경됨 / [15:32] ID 에 설정해놓은 높이넓이값으로 축소 / [15:43] 실행결과 확인 / [16:14] 계층구조 / [17:00] 부모메소드 설정 / [17:11] Span 을 부모로 설정 / [17:48] Div class 값 설정 / [18:12] Ul 목록 / [18:15] P 태그 안에 span 태그 / [18:28] 실행결과 확인 / [18:39] Css 튜닝 / [19:26] Parent 명령어 확인 / [19:38] Div 에 모든요소들에 값 설정 / [19:50] 실행결과 확인 / [20:31] 결과값 설명 / [21:39] 모든요소 조상값 반환 / [21:53] 실행결과확인 / [22:11] 결과값 먼저보기 / [22:22] Ul 값 설정 / [22:34] 결과값 먼저보기 / [22:43] 모든 조부모들 div값 설정 / [23:12] 결과값 먼저보기 / [23:32] Until 값 명령 / [24:04] 실행결과 확인 / [24:27] 에이젝스 / [25:06] 기본 div와 button / [25:19] 웹문서 로드 / [26:13] 기본 jquery 코딩 / [26:23] Id 값 위치에 load가져오기 / [27:12] 실행결과 확인 / [27:23] 버튼클릭시 결과 확인 / [28:38] 한글문서 불러올때 주의점 / [29:01] Text 를 html로 변경 / [29:09] 실행결과 확인 / [30:30] 문서로드가 필요한 이유 / [30:47] Css 가 대상문서일 경우 / [30:54] 실행결과 확인 / [31:00] 클릭전.후 다를때 / [31:15] Css 해지 class값 설정 / [31:22] 실행결과 확인 / [32:04] width 값 기본틀이 정해졌을때 결과 / [32:36] margin, padding 지우기 / [32:44] 실행결과 확인 / [33:32] Load 성공, 실패 팝업 / [34:01] 필터링 / [34:45] Css 기본 기준 설명 / [35:01] 실행결과 확인 / [36:06] 색상 변경 / [36:10] 실행결과 확인 / [37:04] 설정 변경 / [37:12] 실행결과 확인 / [37:44] Width 값 적용 설명 / [37:48] 실행결과 확인 / [37:55] Id 값 불러오기 / [38:22] 생각 값 팝업만들기 / [38:52] If문 설정 / [39:32] success, error 설정 / [39:46] 실행결과 확인 / [40:28] Id 값 없애기 / [40:31] 실행결과 확인 / [40:51] 실패값 설정 / [41:02] 실행결과 확인 / [41:59] alert 값 새로 설정 / [42:34] 실행결과 확인 / [42:55] 줄바꿈결과 확인 / [43:05] Error 결과 확인 / [44:13] 기본 Jquery 삭제 / [44:29] Jquery를 자식 메소드로 설정 / [45:00] children().css값 설정 / [45:34] Class 값 설정 / [46:00] 실행결과 확인 / [46:20] 결과값 추가 / [46:41] 실행결과 확인 / [47:36] "P.aa" 값 설정 / [47:56] 실행결과 확인 / [48:29] class="a" 값 중복설정 / [48:42] 실행결과 확인 / [49:13] Find 명령어 / [50:03] Find 값 설정 / [50:11] 실행결과 확인 / [50:37] div 에 모든자손값 확인 / [50:56] 실행결과 확인 / [51:28] 형제,자매 만들기 / [51:37] 기존값에 h1추가 / [51:40] 실행결과 확인 / [52:01] Siblings 명령어 / [52:49] 실행결과 확인 / [53:20] 형제,자매값 필터링 / [54:37] 실행결과 확인 / [55:07] next 명령어 / [55:43] nextAll 명령어 / [56:07] 실행결과 확인 / [56:17] nextuntil 명령어 / [57:00] 실행결과 확인 / [57:29] 필터링 / [57:38] first 메소드 / [58:17] div내 P 태그 설정 / [58:33] 실행결과 확인 / [59:10] 설정변경 / [59:15] 실행결과 확인 / [59:30] last 메소드 / [59:38] 실행결과 확인 / [01:00:20] eq(3) 설정 / [01:01:03] 실행결과 확인 / [01:01:22] 결과값에 대한 설명 / [01:01:51] eq 값 변경후 실행결과 확인 / [01:02:24] filter 에 class값 설정 / [01:02:47] 실행결과 확인 / [01:03:05] not 값 설정 / [01:03:31] 실행결과 확인

04 jQuery, Selecter, 기본문법과 html, css조작, CSS class제어, 제이쿼리 이벤트

제이쿼리에 대해 알아보고, Selecter와 html, css조작, css 속성을 제어하는 함수, 타이밍을 설정하는 이벤트에 대해 실습합니다.

1시간 10분

책갈피 : [00:04] 라이브러리란? / [02:02] jQuery의 장점 / [03:40] 선수학과소개 / [03:55] 준비사항 / [04:45] 제이쿼리추가 / [05:48] 제이쿼리 홈페이지 / [06:30] 1.7.2 다운 / [06:41] 라이브러리 연동 / [07:50] 구글 제이쿼리 / [08:06] path / [09:40] $의 의미 / [10:31] .alzio / [10:37] html / [11:03] css / [11:32] 제이쿼리 문법 / [12:38] ul 추가 / [13:30] $("li") / [14:42] $("#alzio1") / [15:27] $(".second") / [16:00] $("#alzio1, .second") / [17:05] 새로운 ul / [18:52] $("li:first") / [18:12] $("li:last") / [18:40] $("li:odd"), $("li:even") / [19:44] $("li:lt"), $("li:eq"), $("li:gt") / [20:33] $("li:contains()") / [21:54] html, css 조작 / [22:28] text() 변경 / [23:17] text() 가져오기 / [25:09] $("#alzio3").text() / [26:04] p태그제거 / [26:55] text() / [28:15] html() / [29:14] text()와의 차이 / [31:02] html() 가져오기 / [31:40] after() / [32:35] insertBefore() / [33:31] insertAfter() / [33:52] wrap() / [34:29] replaceWith() / [35:59] p, em / [36:40] remove() / [37:03] remove결과값 / [37:32] css추가 / [37:52] addClass() / [38:42] removeClass() / [39:21] css() / [40:04] css 복수 적용 / [40:30] 제이쿼리 문법 / [41:39] text(), css() / [43:18] p 태그 추가 / [43:31] $("p").text("로딩 후") / [43:53] $(document).ready(function() / [46:04] p.alzio 스타일 설정 / [46:30] click이벤트 / [47:02] $(this) / [47:32] slideUp() / [48:27] hover이벤트 / [49:33] background:orange / [50:59] button, img / [51:21] attr() 변경 / [52:04] 복수 이벤트 / [52:35] $("a:eq(0)").click() 오류 / [54:25] return false / [55:12] this 사용의 간결함 / [56:32] this 결과값확인 / [56:37] button추가 / [57:21] mousedown이벤트 / [57:56] mouseup이벤트 / [58:22] toggle 실습1 / [01:01:03] toggle 실습2 / [01:02:34] mouseover이벤트 / [01:03:10] mouseout이벤트 / [01:03:35] mousemove이벤트 / [01:04:21] e.page() / [01:05:17] 함수값과 텍스트의 조합 / [01:06:30] button 추가 / [01:06:54] alert() / [01:07:42] one() / [01:08:22] unbind()

05 focus, blur, sumit 이벤트, 폼태그 Selector, 폼태그Selector, Ajax의 활용, Show함수

focus, blur, sumit에 대한 이벤트와 Ajax의 활용에 대해 알아보고, 폼태그 내부에서 사용되는 셀렉터와 show()를 이용한 애니메이션 효과를 실습합니다.

1시간 5분

책갈피 : [00:22] 폼 태그 / [01:01] val() / [01:40] $("button").click / [03:22] $("input").val("") / [04:48] focus 이벤트 / [05:20] focus 적용 / [05:54] 메서드 체인 / [06:30] 결과값 확인 / [07:41] placeholder / [08:40] 오류 수정 / [09:32] one() / [10:35] blur 이벤트 / [11:26] if문 / [11:58] 결과값 확인 / [12:56] change 이벤트 / [13:40] 폼 작성 / [14:03] sumit 타입 / [14:51] sumit 이벤트 예 / [17:18] submit() / [17:22] return false / [18:23] 결과값확인 / [18:34] fadeOut() / [18:52] 자바스크립트 알림 / [19:35] input 셀렉터 / [20:24] 결과값 확인 / [20:54] text 셀렉터 / [21:27] blur / [21:58] text 타입 찾기 / [22:47] password 셀렉터 / [23:30] 결과값 확인 / [24:06] gender 찾기 / [24:35] id와 for연결 / [25:21] radio 셀렉터 / [25:33] $(this).css / [25:43] label for값 불러오기 / [26:53] css("font-weight","") / [27:51] 결과값 확인 / [28:49] checkbox 셀렉터 / [29:42] 결과값 확인 / [29:51] submit 셀렉터 / [30:18] mouseover, mouseout / [31:05] reset" 셀렉터 / [31:58] 결과값 확인 / [32:18] button 셀렉터 / [33:07] != 연산자 / [33:40] css("color","red") / [33:56] 결과값확인 / [34:36] file 셀렉터 / [35:35] input type="file" / [35:51] mouseover, mouseout / [36:01] 결과값확인 / [36:39] checked / [37:36] checked 셀렉터 / [38:10] $("label").css("color","") / [38:25] each함수 / [39:16] 라벨의 for값 가져오기 / [39:53] 결과값확인 / [40:22] sselected / [40:50] selected 셀렉터 / [41:03] if 문 / [42:09] else / [42:30] removeAttr / [43:17] 결과값확인 / [43:47] ajax란? / [46:08] button, div 추가 / [47:32] load로 텍스트 파일 불러오기 / [47:36] loadfile.txt / [48:00] 결과값확인 / [48:26] load로 html 파일 불러오기 / [49:44] 결과값확인 / [50:09] load("01강.html li") / [51:39] dl 추가 / [53:32] ajax 문법 / [54:18] url값, dataType값 / [54:39] success값 / [55:10] $.ajax 소스 붙여넣기 / [55:23] AjaxXML.xml / [56:05] dataType:'xml' / [56:16] data 파라미터 / [56:25] $("item",data) / [59:02] each() / [59:48] $("dl").append / [01:00:28] dt, a href값 반환 / [01:00:59] + 연산자 / [01:01:52] $("title",this).text() / [01:02:15] 닫는 dt, 닫는a, dd값 반환 / [01:02:43] $("description",this).text() / [01:02:43] 닫는 dd값 반환 / [01:03:13] 결과값확인 / [01:03:33] button, div, img 추가 / [01:04:25] show함수 / [01:05:25] show함수 문법 / [01:06:15] display:none / [01:06:29] $("divl").show / [01:06:56] 결과값확인

06 show, hide, toggle, slide 효과, fade 효과, animate, 스트라이프 테이블, 슬라이드 이미지 갤러리

애니메이션 효과를 사용해 동적인 움직임을 주는 실습과, 실무에서 사용할 수 있는 스트라이프 테이블과 슬라이드 이미지 갤러리를 직접 제작합니다.

1시간 18분

책갈피 : [00:08] show 함수 / [00:51] button, div 추가 / [01:02] display:none / [01:10] show(1000) / [02:15] slow, normal, fast / [03:10] show("slow",function()) / [03:56] 결과값 확인 / [04:43] hide 함수 / [05:00] button 추가 / [05:17] button#on / [05:40] button#off / [06:30] 결과값확인 / [06:50] function(){alert();} / [07:46] 결과값확인 / [08:35] toggle 함수 / [09:57] $("div").toggle() / [10:27] 결과값확인 / [10:42] toggle(1000, function()) / [11:30] 결과값 확인 / [11:57] slide 효과 / [12:40] slideUp() / [13:32] $("button").click / [13:40] if, else문 / [13:55] 조건문 / [14:00] == 연산자 / [14:22] slideUp("slow") / [15:05] slideDown("slow") / [15:27] 결과값확인 / [16:03] slideToggle() / [17:02] fade 효과 / [18:02] fadeIn(1000) / [19:56] fadeOut("slow",function()) / [20:30] 결과값 확인 / [20:40] fadeIn(1000,function()) / [21:17] fadeTo 함수 / [22:59] button 추가 / [23:13] fadeTo("slow",1) / [23:32] fadeTo("slow",0.5) / [23:44] fadeTo("slow",0) / [24:06] 결과값 확인 / [24:25] fadeOut과 fadeTo / [25:26] display:none, visibility: hidden / [27:00] button, div, p 추가 / [27:44] fadeOut("slow") / [28:33] fadeTo("slow",0) / [29:10] button, p 추가 / [29:38] anomate() 문법 / [29:57] {변경될CSS속성} / [31:20] 동작형태 / [32:25] animate() / [32:49] marginLeft, fontSize / [33:20] swing / [33:30] 결과값 확인 / [33:53] button#alzio2 / [34:26] 결과값 확인 / [34:34] animate함수 / [35:15] +=, -= / [36:36] +=, -= 추가, 삭제 / [37:46] height수정 / [38:22] 스트라이프 테이블 / [39:26] table추가 / [39:45] jqueryCSS.css / [40:09] css3 셀렉터 적용 / [40:29] th:nth-child(odd) / [40:50] th:nth-child(even) / [41:54] 적용값확인 / [43:27] class단위로 css설정 / [43:30] .odd , .even / [43:50] 유지보수 불편 / [45:29] table추가 / [46:05] $("th:nth-child(odd)") / [46:59] 홀수 예제 / [47:48] $("tr:nth-child(even)") / [49:06] 적용값확인 / [50:13] 행 마우스오버 효과 / [50:59] ("tr:not(:first-child)") / [51:45] addClass("point") / [52:10] removeClass("point") / [52:35] .point / [52:43] 적용값확인 / [53:09] 열 마우스오버 효과 / [53:29] 전체코드 분석 / [54:35] td:nth-child / [57:02] size() / [57:26] %연산자 / [59:06] 1 더하기 / [01:00:20] removeClass("point") / [01:00:30] 적용값확인 / [01:00:46] 이미지 갤러리 / [01:02:02] div, ul, li 추가 / [01:02:41] 적용값확인 / [01:03:19] $("#menu a").click() / [01:04:01] return false / [01:04:25] 적용값확인 / [01:05:25] $("#main img").before() / [01:07:47] fadeOut() / [01:08:10] $("#main img:last") / [01:09:29] 적용값확인 / [01:10:51] 슬라이드 이미지 갤러리 / [01:11:28] HTML태그 지정 / [01:12:30] 적용값확인 / [01:13:37] 코드 붙여넣기 / [01:14:08] $("img.next").click() / [01:14:32] animate() / [01:16:03] $("img.prev").click() / [01:16:50] 적용값확인

07 Accordion, Tab, Tooltip, Drop-down menu, Modal Window, Floating Window

실무에서 사용할 수 있는 아코디언, 탭패널, 툴팁, 마우스오버, 모달 윈도우, Floating Window를 실습합니다..

1시간 52분

책갈피 : [00:05] Accordion / [00:23] Accordion 완성내용 / [01:07] dl, dt, dd 추가 / [02:04] 적용값확인 / [02:58] $("dd:not(:first)").css() / [03:59] $("dl dt").click() / [04:14] if문 / [04:39] 인접셀렉터 : +dd / [05:23] $("+dd",this).slideDown() / [05:44] $("dd").slideUp() / [06:18] 적용값확인 / [06:50] $("dd").slideUp() 삭제 / [07:37] 선택효과 추가 / [08:21] 초기상태지정 / [08:55] addClass("selected") / [09:23] removeClass("selected") / [10:26] dt.selected / [10:43] 적용값확인 / [11:01] 마우스오버효과 추가 / [11:25] mouseover, mouseout / [11:56] addClass("over") / [12:27] dt.over / [13:33] 적용값확인 / [14:01] 가로Accordion / [14:55] div, dl, dt, dd 추가 / [15:13] css적용 / [15:39] 적용값확인 / [16:17] animate / [16:59] 아코디언 작동방법 / [17:14] css("width","0px") / [17:47] addClass("selected") / [18:04] $("dl dt").click / [18:37] has필터 / [19:33] $("+dd",this).animate() / [19:49] width:500px / [21:03] 코드전체설명 / [22:02] 적용값확인 / [22:21] 마우스오버효과 추가 / [22:58] Tab / [23:47] div, ul, li 추가 / [24:42] css적용 / [24:56] 적용값확인 / [25:30] 초기상태지정 / [25:46] not 셀렉터 / [27:08] 적용값확인 / [27:20] $("ul.tab li a").click() / [27:36] removeClass() / [27:47] addClass("selected") / [28:13] hide, show / [29:19] id값과 링크값의 일치 / [29:51] 적용값확인 / [30:28] fadeIn변경 / [30:52] slideUp, slideDown 변경 / [31:23] Ajax와 Tab의 결합 / [31:49] HTML적용 / [32:35] css적용 / [33:00] 적용값확인 / [33:58] ("p.content").load() / [34:44] click이벤트 / [35:25] return false / [36:30] alzio5.txt 수정 / [37:08] Tooltip1 / [37:49] h2, p, a 태그 / [38:33] css적용 / [38:56] 적용값확인 / [39:35] $(".tooltip").css() / [40:04] opacity:"0.9" / [41:16] $("a").mouseover() / [41:58] mouseout() / [42:53] mousemove() / [43:17] function(e) / [43:31] e.pageY, X / [44:27] 적용값확인 / [45:25] Tooltip2 / [46:36] background 이미지 / [47:02] 적용값확인 / [47:29] $(".tooltip").css() / [48:19] $("a").mouseover() / [48:50] offset() / [49:56] -55, -95 삭제 / [50:30] -55, -95 추가 / [51:09] mouseout() / [52:07] setTimeout / [53:37] 적용값확인 / [54:01] Drop-down menu1 / [54:37] 메뉴 태그 추가 / [55:16] css적용 / [56:21] $(".sub").hide() / [56:43] 마우스오버 처리 / [58:28] 적용값확인 / [59:21] Drop-down menu2 / [01:00:22] $(".sub").hide() / [01:00:40] ">ul" / [01:01:33] 메뉴구조 / [01:02:06] 적용값확인 / [01:02:39] fadeIn, fadeOut / [01:03:07] 롤오버이미지 / [01:05:05] ul, li 추가 / [01:07:13] 속성 셀렉터 / [01:08:01] $(this).attr() / [01:09:46] 적용값확인 / [01:10:08] Modal Window1 / [01:10:31] 모달윈도우 구성요소 / [01:11:50] 모달윈도우 표현방식 / [01:12:06] body 확인 / [01:12:31] div 추가 / [01:13:24] #Black / [01:13:42] #Main / [01:14:00] 적용값확인 / [01:15:01] dispaly:none / [01:15:38] h1, ul, li 태그 / [01:15:52] class 지정 / [01:16:06] 적용값확인 / [01:16:29] $("body").append() / [01:17:24] display:none / [01:17:38] $("a.modal").click() / [01:18:06] $("#Main").html() / [01:19:35] 적용값확인 / [01:20:22] $("#Black").click / [01:21:18] 적용값확인 / [01:22:30] Modal Window2 / [01:22:58] css, html적용 / [01:23:33] dl, dt, dd 태그 / [01:25:00] 적용값확인 / [01:25:39] $("dd").hide() / [01:26:07] $("body").append() / [01:26:24] $("dt").click() / [01:26:59] $("#Main").css() / [01:28:17] 적용값확인 / [01:29:01] marginTop값 / [01:29:21] 수식과 텍스트 결합 / [01:30:54] return false / [01:31:03] 적용값확인 / [01:31:24] $("#Black").click / [01:32:23] Floating Window / [01:33:26] a, div 태그 / [01:34:03] dl, dt, dd 태그 / [01:35:05] 링크와 id의 일치 / [01:35:39] css적용 / [01:36:53] 적용값확인 / [01:37:29] $(".open").click / [01:38:16] fadein / [01:38:46] 적용값확인 / [01:39:19] $(".close").click / [01:40:01] 적용값확인 / [01:40:51] 전체코드해석 / [01:41:25] 마우스위치 계산 / [01:43:04] function(e) / [01:43:48] $("#Window").offset() / [01:45:54] data() / [01:46:10] $(document).mousemove / [01:46:32] $("#Window").css / [01:46:45] 마우스 x,y좌표 / [01:49:56] mouseup() / [01:50:47] 적용값확인

08 Validation - 필수항목, 수식, 이메일 검사, 라디오버튼, 체크박스, 에러처리

폼 내부에서의 유효성검증 기능을 추가해보고, 그 작동원리를 실습합니다.

1시간 1분

책갈피 : [00:05] Validation / [01:11] 완성페이지구성 / [02:03] 전송완료알림 / [02:42] form action / [02:59] HTML 구성 / [03:53] input, class / [04:23] 적용값확인 / [05:01] CSS 적용 / [06:19] submit이벤트 / [07:21] removeClass("error") / [08:41] $(":text,textarea") / [09:54] each / [10:23] 필수 항목 검사 / [10:54] $(this).val()=="" / [11:42] $(this).before / [12:26] required / [14:06] 적용값확인 / [15:46] 주석사용 / [16:05] 연락처 검사 / [17:03] if문 / [17:14] isNaN / [18:30] $(this).before / [18:56] 적용값확인 / [20:41] 메일 어드레스 체크 / [21:35] 메일 형식 / [21:54] 정규식 / [24:53] ! 부정연산자 / [25:29] && 앤드연산자 / [26:38] 적용값확인 / [28:19] && 삭제 / [30:01] 메일 어드레스 확인 체크 / [30:44] $(this).val() / [32:20] 수식,텍스트결합 / [32:41] replace / [33:26] _check / [33:43] $1 / [35:28] 전체코드해석 / [35:52] 적용값확인 / [36:45] 라디오 버튼 검사 / [37:34] filter / [38:12] if조건문 / [40:29] input type="radio" / [40:49] $(":radio[name=""]:checked") / [40:56] name="school" / [41:10] size()== 0 / [42:16] 적용값 확인 / [43:40] 체크박스 검사 / [44:03] $(".checkboxRequired") / [44:38] prepend() / [47:03] prepend 위치확인 / [49:27] dl dd p.error / [50:02] before 출력값 / [50:40] prepend 출력값 / [51:15] 전체 에러 처리 / [52:17] "p.error").size()>0 / [53:18] animate() / [54:37] addClass / [55:19] dl dd.error input / [55:35] 적용값 확인 / [57:22] 스크롤 위치 / [57:54] offset().top 수정 / [58:22] return false / [59:10] 적용값 확인 / [59:59] 유효성검사 주의사항

09 Sliding Window & Paging

버튼을 통한 이미지 슬라이딩 효과, 슬라이딩 윈도우 UI를 제작실습하고, Ajax를 이용하여 부드러운 페이징 효과를 구현합니다.

1시간 2분

책갈피 : [00:01] Sliding Window / [00:41] Sliding Window 완성작 / [01:32] HTML 구성 / [03:43] CSS 적용 / [04:29] overflow:hidden / [05:20] #allpage .page / [07:00] 적용값확인 / [07:25] overflow:hidden 주석처리 / [07:53] 초기설정지정 / [08:35] width값 설정 / [09:13] size() / [10:16] 적용값확인 / [10:40] prependTo() / [11:47] prependTo 적용위치 / [12:08] 적용값확인 / [12:32] $("#allpage").css / [13:06] 적용값확인 / [14:31] Prev버튼 / [14:45] ("#Prev").click / [15:00] $("#Next,#Prev").hide / [16:05] $("#allpage").animate / [16:51] marginLeft:"+=620px" / [18:58] "slow" / [19:24] 콜백함수 / [20:10] $("#Next,#Prev").show() / [20:18] 괄호위치 정정 / [20:44] 적용값확인 / [22:27] 콜백함수 내 초기설정 / [24:11] 적용값확인 / [25:20] Next버튼 / [26:13] 적용값확인 / [27:28] appendTo, prependTo / [28:41] overflow:hidden 주석삭제 / [28:04] 결과 확인 / [29:08] Paging 효과 / [29:26] Paging 완성작 / [32:19] HTML 구성 / [33:15] p 태그 / [33:36] ul class="number" / [34:10] CSS 적용 / [35:14] .number li a.selected / [35:53] 적용값 확인 / [36:39] a 링크값 / [36:47] page1~3.html / [37:59] div id="content" / [39:12] 적용값 확인 / [41:30] .question 적용 / [42:50] 초기상태 / [43:08] load() / [43:29] first 셀렉터 / [44:46] page1 살펴보기 / [45:04] 적용값 확인 / [45:27] addClass("selected") / [46:28] 적용값 확인 / [47:10] click 이벤트 설정 / [47:55] return false / [48:19] $("#content").html / [49:01] 적용값 확인 / [49:50] $("#content").data / [51:17] $('html,body').animate / [51:35] scrollTop: / [51:52] normal, swing / [52:41] offset().top / [53:32] 적용값 확인 / [53:58] 콜백함수 / [55:22] load 함수 / [57:22] 적용값 확인 / [57:40] 속도값 수정 / [58:58] removeClass("selected") / [59:02] 적용값 확인 / [59:34] removeClass 삭제 / [01:00:50] return false / [01:01:03] 결과 확인

10 jQuery 플러그인, 동적인 이미지, 탭패널 구현

corner, tablesorter, fisheye 플러그인을 실습하고, 실무적으로 활용할 수 있는 이미지 목록과 동적인 탭패널을 구현합니다.

1시간 18분

책갈피 : [00:03] jQuery 플러그인 / [01:45] jQuery 공식홈페이지 / [02:22] div 추가 / [02:44] 적용값확인 / [04:39] jquery.corner.js / [05:35] 플러그인의 위치 / [06:51] $("#alzio").corner() / [07:29] 적용값확인 / [08:02] corner( "Bevel") / [08:33] corner( "Tear") / [09:01] corner옵션값 / [09:30] corner("Tear top"); / [09:53] corner("Tear right"); / [10:13] corner("Tear br"); / [10:37] corner위치값 / [11:02] corner("Tear br 30px"); / [11:37] corner 중복적용 / [14:00] tablesorter / [15:03] jquery.tablesorter.min.js / [16:05] table 추가 / [17:32] 적용값확인 / [18:01] style.css / [18:42] 적용값확인 / [19:38] $("#ALZIO").tablesorter(); / [20:30] 적용값확인 / [23:07] 주석처리 / [23:18] 정렬 해제 / [23:43] headers / [24:16] 적용값확인 / [25:29] 강제 정렬 / [25:48] sortForce / [26:19] 주석처리 / [26:26] 적용값확인 / [27:35] sortForce: [[3,1]] / [28:56] Fisheye / [29:34] jquery.interface.js / [29:45] HTML 구조 / [31:08] CSS 적용 / [31:20] 적용값확인 / [31:44] $('#alzio').Fisheye / [32:02] 적용값확인 / [32:31] items / [32:56] container / [33:15] itemsText / [33:30] itemWidth, maxWidth / [34:06] proximity / [34:21] halign / [36:00] span위치 변경 / [36:27] bottom: 0px / [36:48] 적용값 확인 / [38:19] 실습 완성본 / [39:58] jquery15.html / [40:10] html구성 / [40:32] div class="item" / [41:02] 이미지 링크 / [41:18] div class="text" / [42:18] 적용값 확인 / [42:52] body / [43:24] s.item / [44:00] 적용값 확인 / [44:19] margin:4px / [44:44] overfolw:hidden / [45:09] position:relative, float:left / [45:42] .item .text / [46:25] opacity:0.75 / [46:36] display:none / [46:57] 적용값 확인 / [47:05] display:none 주석처리 / [47:20] img 주석처리 / [47:55] .item .text a / [48:06] font-weight:bold / [48:21] 적용값 확인 / [48:36] padding:5px / [48:47] display:block / [49:04] .item .text p / [49:15] margin, paddin / [49:57] .item img / [50:07] position:absolute / [50:21] .clear / [50:45] clear:both / [50:59] 적용값 확인 / [52:04] var move, var zoom / [52:40] $('.item').hover / [53:32] var width, var height / [54:33] sanimate 구현 / [55:48] 적용값 확인 / [56:37] find('.text').fadeIn / [57:57] 마우스오버 animate 구현 / [58:42] duration / [59:12] find('.text').fadeOut / [59:23] 적용값 확인 / [59:52] 실습 완성본 / [01:00:54] jquery15_2.html / [01:01:09] html 구성 / [01:01:27] div id="logo" / [01:01:50] div id="tab" / [01:02:13] 적용값 확인 / [01:02:35] h2 / [01:03:31] body / [01:03:39] line height / [01:04:10] #ALL / [01:04:41] margin:0 auto / [01:05:04] #logo / [01:05:11] padding / [01:05:50] #logo a / [01:06:07] text-decoration / [01:06:43] z-index / [01:06:51] a img / [01:07:09] 적용값 확인 / [01:07:22] a strong / [01:08:18] #tab / [01:08:53] #tab ul / [01:09:02] list-style:none / [01:10:34] -webkit-border-radius / [01:11:13] #tab li / [01:11:47] #tab li a / [01:11:57] text-decoration:none / [01:12:46] 적용값 확인 / [01:12:57] #tab li a:hover / [01:13:21] border / [01:14:31] #tab li a.selected / [01:15:24] #tab .allpanel / [01:15:39] -webkit-border-radius / [01:16:29] 적용값 확인 / [01:16:52] overflow:hidden / [01:17:03] #tab .panel / [01:17:31] h2 / [01:17:51] 적용값 확인

11 탭패널 구현, 동적 이미지구현, 텍스트 크기 조절, 메뉴에서 사용할 수 있는 제이쿼리

탭패널 구현/여러 유형의 동적 이미지 구현/프로그래밍적으로 텍스트 크기를 조절하는 방법/메뉴제작

1시간 27분

책갈피 : [00:14] hover 이벤트구현 / [00:42] 오버 animate / [01:11] 적용값확인 / [01:37] 아웃 animate / [02:49] 적용값확인 / [03:29] stop() / [04:04] $('.navigation').each / [06:06] panelIds의 값 / [07:04] $allpanel.hide() / [07:16] 적용값확인 / [07:57] if문 / [08:56] 적용값확인 / [09:24] $panelALL.animate / [10:50] height() + 40 / [11:29] 적용값확인 / [12:42] jquery15 파일 / [14:44] jquery16 파일 / [15:27] css 변경 / [16:04] .bar1, .bar2, .bar3, .bar4 / [16:39] var top, bottom / [17:12] $('.item').each / [19:20] $('img', this).remove / [19:45] $(this).append / [20:46] 적용값확인 / [21:03] $(this).children.css / [23:30] css("background-size") / [24:23] bar1 정의 / [24:53] 적용값확인 / [25:18] bar2 정의 / [26:09] 적용값확인 / [27:35] bar3, bar4 정의 / [28:25] hover 이벤트 구현 / [28:50] 오버 animate / [29:44] 적용값확인 / [29:59] 아웃 animate / [31:30] effects 파일 / [32:07] script 참조 / [32:28] 이징효과구현 / [33:01] 적용값확인 / [33:20] jquery16_2 파일 / [34:29] var minus, plus, plus2 / [35:57] $('.item').each / [36:23] $('img', this).remove / [37:23] $(this).children.css / [38:40] 적용값확인 / [39:13] .bar / [39:45] topRight 정의 / [40:57] .topRight / [41:48] .bottomLeft, .bottomRight / [42:32] 텍스트 줌 인/아웃 기능 / [43:27] html구조 / [44:08] css 적용 / [44:40] 적용값 확인 / [45:29] var min, max / [45:56] var reset / [46:14] var elm / [46:55] str_replace 함수 정의 / [48:14] str_replace(reset, 'px', '') / [49:00] $('.Plus').click / [49:55] elm.css / [50:29] return false / [50:51] 적용값 확인 / [51:16] $('.Minus').click / [52:11] 적용값 확인 / [52:51] $('.Reset').click / [53:23] fontSize : reset / [53:46] 적용값 확인 / [54:25] 이미지 대체효과 / [55:14] html 구조 / [55:57] 적용값 확인 / [56:15] css 적용 / [56:30] .fade / [56:48] 적용값 확인 / [56:56] .fade div / [57:35] dispaly:none / [58:19] $('.fade').hover / [58:38] var fade / [59:17] if, else 문 / [01:00:26] 적용값 확인 / [01:00:54] 마우스 아웃 함수 정의 / [01:01:54] 적용값 확인 / [01:03:06] 움직이는 메뉴 제작 / [01:03:33] html 구조 / [01:04:04] #menu / [01:04:29] padding, margin / [01:04:49] #menu li / [01:05:32] #menu li a / [01:06:05] background / [01:06:50] display:block / [01:07:11] text-indent / [01:07:59] var top / [01:09:00] $('#menu li.selected').children('a') / [01:09:51] 스크립트 추가 / [01:10:23] 적용값 확인 / [01:10:41] $('#menu li').hover / [01:11:06] 오버 animate 구현 / [01:11:49] 적용값 확인 / [01:12:08] 아웃 animate 구현 / [01:13:11] top:0 / [01:14:05] $('#menu li.selected').hover / [01:14:36] 적용값 확인 / [01:15:08] 메뉴를 따라다니는 아이콘 / [01:15:45] html구조 / [01:16:41] #menu / [01:17:26] #menu ul / [01:18:14] #menu li / [01:19:23] #menu li a / [01:19:46] #menu .arrow / [01:20:49] 적용값 확인 / [01:21:17] $('#menu .arrow').height / [01:22:11] var top / [01:23:41] $('#menu .arrow').animate / [01:24:13] 아이콘 위치 수정 / [01:24:55] $('#menu li').hover / [01:25:43] 적용값 확인 / [01:26:00] addClass('hover') / [01:26:33] #menu li.hover

12 스크롤메뉴, 텍스트 대체 이미지메뉴

자동 스크롤이 가능한 메뉴와, 이미지로 제작하는 메뉴를 작성해봅니다.

44분

책갈피 : [00:05] 스크롤메뉴 / [00:29] 실습완성본 / [01:55] html구조 / [02:53] div id="mouse_axis" / [03:20] 실습완성본 / [03:54] body / [04:35] #scroll / [05:51] #menu / [07:47] #menu li / [08:59] #menu li a / [10:51] #menu li span / [11:14] #mouse_axis / [11:55] 적용값확인 / [12:31] var paddingL, paddingR / [13:53] $('#menu li').mouseover / [14:04] padding animate / [15:20] queue:false / [16:29] 적용값확인 / [16:46] backgroundColor animate / [17:24] effects.js파일 / [17:44] 적용값확인 / [18:46] mouseout / [19:39] 적용값확인 / [20:05] backgroundColor animate / [21:09] $('#scroll').mousemove / [21:35] var scroll_top / [22:36] var mheight / [23:26] $('#mouse_axis').html / [24:15] 적용값확인 / [24:48] var top_value / [26:45] top: top_value / [27:29] 적용값확인 / [28:05] 계산식수정 / [28:50] 이미지메뉴 / [29:19] 실습완성본 / [30:27] html구조 / [31:12] 적용값확인 / [31:30] body / [32:15] h1 / [33:27] .menu / [34:13] .menu ul / [35:02] .menu ul li / [35:21] .menu ul li a / [38:05] background 삽입 / [38:24] 적용값확인 / [38:57] min-width:310px / [39:41] $('.menu ul li a').hover / [40:49] width animate / [41:59] 적용값확인 / [43:03] 아웃 animate / [43:39] 적용값확인

13 동적 메뉴제작실습

마우스를 클릭함에 따라 메뉴 리스트들이 유동적으로 변화하는 메뉴를 제작합니다.

40분

책갈피 : [00:05] 동적 메뉴 / [00:20] 실습완성작 / [01:05] html구조 / [02:23] 메뉴구성사항 / [03:22] 적용값확인 / [03:51] * / [04:06] body / [04:38] #ALL / [05:40] .list / [06:39] .list h2 / [07:37] .image / [09:16] .jqueryM / [09:41] background: url / [10:36] dt / [12:28] .list:last-child dt / [13:03] dd / [14:22] .list:last-child dd / [14:46] 메뉴색상일괄지정 / [15:49] display:none / [16:43] var $allDT / [17:56] "cursor": "pointer" / [18:52] var $allDD / [19:49] 적용값확인 / [20:39] $("#ALL").delegate / [21:12] delegate 메서드 / [22:30] hasClass("shadow") / [22:58] e.preventDefault / [24:19] dt에 click이벤트설정 / [26:04] $parentWrap / [26:43] $otherWraps / [27:20] $allDT / [27:47] $allDD.slideUp / [28:02] $allDT.animate / [28:34] $el.animate / [29:09] 적용값확인 / [30:07] next().slideDown / [31:08] $parentWrap.animate / [32:02] addClass("shadow") / [32:25] .shadow / [32:46] 적용값확인 / [33:32] $otherWraps.animate / [34:26] 적용값확인 / [35:40] padding-left:5px / [36:02] current 클래스 / [37:35] dt id="opener" / [38:05] $("#opener").trigger("click") / [38:52] 적용값확인

14 슬라이딩 박스메뉴 제작실습

마우스오버를 함에 따라 독특하게 슬라이딩되는 메뉴를 제작합니다.

41분

책갈피 : [00:11] 슬라이딩 박스메뉴 / [00:22] 실습완성작 / [01:33] html구조 / [02:41] submenu 구조 / [04:21] 적용값확인 / [04:49] body / [05:20] .ALL / [06:09] h1 / [06:38] ul.menu / [07:45] ul.menu li / [08:52] ul.menu li > a / [10:53] ul.menu li a img / [13:10] ul.menu li span.text / [13:47] z-index:50 / [14:12] ul.menu li span.active / [15:45] z-index:10 / [16:31] 텍스트속성적용 / [17:35] span.text_name / [18:23] span.text_subname / [19:37] div.submenu / [20:12] position:absolute / [20:47] div.submenu a / [21:42] div.submenu a:first-child / [22:18] div.submenu a:hover / [22:57] display:none / [24:11] $('#menu > li').bind / [24:37] mouseenter 이벤트 / [25:02] var $el / [25:26] $el.find('img').animate / [26:28] effects 파일추가 / [27:28] 적용값확인 / [28:46] andSelf 메서드 / [29:08] find('.text').animate / [29:43] 적용값확인 / [30:19] .active {height:0} / [30:46] .find('.active').animate / [31:38] 적용값확인 / [32:33] callBack함수설정 / [32:46] var $sub_menu / [33:10] if($sub_menu.length) / [34:49] var left 기호설정 / [36:23] 적용값확인 / [37:43] bind('mouseleave') / [38:23] 적용값확인 / [38:52] $sub_menu.hide().css / [39:38] active 재설정 / [39:57] img 재설정 / [40:07] text 재설정 / [40:26] 적용값확인

API

15 API section 1

add(), addBack(), addClass(), after(), ajaxComplete(), ajaxError()

59분

책갈피 : [00:19] Add 메소드 / [00:36] 필요문서 셋팅 / [00:50] Css 설정 / [01:05] Span 설정 결과 / [01:29] Jquery가 맨마지막에 올때 / [02:06] 실행결과 확인 / [02:42] 결과값에 대한 설명 / [03:31] Add에서 "span"값을 삭제 / [03:43] 실행결과 확인 / [04:26] Add 메소드 설명 / [06:07] Div , span 값 설정 / [06:29] 실행결과확인 / [07:41] P 태그 span 태그 만들기 / [08:03] 실행결과확인 / [08:11] Add 추가값이 없을 경우 결과 확인 / [08:41] 원상태로 되돌리기 / [09:06] Clone().add 추가 / [09:43] 실행결과 확인 / [10:16] P 태그 복제 / [10:47] Span 에 id 값주기 / [11:10] Add 추가값 확인 css 값 확인 / [11:18] 실행결과확인 / [11:30] P 태그와 #a2 값 css 값 확인 / [12:15] 실행결과 확인 / [12:28] Collection / [12:41] Collection 에 css 값 확인 / [12:52] 실행결과 확인 / [13:16] Ul 목록 추가 / [13:14] 기본 li 찾아서 background값 변경 / [13:32] "P" 태그 추가 / [14:04] 실행결과 확인 / [14:20] Add 값에 내용 추가 / [14:58] Add 에 인덱스 순서값 변경 / [15:08] 실행결과 확인 / [15:20] Addback / [15:40] li 목록만들기 / [15:56] 실행결과 확인 / [16:09] $("li.a5).nextAll() / [16:36] 실행결과 확인 / [16:46] $("li.a5).nextAll().addBack() 추가 / [16:57] 실행결과 확인 / [17:46] BR 태그 추가 / [17:56] Before, after 값 / [18:21] 실행결과 확인 / [19:07] Find 메소드 / [19:41] 실행결과 확인 / [20:26] Addclass 추가 / [21:04] $(".before-a1").find("p").addclass("a4") 설정 / [21:22] 실행결과 확인 / [21:46] Addback() 추가 / [22:17] 실행결과 확인 / [22:34] Before-al 명령에 addback() 추가 / [22:36] 실행결과 확인 / [23:06] AndSelf() / [23:22] 기본명령 작성 후 실행결과 확인 / [23:42] Andself() 메소드 추가 / [23:52] 실행결과 확인 / [25:06] Nextall 에 andself 가 있을 경우 / [25:18] 실행결과 확인 / [25:24] Nextall 에 andself 가 없을 경우 / [25:25] 실행결과 확인 / [25:48] Contents() / [26:42] .contents().값 추가 / [27:17] NodeType / [28:07] 요소에대한 node / [28:32] .wrap 메소드 / [28:46] 실행결과 확인 / [29:05] b, i값 설정 / [29:07] 실행결과 확인 / [29:44] 속성 node 타입으로 변경 / [29:51] 실행결과 확인 / [30:03] Text node 타입으로 변경 / [30:36] 실행결과 확인 / [30:53] P 태그에 1개 br 태그 적용 Text node 타입 변경 / [31:07] 실행결과 확인 / [31:36] .wrap("")값 적용 / [31:38] 실행결과 확인 / [31:45] End 후 filter("br") .remove(); / [31:55] 실행결과 확인 / [32:22] .end() 메소드 / [33:20] 기본 div 설정 / [33:22] 실행결과 확인 / [33:34] $("div") 잘못된 명령어 / [34:03] 실행결과 확인 / [34:38] $("bady")로 변경 / [34:39] 실행결과 확인 / [34:56] $("div") 합리화하려면 필요한 end 메소드 / [35:16] 실행결과 확인 / [35:26] End 메소드값 삭제 / [35:32] 실행결과 확인 / [35:51] $("body")에 end 메소드값 적용 / [35:57] 실행결과 확인 / [36:16] End 메소드값 삭제 후 실행결과 확인 / [36:55] Alert("div") end 메소드 없을 경우 / [37:24] 실행결과 확인 / [37:46] Alert("div") end 메소드 적용 / [37:55] 실행결과 확인 / [38:34] .after() 메소드 / [39:18] after 설정 / [39:38] 실행결과 확인 / [40:31] After(document.createTextnode("alzio1")) 생성 / [40:43] 실행결과 확인 / [40:52] After($("b")); 설정 / [41:34] 실행결과 확인 / [41:52] AjaxComplete() 메소드 / [43:03] Ajaxcomplete(function()) / [43:43] Ajaxcomplete 실행시킬 함수 적용 / [44:04] Click(function()) / [44:40] Lode 함수 적용 / [45:23] 실행결과 확인 / [46:21] Button 생성 / [46:31] .ajaxError 메소드 / [46:59] .ajaxError(function()) / [47:27] 실행결과 확인 / [48:00] on, load 함수 적용 / [48:29] 확장자 error / [48:55] 실행결과 확인 / [49:07] Html 확장자 변경 후 실행결과 확인 / [49:39] 팝업에 대한 메소드 설정 / [49:57] 실행결과 확인 / [50:11] 문서가 있을때와 없을때 차이점 / [50:11] 실행결과 확인 / [50:32] AjaxSend() 메소드 / [51:11] Ajaxsend(function(e,xhr,opt) 설정 / [52:34] Button 을 click 했을때 결과값 설정 / [53:16] 실행결과 확인 / [53:34] Lode 부분인 div 가 없을경우 / [53:43] 실행결과 확인 / [54:12] Append 값 출력할 수 없을때 결과값 / [54:19] 실행결과 확인 / [54:33] 문서값이 잘못되었을때 / [54:37] 실행결과 확인 / [54:54] Append 값이 제대로 출력될때 / [55:03] 실행결과 확인 / [55:24] B코드 적용 / [55:30] 실행결과 확인 / [56:07] Append 를 text 로 변경 / [56:13] 실행결과 확인 / [56:26] 원상태로 변경 후 실행결과 확인 / [56:50] 에러발생시 팝업띄우기 / [57:12] Ajax Error 메소드 / [57:19] AjaxError(function()에 areart 값 설정 / [57:57] 실행결과 확인 / [58:07] 문서가 없을 경우 에러 확인 / [58:28] 실행결과 확인

16 API section 2

ajaxStart(), ajaxStop(), ajaxSuccess(), All Selector(), andSelf(), animate(), append(), appendTo(), attr()

58분

책갈피 : [00:00] Start 메소드 / [00:27] 버튼 생성 / [00:51] 문서가 로드됐을때 함수 선언 (document).ready(function() / [01:08] ajaxStart / [01:26] 스타일시트 적용 / [01:36] 결과 확인 / [01:45] 버튼이 클릭됐을때 페이지를 로드해 오는 ajax 구동 / [02:29] 마무리 괄호 / [02:36] 결과 확인 / [03:06] 문서 확장자 변경 / [03:55] 결과 확인 / [05:02] ajax 구동의 문제점 / [05:44] ajaxStart() / [06:20] div 추가 / [06:32] 결과 확인 / [06:42] $(document).ajaxStart(function() / [06:52] ajax가 시작됐을때 텍스트 출력 / [07:13] ajax 구동 실패 예제 / [08:16] 결과 확인 / [08:38] ajax 구동 성공 예제 / [08:48] 결과 확인 / [09:05] 다른 위치의 문서인 경우 / [09:49] 결과 확인 / [10:18] 메서드를 올바르게 사용하는 방법 / [10:59] 내용 수정 / [11:14] html 메소드 사용 / [11:42] 결과 확인 / [11:46] 문서를 불러오지 못했을 경우 / [12:03] ajaxStop 메소드 / [13:25] $(document).ajaxStop(function() / [13:51] 텍스트 출력 / [14:08] 결과 확인 / [14:18] 완료가 되지 않았을 경우 / [15:33] .hide() 처리 / [15:58] "성공시 사라짐" 텍스트 출력 후 숨김 / [16:19] 결과 확인 / [16:38] ajaxSuccess 메소드 / [17:11] $(document).ajaxSuccess(function() / [17:21] 클릭했을때 성공적으로 로드되는 부분 정의 / [17:34] 결과 확인 / [17:41] 클릭했을때 성공적으로 로드하지 못하는 부분 정의 / [17:46] 결과 확인 / [18:14] alert 으로 메세지 팝업 / [18:29] 결과 학인 / [18:54] All Selector 메소드 / [19:17] 선택되는 요소 / [19:41] var elementCount / [20:38] 결과 확인 / [21:34] style 추가 / [22:17] a2-5 클래스를 전체 선택하는 코드 / [22:42] 결과 확인 / [23:25] 개체가 나오도록 생성 / [23:58] andSelf 메소드 / [24:34] 메뉴 목록 만들기(ul, li) / [24:42] nextAll(), andSelf() / [26:43] 하위 메뉴 만들기 / [26:50] 결과 확인 / [27:05] animate 메소드 / [27:32] 버튼 생성 / [27:46] style="background-color:#000;width:100px;height:200px;" / [27:53] 결과 확인 / [28:05] animate 되는 높이 값 변경 / [28:35] 복구 버튼 생성 / [28:55] 복구 버튼 클릭시 내용 작성 / [29:21] 결과 확인 / [29:47] animate 메소드 응용 / [30:18] 텍스트 컬러 변경, widht 값 설정 / [31:03] opacity / [31:40] margineLeft / [31:48] animate 되는 시간 설정 / [32:38] 주석 처리 / [33:01] 일정 숫자만큼 왼쪽, 오른쪽으로 이동하기 / [33:39] 결과 확인 / [34:00] 이동하는 속도 변경하기 / [34:36] position: absolute / [35:16] 주석 처리 / [35:39] animate 이중처리 / [36:23] widht, fontSize 변경하기 / [36:30] queue: false / [36:57] duration / [37:09] 속성값(properties, duration, easing, complete) / [37:51] 주석 처리 / [37:56] animated Selector / [38:21] 버튼, div 생성 / [38:40] toggleClass, slideToggle / [39:11] css 정의 / [39:39] animateIt() / [40:19] 결과 확인 / [40:36] slideToggle 속도 변경 / [40:54] 클릭했을때 선언 / [41:46] append 메소드 / [42:05] div 추가 / [42:10] $ ("div").append / [42:28] b 태그 추가 / [42:52] 결과 확인 / [43:23] $ ("div").append(document.createTextNode("ALZIO 입니다.")); / [44:08] 통합 시키기 / [44:34] $ ("div").append($("b")); / [45:03] append 메소드 응용 / [45:09] em 태그 추가 / [45:39] p 태그 추가 / [46:33] h1 태그 추가 / [46:56] span 태그 / [47:08] 오류 확인 및 소스 수정 / [48:18] 버튼 생성 후 컨텐트 추가 / [49:25] 결과 확인 / [49:37] appendTo 메소드 / [50:06] h3, span 추가 / [50:22] $ ("h3").appendTo("span"); / [50:43] div class 추가 / [51:31] 결과 확인 / [52:24] attr 메소드 / [53:07] 컨텐트 추가 / [53:24] script 작성 / [53:46] 변수 선언 / [54:01] 변수를 텍스트로 출력 / [54:19] 결과 확인 / [54:29] 변수명 정의 / [54:55] 버튼, 이미지 가져오기 / [55:23] 버튼을 클릭했을때 함수 / [55:36] $("img").attr("widht", "70%"); / [56:09] 결과 확인 / [56:15] 구체적인 내용 작성 / [56:37] after / [57:03] b 태그 / [57:37] 결과 확인

17 API section 3

[name|=”value”], [name*=”value”], [name~=”value”], [name$=”value”], [name=”value”], [name!=”value”], [name=”value”], .before(), .bind(), .hover(), .focus(), .blur(), :button Selector, callbacks, change(), :checkbox, :checked

1시간 10분

책갈피 : [00:03] AttributeContainsPrefixSelector / [00:29] name / [00:58] hreflang / [02:04] .css / [02:59] Value값이 없을때의 실행 / [03:08] en / [03:25] Value값이 맞을때의 출력 / [03:37] 큰따옴표와 작은 따옴표의 바른 사용 / [04:12] en all / [04:30] 링크언어가 잘못사용된 응용예제 / [06:01] 내용확인 / [06:35] name, value / [07:13] input / [07:38] input의 이름, 그 값 / [08:10] Spx solid / [08:56] *의 기능 / [09:03] jQuery의 특성 / [10:17] ~의 기능 / [10:53] input에 text를 출력 / [11:51] ~를 제거했을시의 출력 / [12:47] $의 기능 / [13:14] $를 사용한 출력 / [14:06] 대, 소문자에 따른 차이 / [15:05] [name="value"]의 기능 / [16:03] radio버튼의 value / [17:03] p태그 / [17:29] 대문자로 된 내용 출력확인 / [18:04] DIV / [18:58] !의 기능 / [20:15] next태그가 없을시의 출력 / [20:43] Div태그를 사용한 출력 / [21:36] selector값에 대한 내용 / [22:17] 곡절부호의 기능 / [23:09] before() / [24:08] P class / [24:55] h1 / [26:13] Before에 의한 출력 / [26:32] Before 응용 / [27:46] bind / [28:10] click / [28:28] bind의 특성 / [29:19] 파라미터값 / [30:36] click살펴보기 / [31:09] alert / [31:46] click과 bind의 차이 / [32:33] 핸들러 / [33:14] script설명 / [34:30] mouseenter, mouseleave / [34:53] toggleClass / [35:00] style / [35:12] 마우스오버를 사용한 결과 출력 / [36:01] blur / [36:33] 출력 / [37:12] this, background-color / [37:46] focus / [38:41] hover / [38:53] over, click, out 에 대한 출력 / [39:14] button Selector / [39:52] border-top / [40:07] :의 유무에 따른 차이 출력 / [41:06] input type / [41:46] button class / [42:24] callbacks.add / [42:52] callbacks함수에 대해서 알아보기 / [43:20] hide / [45:47] callbacks의 유무에 따른 차이 출력 / [47:16] callbacks, add, fire ,remove, has, fireWith, disable / [49:31] document.writｅ / [51:13] add / [52:38] 결과 확인 / [52:47] fire / [53:27] br태그 / [53:38] 줄바꿈 생성결과 / [53:57] change / [54:20] 핸들러 / [54:52] 인풋에 팝업을 띄우는 방법 / [55:14] input / [55:29] 결과확인 / [56:05] 문자입력해서 팝업띄우기 / [57:49] div / [59:28] select / [01:00:22] selected / [01:01:49] checkbox / [01:02:23] type=checkbox / [01:02:33] b style / [01:05:19] borders;solid / [01:06:45] checked 알아보기 / [01:08:42] countChecked / [01:09:14] checkbox

18 API section 4

Child Selector (“parent > child”), .children(), Class Selector, clearQueue(), click(), clone (), closest(), :contains(), 2contents(), context, data(), dblclick (), deferred always (), done(), fail(), delay(), delegate(), descendant Selector, detach(), die(), :disabled, each(), Element Selector, empty(), :empty Selector, :enabled Selector, end(), eq(), :eq() Selector, error()

1시간 9분

책갈피 : [00:01] Child Selector / [00:53] script / [01:07] css / [01:30] li / [02:21] ul / [03:35] 코드 보기 / [04:10] span / [05:13] solid blue / [05:57] class / [07:06] 실행 결과 / [07:13] 클리어큐 메소드 / [07:46] width, height / [08:03] animate / [08:25] 실행 결과 / [08:39] click / [08:48] start, stop / [09:24] 예약된 애니메이션 / [10:21] 결과 확인 / [10:52] click메소드 설명 / [11:45] slideUp / [11:59] clone / [12:28] 증식 / [13:50] function / [14:20] 결과 확인 / [14:32] 카피 / [14:56] closest / [15:11] parents / [16:25] 결과 확인 / [17:03] 백그라운드 결과값 / [17:57] contains / [18:29] 폼관련 속성 / [18:57] div / [19:42] 콜론 / [20:31] b태그 / [20:41] return.this.nodeType / [20:51] 결과 확인 / [21:09] filter / [21:42] context / [22:09] 출력 / [22:37] document.body / [22:39] nodeName / [23:04] br 태그 / [23:15] 결과 확인 / [24:19] data / [25:18] first, last / [26:07] text / [27:30] 버튼 출력 / [28:55] start버튼, stop버튼 / [29:25] 오류 / [29:55] dblclick / [30:50] hide / [31:19] deferred.always / [31:43] get, always, alert / [32:27] deferred.done / [33:22] 팝업 생성 / [34:08] deferred.fail / [34:28] delay / [35:02] display.none / [35:23] fadein, fadeout / [36:21] delegate / [37:21] after / [38:09] span, p / [38:33] dequeue / [39:52] 결과 확인 / [41:58] descendant Selector / [43:35] detach / [44:40] p태그의 분리 / [45:08] p태그의 제거 / [45:52] die / [46:55] 세가지 장착 / [47:58] disabled Selector / [49:23] each / [50:17] index, value / [51:13] Element Selector / [53:18] empty / [53:50] 실습 / [54:32] 응용실습 / [55:26] empty Selector / [56:00] text, css / [56:33] 참고예제 / [56:57] enabled Selector / [57:59] input / [58:46] email / [59:42] id / [01:00:17] end / [01:01:03] 코드 보기 / [01:02:23] ul class, li class / [01:02:56] p, span / [01:03:46] end제거시 결과 / [01:04:10] eq / [01:05:25] eq값 변경 결과 / [01:05:52] eq Selecter / [01:06:42] error / [01:07:08] img / [01:08:18] replaceWith

19 API section 5

:even, event.currentTarget, event.data, event.delegateTarget, event.isDefaultPrevented(), event.isImmediatePropagationStopped(), event.namespace, event.pageX, Y, event.preventDefault(), event.relatedTarget, event.result, event.stopImmediatePropagation(), 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

1시간 2분

책갈피 : [00:05] 선택기 / [00:54] ul목록의 li / [01:08] 짝수선택기 / [01:19] 실행 결과 / [01:46] tr태그 / [01:56] target / [02:27] 클릭 이벤트 / [03:04] 실행 결과 / [03:21] p, span, h2 / [03:33] 선택적 객체 / [04:07] 출력태그 추가 / [04:53] li, index / [05:23] 선택적 내용 보기 / [06:05] delegateTarget / [07:25] background / [07:52] 결과 확인 / [08:17] isDeafaultPrevented / [09:28] 내용 확인 / [09:57] a / [10:31] islmmediatePropagationStopped / [11:12] 내용 확인 / [11:33] isPropagationStopped / [12:17] namespace / [13:46] span / [14:34] 실행 화면 / [15:05] trigger / [15:20] pagex, pagey / [16:02] mousemove / [16:48] 내용 확인 / [17:09] preventDefault / [18:01] relatedTarget / [18:53] mouseover / [19:41] relatedTarget메소드 적용결과 / [20:36] nodeName / [20:56] 내용 확인 / [21:13] event.result / [22:31] 결과값 확인 / [22:50] result메소드 적용에 따른 차이 / [23:30] stoplmmediatePropagation / [23:58] 클릭 이벤트 / [24:44] 내용 확인 / [25:19] alert응용 예시 / [26:22] stopPropagation / [27:12] 결과 확인 / [28:28] target / [29:35] 결과값 확인 / [30:10] nodename을 추가한 결과 / [31:19] timeStamp / [32:08] 내용 확인 / [32:20] type / [[33:32] 마우스 이벤트 / [34:07] which / [34:54] keydown / [35:58] 결과값 확인 / [36:20] fadeIn, fadeOut / [37:16] fadeTo / [38:10] fadeToggle / [38:46] 내용 확인 / [39:02] file Selector / [41:19] 내용 확인 / [41:36] find / [42:19] finish / [43:06] 내용 확인 / [43:35] first / [44:20] child Selector / [45:41] first-of-type Selector / [46:12] 내용 확인 / [46:24] first Selector / [47:01] focus / [47:35] input id, span id / [48:15] focus Selector / [48:49] 내용 확인 / [49:06] input값을 다르게 한 결과 / [49:45] focusin, focusout / [51:15] fadeOut / [51:48] 딜레이를 준 결과 / [52:07] focusout / [52:48] get / [54:16] 결과값 확인 / [54:47] gt Selector / [56:01] has / [58:05] ul, li / [58:52] has selector / [59:50] hasClass / [01:00:47] False인 결과 / [01:01:09] true인 결과

20 API section 6

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(), .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()

1시간 7분

책갈피 : [00:02] height메소드 / [00:31] 실행 / [01:04] 정해진 값을 일괄적으로 변경하는 예제 / [01:56] 클릭한 결과 확인 / [02:05] hidden Selector / [02:40] 강제적인 출력 / [03:09] 200을 적용한 값 / [03:13] image Selector / [03:51] type / [04:06] index / [05:26] input Selector / [06:14] insertAfter / [06:52] 다른 예제 적용 / [07:36] 실행 / [07:53] insertBefore / [08:23] is / [09:09] 실행 결과 / [09:26] divdivdiv의 의미 / [09:52] keypress / [10:08] script코드 / [10:36] keypress와 keydown의 차이 / [11:21] keydown메소드 / [11:57] keyup / [12:44] keydown / [13:14] lang Selector / [14:13] last-child Selector / [16:05] script 보기 / [18:09] It Selector / [19:05] 실행 / [19:13] map / [19:46] 콜백함수 / [20:35] 실행 / [20:50] mousemove / [21:33] 새로고침 / [21:47] not Selector / [22:51] nth-child Selector / [24:44] offset / [25:47] 내용 확인 / [26:32] offsetParent / [27:38] 새로고침 / [28:45] one / [29:29] only-child Selector / [30:16] only-of-type Selector / [31:22] password Selector / [32:00] position / [32:47] prev / [33:48] prevAll / [34:40] prevUntil / [35:16] prop / [36:53] 줄바꿈 / [37:01] radio Selector / [38:00] wrap의 기능 / [38:30] removeAttr / [39:20] removeData / [41:26] 버튼 클릭해서 내용확인 / [42:13] removeProp / [43:26] append / [43:59] replaceAll / [45:04] reset Selector / [45:41] resize / [46:45] 사이즈 조절로 값 변환하기 / [47:50] root Selector / [48:23] 실행 / [48:41] 추가적인 실습 / [49:00] scroll / [50:07] scrollLeft / [50:42] 실행결과 확인 / [51:00] top 응용하기 / [51:16] select / [51:51] fadeOut한 결과값 확인 / [52:11] serialize메소드 / [53:25] serializeArray / [54:08] each / [54:19] field / [54:57] size / [55:44] slice / [56:21] submit / [57:15] 결과 확인 / [57:25] submit Selector / [57:50] text Selector / [58:11] toArray / [59:40] 출력 결과 확인 / [59:51] triggerHandler / [01:00:44] 새로고침 / [01:00:53] uunbind / [01:01:13] function clickss / [01:02:49] 실행 / [01:03:17] undergate / [01:03:44] delegate / [01:04:38] unwrap / [01:05:20] visible Selector / [01:05:55] wrapAll / [01:06:47] 결과 확인 / [01:06:58] wrapInner

샘플확인 : 알지오 검색후 -> 강의검색란 -> jquery [입문]