국비지원교육 28일차(6주차&jQuery)

 

 

jQuery

 

크로스 플랫폼을 지원하는 자바스크립트 라이브러리이다. 크로스 플랫폼을 지원해서 어떠한 브라우저에서도 동일하게 동작한다.

 

 

특징

- CSS 스타일의 selector를 사용할 수 있으며 조작 또한 강력하며 유연하다.
- 이벤트 처리, Ajax, Animation 효과를 쉽게 사용할 수 있다.

크로스 플랫폼 : 소프트웨어가 둘 이상의 플랫폼을 지원하는 것을 뜻한다.
라이브러리 : 소프트웨어 개발 시 공통으로 사용할 수 있는 특정한 기능들을 묘듈화 한 것이다. 완전한 프로그램은 아니고, 특정한 부분 기능만을 수행하도록 제작된 프로그램이다.

 

 

jQuery를 쓰기 위해 

 

jQuery CDN을 검색해서 접속한다.

https://releases.jquery.com/

jQuery CDN

 

 

uncompressed를 누르면 

 

이 화면이 뜨고 아래 캡쳐 내용대로 사용하면 된다.

 

 

복사후에 이렇게 붙여 넣어준다

 

 

body내용

 

제이쿼리의 사용방법은 두가지가 있다.

 

$(); 표시와

jQuery(); 로 사용하면 된다

 

jQuery선언방법

 

jQuery는 배열 형태로 관리가 된다.

 

jQuery는 태그와 class, id에 접근할 수 있다.

 

text 값으로 지정하면 해당 태그 안에 text가 변경이 된다.

또 HTML 문자열을 인수로 받게 되면 새로운 HTML요소를 생성한다.

만약 CSS를 변경하고 싶다면 아래에 나와있는 예시에 있는 형식대로 작성하면 된다.

 

 

추가 메소드
- append() : 선택 요소의 닫는 태그 앞에 콘텐츠를 삽입한다.
- prepend() : 선택 요소의 여는 태그 뒤에 콘텐츠를 삽입한다.
- after() : 선택 요소의 뒤에 콘텐츠를 삽입한다.
- before() : 선택 요소의 앞에 콘텐츠를 삽입한다.

 

삭제 메소드

- empty() : 선택한 요소의 내용을 삭제한다.

- remove() : 선택한 요소를 삭제한다.

 

이외에도 여러 메소드들이 있다.

 

 

 

 

디버깅(Debugging) 

 

컴퓨터에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 변수값의 변화를 검사하는 과정이다.

 

debugger;를 써서 사용할 수 있다.

 

 

이렇게 화면을 키고, 작업관리자(F12)를 키고 화면을 새로고침(F5) 하게 되면 debugger를 찾을 수 있다.

 

그리고 번호에 마우스를 가져가 누르면 브레이크포인트를 만들 수 있다.