28,29,30,31일차 - JQuery

J-Query 의 필요성

■ 사용의 편리성이 있다

■ 크로스 브라우징, 자바스크립트는 브라우저마다 해석하므로 종류나 버젼마다 표현이 안되거나 다르게 되는 경우가 있다

■ 다양한 플러그인, J-Query 를 기초로 한 유용한 플러그인이 많다

Selector

■ $(this) : 이벤트가 걸린 요소나, 찾을 수 없다면 문서 전체

■ $('p:first') : p 태그 중에서 첫번째 요소

■ $(':button') : 버튼 태그 또는 속성인 요소

■ $('p[<속성, a>=<값, v>]') : p 태그 중에서 a 속성이 v 값인 요소

■ $('p[<속성, a>]') : p 태그 중에서 a 속성이 있는 요소

CDN

링크만 연결해서 라이브러리를 가져다 쓰는 방식

https://jquery.com/download/

Download jQuery | jQuery

1. https://code.jquery.com/jquery-3.7.1.min.js

2. 위 링크를 복사해서 스크립트

3. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Selector 활용

Event

★ 처음 이벤트를 생성했을때 선택자가 가져온 요소가 없으면 이벤트가 생기지 않는다

■ 이벤트가 실행 되었을 때 생성된 버튼이 이벤트를 걸어준다
■ 이벤트가 요소에 중복 적용 될 수 있다

Event 종류

더 많은 API 사이트 : http://api.jquery.com/category/events/

Events | jQuery API Documentation

Attribute & CSS

$(셀렉터).attr(“지정 속성”); // 해당 요소의 지정된 속성을 가져온다
$(셀렉터).val(); // 해당 요소의 값(value)을 가져 온다
$(셀렉터).attr( “지정 속성”, “변경 내용” ); // 해당 요소의 지정된 속성을 변경한다
$(셀렉터).val( “변경 내용” ); // 해당 요소의 값(value)을 변경한다

$(셀렉터).css( “attribute” ); // 선택한 요소의 스타일 값을 받아 온다
$(셀렉터).css( “attribute”, ”value” ); // 선택한 요소의 스타일 값을 변경 한다

Animate

$(…).animate({params}, speed, easing, callback);

- Params : css 에서 정의 할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정)
- Speed : 애니메이션이 시작해서 끝날때 까지 걸릴 시간
- Easing : 애니메이션이 움직이는 가속도
- Callback : 애니메이션 종료 후 일어날 기능
- 

$(…).stop();