IT전문교육 의 리더!

HOME>IT전문가>Javascript / jQuery>jquery [입문]

jquery [입문]

20회차 속성과정|전체 : 11시간 37분|회차당 평균 : 34분51초
jQuery / 2개월
jQuery [입문 + 고급] / 4개월
200,000 125,000
  • 전문강사 : 채명수/김진성
Study Guides
최근 2년간, 웹표준 퍼블리셔 및 모바일홈페이지 제작 강의를 이용하신 분들의 요청강의입니다. javascript 라이브러리의 형태로 기본적으로 선수과정은 반드시 학습하실 것을 권장합니다. 버전이 지속적으로 업데이트 되어 변경되거나 없어진 내용들은 해당코드들을 이용하여 사용방법을 반드시 숙지하게되면 웹사이트 수정이나 개발을 쉽게 할수 있습니다.
 
  • 0123분 절대퀄리티 Jquery 입문과정 - Chapter 1

    책갈피 : [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] 해당요소 클릭해서 진행

  • 0231분 절대퀄리티 Jquery 입문과정 - Chapter 2

    책갈피 : [00:05] Document/[00:29] Click 메소드사용/[00:55] 실행결과 확인/[00:44] Span을 태그로 변경/[00:52] 실행결과 확인/[01:32] Click를 dbclick로 변경/[01:41] 새로고침 실행결과확인/[01:50] Mouseenter 함수 hide/[02:15] 실행결과 확인/[02:25] P값을 kek로 변경/[02:40] 실행결과 확인/[03:06] Alert("ok!!!") 함수/[03:20] 실행결과 확인/[03:31] 설정변경/[04:02] 실행결과 확인/[04:35] Mousedown 함수/[04:44] Mouseup 함수/[04:58] 실행결과 확인/[05:13] Hover 함수/[06:19] Focus 함수/[06:35] Input 함수/[06:40] Css값 지정/[07:11] 실행결과 확인/[07:29] 메소드 하나이상 사용내용/[07:56] P 태그를 할때마다 변경내용/[08:00] 실행결과 확인/[08:27] 요소에 여러개이벤트를 중첩/[08:37] 실행결과 확인/[09:22] 실행결과 확인/[09:42] 결과 함수내용 확인/[10:38] 스르륵숨기기/[11:02] 실행결과 확인/[11:35] Button.click."P" 태그 설정/[11:41] Toggle함수/[11:44] 실행결과 확인/[12:06] Toggle함수 스르륵숨기기/[12:25] 실행결과 확인/[12:53] 버튼클릭시 아이디값 4개 설정/[13:13] Fadein 함수/[13:47] 버튼액션 설명/[14:02] 실행결과 확인/[14:35] Fade out 함수/[14:59] 실행결과 확인/[15:18] Fadetoggle 함수/[15:37] 실행결과 확인/[15:52] Fadeto 함수/[16:06] 알파값주기/[17:02] 실행결과 확인/[17:14] 설정변경/[17:17] 실행결과 확인/[18:09] Slidedown 함수/[18:24] Id확인/[18:48] 실행결과 확인/[19:30] Slideup 함수/[19:40] 실행결과 확인/[20:09] SlideToggle 함수/[20:56] Animate 메소드/[21:22] 실행결과 확인/[22:07] 절대위치 함수/[22:27] 실행결과 확인/[23:08] 설정변경 opacity값 설정/[24:14] 실행결과 확인/[24:33] 크기변경/[25:17] 실행결과 확인/[25:37] 실행결과 먼저보기/[26:10] Height : toggle 설정/[27:31] 새로고침 실행결과 확인/[27:46] Div.animate 함수 설정/[28:21] 실행결과 확인/[28:09] 폰트사이즈 변경/[28:23] 실행결과 확인/[29:20] Slidedown / stop함수/[29:34] 버튼생성/[30:34] 실행결과 확인

  • 0323분 절대퀄리티 Jquery 입문과정 - Chapter 3

    책갈피 : [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 결과 확인

  • 0429분 절대퀄리티 Jquery 입문과정 - Chapter 4

    책갈피 : [00:04] 메소드값 설명/[00:14] 링크값 지정/[00:28] 실행결과 확인/[00:41] 실행결과내용 지정/[01:47] 속성값 변경/[01:57] 저장 후 실행결과 확인/[02:55] 풍선도움말 지정/[03:06] 추가된 내용/[03:29] 저장 후 실행결과 확인/[04:10] 새로운 함수에 새로운 속성 내용추가/[04:29] Value 함수와 return origvalue 함수 지정/[04:37] 저장 후 실행결과 확인/[05:41] 결과값 주소 변경/[05:54] 이전값 불러올때 캐쉬와 쿠키삭제/[06:06] 저장후 실행결과 확인/[06:52] Text 내용 추가하기/[07:25] P 태그 기본내용 뒤에 콘텐츠 추가/[07:58] 버튼2 추가/[08:22] Append 중요/[08:27] 저장후 실행결과 확인/[09:12] Prepend 지정/[09:43] 저장후 실행결과 확인/[10:21] JavaScript 방식적용/[10:48] 상황실현의 예/[11:29] Text 를 돔방식으로 출력/[12:13] 무한증식 설정/[12:28] 저장후 실행결과 확인/[13:44] 버튼 1에 before 지정/[14:10] 버튼 2에 after 지정/[14:24] 저장 후 실행결과 확인/[14:43] Remove/[15:40] 내용을 삭제하는 제거버튼 지정/[16:06] 저장 후 실행결과 확인/[16:57] 자식요소만 제거하기/[17:32] 저장 후 실행결과 확인/[17:50] Alzio1에 대한 자식요소만 제거한 내용/[18:26] P태그를 remove /[18:41] 3가지 예를 만듬/[19:00] 저장 후 실행결과 확인/[19:05] 결과에대한 설명/[19:28] 클래스 2 추가후 설정 변경/[20:01] 저장후 실행결과 확인/[20:47] Css클래스값 추가 css값에 반영 변경/[21:08] Addclass("read")/[21:38] Div 추가/[21:53] Style 시트 생성/[22:07] 반영될 상황 생성/[23:00] 저장 후 실행결과 확인/[23:42] 하나의 요소에 여러가지 css적용/[24:32] 저장 후 실행결과 확인/[24:53] 클래스가 정해져있는 웹문서에 remove/[27:05] 실행결과 확인/[25:19] Jquery 설명/[26:21] 클릭해서 팝업뜰때 실제 css값/[27:02] 실행결과 확인/[27:25] Background 값 맨처음 값 인식/[28:18] ("P").css("gackground-color","blue");설정/[28:46] 저장후 실행결과 확인/[28:52] ("p').css("color","fff")'값 설정/[29:10] 저장 후 실행결과 확인

  • 0529분 절대퀄리티 Jquery 입문과정 - Chapter 5

    책갈피 : [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] 한글문서 불러올때 주의점

  • 0635분 절대퀄리티 Jquery 입문과정 - Chapter 6

    책갈피 : [00:00] Text 를 html로 변경/[00:11] 실행결과 확인/[01:32] 문서로드가 필요한 이유/[01:49] Css 가 대상문서일 경우/[01:49] 실행결과 확인/[02:03] 클릭전.후 다를때/[02:16] Css 해지 class값 설정/[02:24] 실행결과 확인/[03:07] width 값 기본틀이 정해졌을때 결과/[03:38] margin, padding 지우기/[03:47] 실행결과 확인/[04:32] Load 성공, 실패 팝업/[05:14] 필터링/[05:59] Css 기본 기준 설명/[06:17] 실행결과 확인/[06:44] 색상 변경/[06:48] 실행결과 확인/[07:06] 설정 변경/[07:09] 실행결과 확인/[08:31] Width 값 적용 설명/[08:47] 실행결과 확인/[08:58] Id 값 불러오기/[09:28] 생각 값 팝업만들기/[09:52] If문 설정/[10:10] success, error 설정/[10:51] 실행결과 확인/[11:27] Id 값 없애기/[11:30] 실행결과 확인/[11:54] 실패값 설정/[12:01] 실행결과 확인/[13:16] alert 값 새로 설정/[13:40] 실행결과 확인/[14:32] 줄바꿈결과 확인/[14:41] Error 결과 확인/[15:17] 기본 Jquery 삭제/[15:46] Jquery를 자식 메소드로 설정/[16:02] children().css값 설정/[16:38] Class 값 설정/[17:05] 실행결과 확인/[18:40] "P.aa" 값 설정/[18:59] 실행결과 확인/[19:29] class="a" 값 중복설정/[19:44] 실행결과 확인/[20:14] Find 명령어/[21:08] Find 값 설정/[21:13] 실행결과 확인/[21:32] div 에 모든자손값 확인/[21:58] 실행결과 확인/[22:28] 형제,자매 만들기/[23:06] 기존값에 h1추가/[23:51] 실행결과 확인/[25:13] Siblings 명령어/[25:38] 실행결과 확인/[26:01] next 명령어/[26:46] nextAll 명령어/[27:11] 실행결과 확인/[27:16] nextuntil 명령어/[28:02] 실행결과 확인/[28:27] 필터링/[28:32] first 메소드/[28:55] div내 P 태그 설정/[29:35] 실행결과 확인/[29:58] 설정변경/[30:13] 실행결과 확인/[30:33] last 메소드/[30:38] 실행결과 확인/[30:46] eq(3) 설정/[32:04] 실행결과 확인/[32:28] 결과값에 대한 설명/[32:53] eq 값 변경후 실행결과 확인/[33:22] filter 에 class값 설정/[33:47] 실행결과 확인/[34:01] not 값 설정/[34:31] 실행결과 확인

  • 0736분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 1기본문법과 html

    책갈피 : [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()

  • 0833분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 2CSS조작 제이쿼리 이벤트

    책갈피 : [00:15] p, em/[00:45] remove()/[01:06] remove결과값/[01:44] css추가/[02:02] addClass()/[02:56] removeClass()/[03:33] css()/[04:10] css 복수 적용/[05:00] 제이쿼리 문법/[05:45] text(), css()/[07:34] $("p").text("로딩 후")/[08:00] $(document).ready(function()/[10:09] p.alzio 스타일 설정/[10:53] click이벤트/[11:08] $(this)/[11:48] slideUp()/[12:32] hover이벤트/[13:40] background:orange/[15:18] button, img/[15:33] attr() 변경/[19:21] $("a:eq(0)").click() 오류/[19:31] return false/[19:21] this 사용의 간결함/[20:34] this 결과값확인/[21:16] button추가/[21:31] mousedown이벤트/[22:06] mouseup이벤트/[22:27] toggle 실습1/[25:02] toggle 실습2/[26:36] mouseover이벤트/[27:14] mouseout이벤트/[27:40] mousemove이벤트/[28:48] e.page()/[29:19] 함수값과 텍스트의 조합/[30:39] button 추가/[31:00] alert()/[31:46] one()/[32:45] unbind()

  • 0944분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 3이벤트, 폼태그

    책갈피 : [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] 결과값확인

  • 1023분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 4Ajax의 활용, Show함수

    책갈피 : [00:00] ajax란?/[02:26] button, div 추가/[02:50] load로 텍스트 파일 불러오기/[03:19] loadfile.txt/[04:20] 결과값확인/[04:57] load로 html 파일 불러오기/[04:58] 결과값확인/[06:28] load("01강.html li")/[10:08] ajax 문법/[10:40] url값, dataType값/[10:59] success값/[11:25] $.ajax 소스 붙여넣기/[12:00]AjaxXML.xml/[13:58] dataType:'xml'/[14:15] data 파라미터/[14:38] $("item",data)/[15:17] each()/[16:06] $("dl").append/[16:44] dt, a href값 반환/[17:42] + 연산자/[18:08] $("title",this).text()/[18:34] 닫는 dt, 닫는a, dd값 반환/[18:48] $("description",this).text()/[19:03] 닫는 dd값 반환/[19:33] 결과값확인/[20:01] button, div, img 추가/[20:47] show함수/[21:44] show함수 문법/[22:55] display:none/[23:05] $("divl").show/[23:12] 결과값확인

  • 1138분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 5animate

    책갈피 : [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수정

  • 1239분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 6슬라이드 갤러리

    책갈피 : [00:07] 스트라이프 테이블/[01:14] table추가/[01:34] jqueryCSS.css/[01:55] css3 셀렉터 적용/[02:10] th:nth-child(odd)/[02:29] th:nth-child(even)/[03:36] 적용값확인/[04:55] .odd , .even/[05:41] 유지보수 불편/[07:45] table추가/[08:12] $("th:nth-child(odd)")/[08:56] 홀수 예제/[09:38] $("tr:nth-child(even)")/[10:46] 적용값확인/[11:59] 행 마우스오버 효과/[12:47] ("tr:not(:first-child)")/[13:25] addClass("point")/[13:50] removeClass("point")/[14:12] .point/[14:27] 적용값확인/[14:47] 열 마우스오버 효과/[15:00] 전체코드 분석/[15:49] td:nth-child/[18:33] size()/[18:57] %연산자/[20:42] 1 더하기/[21:52] removeClass("point")/[22:00] 적용값확인/[22:41] 이미지 갤러리/[23:36] div, ul, li 추가/[24:15] 적용값확인/[24:54] $("#menu a").click()/[25:32] return false/[26:02] 적용값확인/[27:02] $("#main img").before()/[29:35] fadeOut()/[29:47] $("#main img:last")/[31:04] 적용값확인/[33:02] 슬라이드 이미지 갤러리/[33:13] HTML태그 지정/[34:03] 적용값확인/[35:44] $("img.next").click()/[36:16] animate()/[37:37] $("img.prev").click()/[38:27] 적용값확인

  • 1354분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 7Accordion, Tooltip

    책갈피 : [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] 적용값확인

  • 1458분 Jquery의 핵심을 꿰뚫는 스페셜 강의 - Chapter 8Drop-down, Modal, Floating

    책갈피 : [00:05] Drop-down menu1/[00:27] 메뉴 태그 추가/[01:18] css적용/[01:32] 마우스오버 처리/[01:48] 적용값확인/[02:18] Drop-down menu2/[02:27] $(".sub").hide()/[07:01] ">ul"/[07:36] 메뉴구조/[08:07] 적용값확인/[08:48] fadeIn, fadeOut/[09:12] 롤오버이미지/[11:18] ul, li 추가/[13:17] 속성 셀렉터/[14:09] $(this).attr()/[15:57] 적용값확인/[17:56] Modal Window1/[18:11] 모달윈도우 구성요소/[18:41] 모달윈도우 표현방식/[19:34] #Black/[19:47] #Main/[20:01] 적용값확인/[21:28] dispaly:none/[21:42] h1, ul, li 태그/[21:59] class 지정/[22:07] 적용값확인/[22:37] $("body").append()/[23:24] display:none/[23:55] $("a.modal").click()/[24:16] $("#Main").html()/[25:41] 적용값확인/[26:45] $("#Black").click/[27:25] 적용값확인/[28:34] Modal Window2/[29:03] css, html적용/[29:41] dl, dt, dd 태그/[31:38] 적용값확인/[31:40] $("dd").hide()/[32:11] $("body").append()/[32:46] $("dt").click()/[32:55] $("#Main").css()/[34:21] 적용값확인/[35:14] marginTop값/[35:24] 수식과 텍스트 결합/[36:56] return false/[37:10] 적용값확인/[37:27] $("#Black").click/[38:24] Floating Window/[39:27] a, div 태그/[41:07] dl, dt, dd 태그/[44:09] $(".open").click/[44:23] fadein/[44:53] 적용값확인/[45:20] $(".close").click/[46:08] 적용값확인/[46:59] 전체코드해석/[47:22] 마우스위치 계산/[50:07] $("#Window").offset()/[51:39] data()/[52:24] $(document).mousemove/[52:40] $("#Window").css/[52:55] 마우스 x,y좌표/[55:59] mouseup()/[56:50] 적용값확인

  • 1538분 만족도 100% 마지막 Jquery 과정 - Chapter 1Validation, 수식

    책갈피 : [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

  • 1624분 만족도 100% 마지막 Jquery 과정 - Chapter 2에러처리

    책갈피 : [00:22] 라디오 버튼 검사/[00:37] filter/[00:47] required/[01:12] if조건문/[01:37] input type="radio"/[02:20] $(":radio[name=""]:checked")/[02:40] 체크될 셀렉터/[02:51] attr/[02:55] $(this)/[03:14] name="school"/[03:46] html의 name속성/[04:09] size()== 0/[04:53] 비교 연산자/[05:12] 적용값 확인/[05:44] each/[06:39] 체크박스 검사/[08:02] $(".checkboxRequired")/[08:43] prepend()/[10:02] prepend 위치확인/[12:27] dl dd p.error/[13:05] before 출력값/[13:40] prepend 출력값/[15:13] 전체 에러 처리/[16:02] ("p.error").size()>0/[16:24] animate()/[16:55] first셀렉터/[17:07] offset함수/[17:43] addClass/[18:30] dl dd.error input/[18:33] 적용값 확인/[19:20] 스크롤 위치/[20:21] offset().top 수정/[21:26] return false/[22:11] 적용값 확인/[23:31] 유효성검사 주의사항

  • 1729분 만족도 100% 마지막 Jquery 과정 - Chapter 3Sliding Window

    책갈피 : [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] 결과 확인

  • 1833분 만족도 100% 마지막 Jquery 과정 - Chapter 4Paging 효과

    책갈피 : [00:03] Paging 효과/[01:10] Paging 완성작/[03:12] HTML 구성/[04:15] p 태그/[04:31] ul class="number"/[05:12] CSS 적용/[06:11] .number li a.selected/[06:47] 적용값 확인/[07:36] a 링크값/[08:35] page1~3.html/[09:57] div id="content"/[10:06] 적용값 확인/[12:24] .question 적용/[13:58] 초기상태/[14:14] load()/[14:29] attr/[15:42] page1 살펴보기/[15:58] 적용값 확인/[16:28] addClass("selected")/[16:31] 적용값 확인/[18:22] click 이벤트 설정/[18:54] return false/[19:21] $("#content").html/[19:56] 적용값 확인/[20:55] date/[20:57] $("#content").data/[22:26] $('html,body').animate/[22:36] scrollTop:/[22:46] normal, swing/[23:39] offset().top/[24:26] 적용값 확인/[25:32] 콜백함수/[26:18] load 함수/[28:14] 적용값 확인/[31:02] removeClass("selected")/[31:08] 적용값 확인/[31:23] removeClass 삭제/[31:47] return false/[31:56] 결과 확인

  • 1929분 만족도 100% 마지막 Jquery 과정 - Chapter 5jQuery 플러그인

    책갈피 : [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]]

  • 2049분 만족도 100% 마지막 Jquery 과정 - Chapter 6동적인 이미지, 탭패널

    책갈피 : [00:13] pic메뉴/[00:47] jquery.interface.js/[01:01] HTML 구조/[01:58] CSS 적용/[02:29] 적용값확인/[02:54] $('#alzio').Fisheye/[03:11] 적용값확인/[03:58] items/[04:03] container/[04:19] itemsText/[04:40] itemWidth, maxWidth/[05:17] proximity/[05:50] halign/[07:21] span위치 변경/[07:48] bottom: 0px/[07:52] 적용값 확인/[09:50] 실습 완성본/[11:19] html구성/[11:47] div class="item"/[12:14] 이미지 링크/[12:29] div class="text"/[13:27] 적용값 확인/[14:04] body/[14:35] s.item/[15:07] 적용값 확인/[15:29] margin:4px/[16:14] overfolw:hidden/[16:17] position:relative, float:left/[16:55] .item .text/[17:39] opacity:0.75/[17:42] display:none/[18:06] 적용값 확인/[18:15] display:none 주석처리/[18:33] img 주석처리/[19:08] .item .text a/[19:19] font-weight:bold/[19:32] 적용값 확인/[19:42] padding:5px/[19:58] display:block/[20:18] .item .text p/[20:21] margin, paddin/[21:05] .item img/[21:09] position:absolute/[21:29] .clear/[21:32] clear:both/[22:03] 적용값 확인/[23:16] var move, var zoom/[23:50] $('.item').hover/[25:34] var width, var height/[25:58] animate 구현/[26:58] 적용값 확인/[27:50] find('.text').fadeIn/[28:21] 마우스오버 animate 구현/[29:52] duration/[30:22] find('.text').fadeOut/[30:32] 적용값 확인/[31:02] 실습 완성본/[32:03] jquery15_2.html/[32:11] html 구성/[32:34] div id="logo"/[32:58] div id="tab"/[33:22] 적용값 확인/[33:26] h2/[34:37] body/[34:47] line height/[35:26] #ALL/[35:51] margin:0 auto/[36:11] #logo, padding/[37:04] #logo a/[37:24] text-decoration/[37:46] z-index/[37:58] a img/[38:18] 적용값 확인/[38:31] a strong/[39:27] #tab/[40:01] #tab ul/[40:13] list-style:none/[41:44] -webkit-border-radius/[42:22] #tab li/[43:00] #tab li a/[43:03] text-decoration:none/[43:17] 적용값 확인/[44:16] #tab li a:hover/[44:30] border/[45:45] #tab li a.selected /[46:33] #tab .allpanel/[46:46] -webkit-border-radius/[47:38] 적용값 확인/[48:00] overflow:hidden/[48:13] #tab .panel /[48:39] h2/[48:58] 적용값 확인






본 강의 수강생들의 추가구매가 가장 많은 학과.