HTML에 JQuery 추가

1. JQuery CDN을 사용하여 HTML에 JQuery 포함
2. JQuery를 다운로드하고 HTML에 포함

이 기사에서는 HTML 페이지에 jQuery 코드를 추가하거나 작성하는 방법을 안내합니다.

JQuery CDN을 사용하여 HTML에 JQuery 포함

JQeury는 가장 널리 사용되는 JavaScript 라이브러리 중 하나입니다.

라이브러리는 DOM 탐색 및 조작, CSS 조작, 이벤트 처리, 애니메이션 및 AJAX 호출과 같은 기능을 사용하여 웹 사이트에서 많은 작업을 단순화합니다. jQuery를 사용하면 적은 양으로 더 많은 작업을 수행할 수 있습니다. 이것이 주요 이점입니다.

일반 JavaScript보다 jQuery를 사용하여 더 적은 코드로 작업을 수행할 수 있습니다. 이제 HTML 페이지에서 jQuery를 사용하는 방법을 다룰 것입니다.

HTML 문서에 jQuery를 포함하는 가장 일반적인 방법은 CDN(Content Delivery Network)을 사용하는 것입니다. CDN은 사용자에게 더 가까운 네트워크 위치에 콘텐츠를 캐싱하여 요청된 콘텐츠를 최종 사용자에게 제공하는 서버 네트워크입니다.

이러한 방식으로 사용자는 요청된 데이터를 빠르고 정확하게 제공받게 됩니다. Google CDN 및 Microsoft CDN과 같은 다양한 소스에서 jQuery CDN을 얻을 수 있습니다.

script 태그에 jQuery CDN URL을 포함하고 HTML에서 jQuery를 사용할 수 있습니다. jQuery를 별도의 .js 파일에 작성하여 HTML 파일에 포함하거나 script 태그 안에 jQuery를 작성할 수 있습니다.

먼저 JQuery CDN 웹사이트로 이동하여 최신 안정화 버전의 jQuery를 선택합니다. 시연을 위해 압축되지 않은 버전을 사용하고 있습니다.

그런 다음 웹 사이트는 아래 표시된 태그를 출력합니다.

<script src="https://releases.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

그런 다음 태그를 복사하여 HTML 파일에 배치합니다. 그런 다음 ID가 text인 p 태그를 만들고 태그 사이에 아무 것도 쓰지 마십시오.

p 태그 아래에 ID가 button인 버튼을 만들고 value 속성에 Click here 텍스트를 씁니다. HTML 부분은 끝났고 이제 jQuery를 작성할 것입니다.

script 태그 안에 ready() jQuery 메서드를 작성합니다. button id를 선택하고 메서드 내에서 click() 메서드를 호출합니다.

다시 click() 메소드 내에서 text id를 선택하고 html() 메소드를 호출합니다. clicked 텍스트를 html() 매개변수로 작성합니다.

이 섹션에서는 이러한 다양한 jQuery 메서드에 대해 알아봅니다. ready() 메소드는 다른 모든 메소드를 포함합니다.

메서드 내부의 다른 콘텐츠는 DOM이 완전히 로드되면 실행됩니다. 마찬가지로 click() 메서드는 선택한 요소를 클릭할 때 실행됩니다. html() 메서드는 콘텐츠를 선택한 요소로 설정합니다.

아래 예에서 버튼을 클릭하면 clicked라는 텍스트가 나타납니다. 이런 식으로 CDN을 사용하여 HTML 문서에서 jQuery를 사용할 수 있습니다.

예제 코드:

<script src="https://releases.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>

JQuery를 다운로드하고 HTML에 포함

HTML로 jQuery를 작성하는 다른 방법은 jQuery 파일을 다운로드하여 HTML 파일에 포함하는 것입니다.

여기 링크에서 파일을 다운로드할 수 있습니다. 다운로드한 .js 파일을 script 태그에 포함시킨 후 jQuery 코드를 HTML로 작성합니다.

예를 들어 위에 제공된 링크에서 jQuery 파일을 다운로드합니다. 다음으로 HTML 파일에서 script 태그의 src 속성에 jQuery 파일의 파일 경로를 작성합니다.

이것은 위 방법의 예제에서 수행해야 하는 유일한 변경 사항입니다. 데모에 동일한 HTML 및 jQuery 코드를 사용합니다.

버튼을 클릭하면 위의 예와 같이 clicked 텍스트가 표시됩니다. 이런 식으로 jQuery 파일을 다운로드하여 HTML에 포함할 수 있습니다.

예제 코드:

<script src="jquery-3.6.0.min.js"></script>
<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>