- jquery 수업 1
- 엘리먼트 찾기 수업
- 01.아이디로_엘리먼트찾기
- element'아이디를 선택하여 해당 엘리먼트의 색을 바꿔 주세요.
- 02.클래스로_엘리먼트찾기
- elements'클래스를 선택하여 해당 엘리먼트의 색을 바꿔 주세요.
- 03.자식_엘리먼트찾기
- elements'클래스를 선택하여 해당 엘리먼트의 색을 바꿔 주세요.
- 04.형제_엘리먼트찾기
- 아이디가 'element'인 엘리먼트의 바로 아래 엘리먼트의 색을 바꿔 주세요.
- 05.속성으로_엘리먼트찾기
- 속성'title'의 값이'attr'인 엘리먼트의 색을 바꿔 주세요.
- 06.first_필터셀렉터
- 아이디가 el인 ul태그의 자식 엘리먼트인 li태그를 선택하고 :first 필터 셀렉터를 사용하여 첫번째 엘리먼트만 선택해 주세요.
- 07.last_필터셀렉터
- 아이디가 el인 ul태그의 자식 엘리먼트인 li태그를 선택하고 :last 필터 셀렉터를 사용하여 마지막 엘리먼트만 선택해 주세요.
- 08.even_필터셀렉터
- 아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그를 선택하고 :even 필터 셀렉터를 사용해 짝수 index를 같는 엘리먼트의 글자색을 바꿔 주세요.
- 09.odd_필터셀렉터
- 아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그를 선택하고 :odd 필터 셀렉터를 사용해 홀수 index를 같는 엘리먼트의 글자색을 바꿔 주세요.
- 10.eq_필터셀렉터
- 아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그중 index가 3인 엘리먼트를 :eq필터를 사용해 선택하고 글자색을 바꿔주세요.
- 11.gt_필터셀렉터
- 아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그중 index가 3인 엘리먼트보다 index가 큰 엘리먼트를 선택해 글자색을 변경해 주세요.
- 12.lt_필터셀렉터
- 아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그중 index가 3인 엘리먼트보다 index가 작은 엘리먼트를 선택해 글자색을 변경해 주세요.
- 13.has_필터셀렉터
- 아이디가 el인 엘리먼트의 자식엘리먼트중 :has 필터셀렉터를 이용하여 p태그를 포함하는 엘리먼트를 선택해 글자색을 변경해 주세요.
- 14.not_필터셀렉터
- 아이디가 el인 엘리먼트의 자식엘리먼트중 class값이 not인 엘리먼트를 제외하여 선택해주고 선택된 엘리먼트의 글자색을 변경해 주세요.
- 메소드 수업
- 01.size_메소드
- size() <--size 갯수, 숫자 메서드로 ul의 자식 엘리먼트의 갯수 세어보기
- 02.eq_메소드
- eq() 메서드로 ul의 자식 엘리먼트중 세번째 엘리먼트의 색을 바꿔주세요.
- 03.first_and_last_메소드
- first() 메서드로 ul의 자식 엘리먼트중 첫번째 엘리먼트와 last() 메서드로 마지막 엘리먼트의 색을 바꿔 주세요.
- 04.index_메소드
- ul의 자식 엘리먼트중 네번째 엘리먼트를 index() 메서드로 해당 index값을 alert()을 띄워 봅시다.
- 05.not_메소드
- ul의 자식 엘리먼트중 클래스값이 el이 아닌 엘리먼트만 글자색을 변경해 주세요.
- 06.filter_메소드
- ul의 자식 엘리먼트중 클래스값이 el인 엘리먼트만 글자색을 변경해 주세요.
- 07.slice_메소드
- slice() 메서드를 이용하여 해당 위치에 색을 바꿔주세요.
- 08.has_메소드
- has() 메서드를 사용해서 li엘리먼트중 자식으로 ul엘리먼트를 가지고 있는 엘리먼트를 찾아서 색을 바꿔 주세요.
- 09.each_메소드
- each() 메소드를 사용하여 ul엘리먼트 자식엘리먼트를 순환하여 모두 색을 바꿔 주세요.
- 메소드 수업2
- 01.children_메소드
- children() 메소드를 사용하여 아래 엘리먼트들의 글자색을 변경해 주세요.
- 02.next_메소드
- next() 메소드를 사용하여 1번 엘리먼트의 바로 다음 형제 엘리먼트의 글자색을 변경해 주세요.
- 03.nextAll_메소드
- nextAll() 메서드를 사용하여 1번의 다음에 존재하는 형제 엘리먼트들의 글자색을 바꿔주세요.
- 04.nextUntil_메소드
- nextUntil() 메서드를 사용하여 1번의 형제 엘리먼트중 5번전까지의 형제 엘리먼트 모두에 컬러를 바꿔주세요.
- 05.parent_메소드
- parent() 메서드를 사용하여 id가 "childEl"인 엘리먼트의 부모 엘리먼트인 태그네임이 "ul"인 엘리먼트를 찾아 색을 바꿔 주세요.
- 06.parents_메소드
- parents() 메서드를 사용하여 id가 "childEl"인 엘리먼트의 조상 엘리먼트중 class가 "parentEl"인 엘리먼트를 찾아 색을 바꿔 주세요.
- 07.parentsUntil_메소드
- parentsUntil() 메서드를 사용하여 id가 "childEl"인 엘리먼트의 조상 엘리먼트중 id가 "parentEl"인 하위엘리먼트의 전체엘리먼트의 색을 바꿔주세요.
- 08.find_메소드(가장 많이 사용한는 태그)
- find() 메서드를 사용하여 id가 "el"인 엘리먼트를 찾아 색을 바꾸고 그안에 아이디가 "nextEl"인 엘리먼트를 찾아 색을 바꿔주세요.
- 09.is_메소드
- is() 메서드를 사용하여 id가 "el"인 엘리먼트의 확장집합중 id가 "nextEl"인 엘리먼트가 존재하는지 체크하고 존재한다면 alert창을 띄워주세요.
- jquery 사용한 메뉴 / input 제어하기
- jquery 사용한 fadeIn , fadeOut jquery
- jquery 사용한 상단 1뎁스 버튼을 클릭하여 2뎁스 제어하기
- jquery 오버하면 툴팁이 따라다니게
- jquery 플러그인 사용(응용)하기
- jquery 탭을 누르면 이미지가 바뀌게
- jquery nav 메뉴 클릭시 이미지 / 폰트(이미지) 늘었다 줄었다
- jquery 숫자 롤링 위로 / 아래로 로테이션시키기
- easeIn / easeOut move 버튼으로 공 제어하기
- 2뎁스 메뉴 만들기
- SUM 네일 클릭시 이미지 변환
- fadeIn , fadeOut 이미지 변환
- 이미지 오버시 줌인
- 플러그인을 가져와서 배너 변환 효과주기
- 23. 플러그인을 사용한 배너 효과 주기
- $('.box_skitter_large').skitter();
- $('.box_skitter_large').skitter({dots:true});
- $('.box_skitter_large').skitter({thumbs:true, label: false});
- $('.box_skitter_large').skitter({thumbs:false, label: true});
- $('.box_skitter_large').skitter({dots:true, previe: true});
- $('.box_skitter_large').skitter({controls:true});
- 트리구조 세로메뉴 만들기
- toggle() 사용
- 마우스 따라 다니는 좌측 메뉴
- 문자열 추출하여 이미지 배너 안에 숫자 버튼 누르면 이미지 슬라이드 체인지
- imageEffect
- fn_jQuery
- hershe2
- 스크롤 내리면서 화면 컨트롤 하기
- 학원 졸업생 참조 사이트