잡담
밀린 수업내용을 다시 정리하려니까 많이 까먹어서 정확한 정보들을 제공할 수 있을지 걱정이 됩니다. Front-end 쪽에서는 JQuery를 시작했고, back-end 에선 java DB연결, Python fastApi 등을 하고 있는데요 언제 기능들이 합쳐질지 모르겠습니다. 오늘도 열심히 작성해 보도록 할게요.
jQuery
jQuery는 JavaScript를 더 쉽게 다룰 수 있도록 도와주는 JavaScript 라이브러리 중 하나입니다. 웹 개발에서 가장 널리 사용되는 라이브러리 중 하나이며, 다양한 웹 브라우저에서 일관된 방식으로 코드를 작성할 수 있도록 해줍니다.
jQuery는 HTML 문서의 요소 선택, 이벤트 처리, 애니메이션 및 AJAX와 같은 다양한 기능을 단순화하고 추상화합니다. 이로써 개발자들은 간단하고 효율적인 코드를 작성할 수 있으며, 브라우저 간의 호환성 문제를 해결하는 데도 도움이 됩니다.
jQuery DownLoad
jQuery를 다운로드하려면 jQuery 공식 웹 사이트인 jquery.com에서 다운로드할 수 있습니다. 다음은 jQuery를 다운로드하는 단계입니다.
1. jQuery 사이트
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
JQuery 공식사이트에 접속하면 아래와 같은 화면이 나옵니다. (v3.7.1 기준)
Download jQuery를 클릭
Download jQuery를 클릭
해당 버튼을 클릭하게 되면 아래와 같이 코드들을 볼 수 있습니다.
ctrl+A를 눌러 전체 선택 후 복사하여. js확장자로 파일을 만들어 복사한 내용을 붙여 넣기 합니다.
다운로드한 jQuery 파일을 웹 페이지에 포함시켜 사용할 수 있습니다. HTML 파일에서 <script> 태그를 사용하여 jQuery 파일을 로드하고, 이후 jQuery 코드를 작성하여 사용할 수 있습니다.
또는,
와 같이 링크주소를 스크립트에 넣어서 사용해도 됩니다. 사이트 링크는 여러 가지 있는데.
1. jQuery jQuery CDN
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>2. 구글 jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>3. MS jQuery CDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>4. cloudflare jQuery CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>선택해서 넣으면 됩니다.
이번엔 간단한 jQuery 예제를 보겠습니다. 아래의 코드는 버튼을 클릭할 때마다 <p> 요소의 텍스트를 변경하는 jQuery 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<!-- jQuery 라이브러리를 CDN에서 가져오기 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 문서가 준비되면 실행될 jQuery 코드
$(document).ready(function(){
// 버튼을 클릭할 때마다 <p> 요소의 텍스트 변경
$("button").click(function(){
$("p").text("jQuery로 변경된 텍스트!");
});
});
</script>
</head>
<body>
<button>클릭</button>
<p>이 텍스트는 jQuery를 사용하지 않고 HTML과 JavaScript로 작성되었습니다.</p>
</body>
</html>See the Pen Untitled by 이현석 (@loxshqac-the-styleful) on CodePen.
이 예제에서는 jQuery를 사용하여 버튼을 클릭할 때마다 <p> 요소의 텍스트를 변경하고 있습니다. jQuery를 사용하면 단 몇 줄의 코드로 DOM 요소에 접근하고 조작할 수 있습니다.
글을 마치며
오늘은 jQuery 다운로드 및 사용방법에 대해 간단하게 알아보고 간단한 예제를 들어보았습니다. 대부분 https:// 링크를 통해서 이용하는 거 같습니다. 파일을 다운로드하여서 사용하면 여러 환경에서 사용할 수 있다는 장점이 있는 거 같네요. 감사합니다.
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery/ radio, checkbox (0) | 2024.04.30 |
|---|---|
| [Java Script] jQuery / val, text, html (0) | 2024.04.30 |
| [Java Script] jQuery / even, odd, lt, gt, eq (1) | 2024.04.26 |
| [Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings (0) | 2024.04.26 |
| [Java Script] jQuery / children, parent (0) | 2024.04.26 |