DAY 94. jQuery - 연결 방법, 시작 방법

 

 

jQuery

존 레식에 의해 개발된 경량 JavaScript 라이브러리이다.

특히 DOM과 관련된 처리, 일관된 이벤트 연결, 시각적 효과, Ajax 애플리케이션 관련 복잡했던 코드를 보다 쉽게 구현했다.

그 외에도 jQuery 플러그인을 통해 차트 작성, 슬라이드 쇼, 엑셀 같은 테이블도 간단히 구현이 가능하다.

 

 

연결 방법

 

1. CDN(Content Delivery Network)을 통한 연결

온라인으로 js파일을 불러와서 실행한다.

라이브러리를 제공하는 사이트의 주소를 이용하여 파일 경로를 지정하는 방법

네트워크 상의 문제, CDN 서버의 문제 발생할 경우 자바스크립트 화면을 불러와서 활용할 수 없다.

 

2. 파일 다운로드 연결(오프라인에서 사용하는 경우)

jQuery 홈페이지에서 최신 버전 js 파일을 다운로드한다. 실무에서 자주 사용하는 방법이다.

js 파일을 직접 다운로드해서 저장한 후 저장된 파일 경로를 지정하는 방법

 

 

---

 

시작

 

1. $(document객체).ready(function() {실행 내용});

- 1) jQuery 방식 (일반적으로 가장 많이 사용한다.)

 

2. jQuery(document).ready(function() {실행 내용});

- 2) jQuery라는 변수를 활용한다.

 

3. $(function() {실행 내용});

- 3) 축약형

 

 

- DOM이 먼저 로드 된 다음에 실행하게 되어있다.

- DOM이 로드되지 않은 상태에서 객체의 요소에 접근하면 원하는 대로 동작하지 않을 수가 있다.

- jQuery를 사용하는 웹 페이지 시작코드이다.

- $ 또는 jquery 사용한다.

- $ 역시 jQuery의 변수이다.

- window.onload 속성과 같은 개념의 메소드로 페이지 내용 로드 후 ready 메소드를 실행한다.

 

 

[ready() 와 window.onload의 차이점] - onload : 여러 개를 선언하게 되면 가장 마지막에 설정한 것으로 적용된다. : 해당 문서에서 한 번만 작성이 가능하다. 여러 번 작성할 경우(복수 개 설정)는 가장 마지막에 작성된 내용이 적용된다. - ready() : 여러 개를 선언하더라도 같이 선언된다. : 해당 문서에서 여러 번 작성 가능하다. (but, 한 번만 사용하는 것을 지향한다.)

 

 

- 선택자 참고사항 사이트

 

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

jQuery Selectors