jQuery node(DOM) 선택자

jQuery와 DOM jQuery에서는 선택자 및 필터링 기반 트리탐색이 가능하다. 선택자 기반 트리 탐색 메서드 자식 children('선택자') 선택자에 해당하는 직계자식을 선택 find('선택자') 선택자에 해당하는 자식, 자손을 선택 선택자 생략 불가 부모 parent('선택자') 선택자에 해당하는 직계부모를 선택 parents('선택자') 선택자에 해당하는 부모, 조상을 선택 (body, html까지도..) 선택자 생략 하지말자 다음 next('선택자') 선택자에 해당하는 바로 다음 형제 요소 1개 를 선택 (친구) nextAll('선택자') 선택자에 해당하는 모든 다음 형제 요소를 선택 (친구) 이전 prev('선택자') 선택자에 해당하는 이전 형제 요소 1개 를 선택 (친구) prevAll(..

2021.12.08

jQuery 선택 리스트 박스 (Family Site)

접근성을 고려한 스크립도 같이 넣어줘야 한다. ＊ jQuery 노드(DOM) 에 관련된 메소드를 알아야 한다. ＊ focus, blur 이벤트는 a태그에만 사용 가능하다 CSS *{margin:0; padding:0;} ul{ list-style:none;} a{ color:#333; text-decoration:none} .select{position:relative; width:200px; height:40px; border:1px solid #ccc; background:url(plus.jpg) 95% 50% no-repeat #fff; margin:50px} .select .arrow{ display:block; height: 40px; line-height: 40px; padding-left:2..

2021.12.08

jQuery animate rotate (feat.CSS)

animate rotate jQuery는 rotate 속성을 기본으로 제공하진 않지만, jQUeryRotate를 연결시켜 사용할 수 있다. 또는 CSS transition과 함께 사용할 수 있다. (class 추가, 제거) jQueryRotate 사용 파일을 추가로 링크시켜야 하기 때문에 CSS transition과 함께 사용하는것이 좋다. CSS transition과 함께 사용하는것이 좋다. addClass(), removeClass()를 사용해준다. 단락요소 입니다.

2021.12.08

jQuery animate hover slide

CSS transition으로도 구현할 수 있지만, jQuery로 구현하면 easing효과도 사용할 수 있다. stop() ＊ animate의 계산을 멈춰준다. ＊ animate hover효과 시 stop() 메소드를 꼭 써줘야 한다. ＊ stop을 써주지 않으면 마우스 hover한 횟수 만큼 animate가 멈추지 않고 실행된다. ＊ 또는 clearQueue를 사용해준다. (이게 더 좋음) clearQueue(); ＊ animate의 계산을 취소/삭제 한다. ＊ stop은 단순히 멈추게 해주는것이고, clearQueue는 큐(저장공간)를 삭제시켜준다. (훨씬 좋다) 예제 :)

2021.12.08

jQuery ex animate

HTML, CSS로 애니메이션의 전 상황을 만들어 준 후, jQuery로 애니메이션을 만들어준다. fadeTo(); 투명도 애니메이션 메소드 $('선택자').fadeTo('slow', 1); $('.text1').fadeTo('slow', 1); delay(); 애니메이션 딜레이(시간차)를 만들어 준다 $('선택자').delay(시간).animate(object, speed); $('.ani').delay(1000).animate({top: 4}, 'slow'); 예제 :) JUSTICE FOR ALL

2021.12.08

jQuery animate() feat.easing

animate(); CSS로도 간단한 애니메이션 효과를 넣을 수 있지만, jQuery를 활용하면 보다 더 다양한 애니메이션 구현이 가능하다, Tween 효과를 생성해 준다. (중간 단계 행성) 사용 형식 아래와 같이 필요에 의해 4가지 형식으로 사용할 수 있다. $(selector).animate(object); $(selector).animate(object, speed); $(selector).animate(object, speed, callback); $(selector).animate(object, speed, easing, callback); ＊ object : 속성 ＊ speed : slow, normal, fast, 1000... (기본 normal) ＊ callback : function ..

2021.12.08