쫑가 과정

jQuery? 본문

JavaScript/jQuery

jQuery?

쫑가 2021. 9. 3. 16:58
 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

장점

  1. 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원.
  2. 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현,  CSS 스타일도 간단히 적용
  3. 애니메이션 효과나 대화형 처리를 간단하게 적용
  4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현
  5. Ajax 응용 프로그램 및 플러그인도 빠르게 개발.
  6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용

적용

자바스크립트 라이브러리이므로, 파일은 자바스크립트 파일(.js 파일) 형태로 존재

웹 페이지에서 사용하기 위해서는 파일을 먼저 웹 페이지에 로드(load)해야 한다.

방법

  1. 파일을 다운받아 로드하는 방법
  2. CDN(Content Delivery Network)을 이용하여 로드하는 방법

압축되지 않은 파일은 개발 또는 디버깅 중에 가장 잘 사용됩니다.

압축 파일은 대역폭을 절약하고 프로덕션 성능을 향상시킵니다

 

1. 다운받아 로드하는 방법

https://jquery.com/download/

다운받은 파일을 서버에 저장하고, <script>태그를 html 안에 넣는다.

<body>
    <script src="/파일경로/제이쿼리파일명.js"></script>
</body>

2. CDN을 이용하여 로드하는 방법

CDN?

Content Delivery Network로 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때,

자동으로 가장 가까운 서버에서 다운받도록 하는 기술

장점

  1. 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라짐.
  2.  파일을 서버에 따로 저장하지 않아도 jQuery 사용 가능.
  3. 웹 페이지 방문자가 동일한 CDN에서 jQuery 사본을 이미 다운로드한 경우 다시 다운로드할 필요가 없다
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

문법

$(선택자).동작함수();

달러($) -  jQuery를 의미,  jQuery에 접근할 수 있게 해주는 식별자

선택자 -  이용하여 원하는 HTML 요소를 선택

동작 함수 - 정의하여 선택된 요소에 원하는 동작을 설정

저작자표시 비영리 변경금지

'JavaScript > jQuery' 카테고리의 다른 글

jQuery 연습, 테스트  (0) 2021.09.10
jQuery. 요소의 추가 / 1. 기존 요소의 내부에 추가  (0) 2021.09.08
선택된 요소 접근  (0) 2021.09.06
선택자를 이용한 선택  (0) 2021.09.03
'JavaScript/jQuery' Related Articles more
Comments