~~Title:jQuery 재참고~~
jQuery를 다시 써야할때 필요한 것을 메모해둔다.
{{section>language:jquery:jquery_문서_목록#jQuery_문서_목록&nofooter&noeditbtn}}
====== jQuery 무엇인가? ======
이런게 되는구나 개념만 이해하고,
* jQuery는 css의 { id, class } 또는 html 태그(엘리먼트)를 선택할 수 있다.
* 선택된 요소엘리먼트를 조작 또는 변경할 수 있다.
* 마우스의 클릭과 같은 이벤트 발생시, html과 css상의 엘리먼트를 조작할 수 있다.
===== 첫번째 jQuery =====
$(document).ready(function() {
$('.poem-stanza').addClass('emphasized');
})
* jQuery에서 엘리먼트를 선택하는 것은 $() , 괄호 안에 선택할 엘리먼트를 적는다.
* document (html 문서 전체) 엘리먼트DOM객체를 선택해서
* 해당 엘리먼트에서 사용할 수 있는 javascript 함수를 사용한다.
* document DOM 객체에서 사용할 수 있는 (내가 이해하는 것으로는) ready()함수에서
* **'.poem-stanza'** css 요소를 찾아서 **'emphasized'** 클래스 요소를 동적으로 갖다 붙인다.
===== 정리하면 =====
* $() : 엘리먼트DOM 객체를 선택하는 키워드. 이것으로부터 모든 것이 시작된다.
* 해당 엘리먼트에서 사용할 수 있는 javascript 요소로 동적으로 컨트롤이 가능해진다.
===== 링크 =====
[[{}https://api.jquery.com/|api.jquery.com]] / [[{}https://www.w3schools.com/jquery/|w3schools jquery]] / [[{}https://jqueryui.com/|jqueryui.com]]
====== .animate() ======
오브젝트에 움직임을 부여할때 사용하는 것으로, \\ css 속성자Property의 값Value의 값이 시간을 두고 변화 되는 것을 볼 수 있다.
* [[https://api.jquery.com/animate/|jQuery animate()]]
간단한 예시로, ''animate()''에 대해서 정리.
* 아래 그림처럼 작은 박스가 있고
* ''클릭 A''를 누르면 박스가 랜덤한 위치로 이동
| {{:사진자료실:css_animate-samp-01.gif|}} |
===== 샘플 페이지 작성 =====
일단 박스를 선언.
* 한 파일에 모아두기. \\ ''style''을 ''sample_box'' 이전에 스크립트 태그를 써서 선언해서 쓰자. \\ (샘플이니까)
클릭 A
리셋
===== 애니메이션 스크립트 추가 =====
''