>웹 프론트엔드 >프런트엔드 Q&A >js 파일에 jquery를 도입하는 방법

js 파일에 jquery를 도입하는 방법

WBOY
WBOY원래의
2023-05-18 16:04:086216검색

웹 개발에서 jQuery는 호환성 문제에 대해 너무 걱정할 필요 없이 JavaScript 코드 작성과 DOM 조작을 크게 단순화하는 매우 인기 있는 JavaScript 라이브러리입니다. 프로젝트 개발을 완료할 때 우리는 일반적으로 개발 효율성을 높이고 프로젝트의 유지 관리성과 안정성을 향상시키기 위해 jQuery를 사용합니다. 그렇다면 JS 파일에 jQuery를 도입하는 방법은 무엇입니까? 이 문서에서는 두 가지 일반적인 방법을 자세히 설명합니다.

방법 1: CDN을 통해 소개

CDN(Content Delivery Network)은 웹 사이트 콘텐츠의 전송을 캐시하고 가속화하여 웹 사이트 로드 속도를 높일 수 있는 여러 위치에 분산된 서버 그룹입니다. jQuery에는 일부 CDN 서비스 제공업체(예: Google, Microsoft, Baidu 등)가 있으며 이들이 제공하는 링크를 통해 jQuery를 소개할 수 있습니다.

Google CDN을 예로 들면 다음 코드를 복사하여 HTML 파일에 붙여넣을 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

이 코드에서 "src" 속성은 jQuery 코드를 로드할 위치를 지정합니다. 페이지가 로드되면 브라우저는 자동으로 Google 서버에서 jQuery를 다운로드하고 이를 당사 서버에서 다운로드하는 대신 캐시하므로 페이지 로딩 속도가 크게 향상될 수 있습니다.

JS 코드를 작성할 때 해당 JS 파일에서 "$" 기호만 사용하면 됩니다. 예:

$(document).ready(function() {
    // ...
});

이제 jQuery를 성공적으로 도입했으며 $ 기호를 사용하여 다양한 함수를 참조할 수 있습니다. jQuery Function 함수에서 제공됩니다.

방법 2: 파일을 통해 가져오기

CDN에서 jQuery를 가져오는 것 외에도 jQuery를 로컬로 다운로드하고 파일을 통해 가져올 수도 있습니다. 구체적인 방법은 다음과 같습니다.

  1. jQuery 공식 홈페이지(https://jquery.com/)에 접속하여 최신 jQuery 압축파일을 다운로드 받으세요.
  2. 다운로드한 파일을 로컬 컴퓨터에 추출합니다. 예를 들어 jquery.min.js를 "js" 폴더에 복사합니다.
  3. HTML 파일에 다음 코드를 추가하세요.
<script src="js/jquery.min.js"></script>
<script src="js/myscript.js"></script>

여기서 코드의 첫 번째 줄은 jQuery 스크립트 로드를 지정하고, 코드의 두 번째 줄은 우리가 직접 작성한 JS 스크립트(예: "myscript.js")를 지정합니다.

  1. myscript.js 파일에서 $ 기호를 사용하여 jQuery를 소개합니다. 예:
$(document).ready(function() {
    // ...
});

파일을 사용하여 jQuery를 소개하는 경우 jQuery 파일이 올바르게 참조되는지 확인해야 합니다. , 코드 순서도 매우 중요합니다. jQuery 앞에 자체 JS 파일을 넣으면 코드에서 오류가 보고됩니다.

위는 jQuery를 소개하는 두 가지 일반적인 방법입니다. jQuery를 사용해야 할 때 우리에게 적합한 방법만 선택하면 유지 관리 가능하고 안정적인 웹 애플리케이션을 즐겁게 작성할 수 있습니다.

위 내용은 js 파일에 jquery를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.