[ JavaScript / JQuery ] jQuery를 자바스크립트에서 사용해보자!
2024. 5. 23. 13:51ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ jQuery란? ]
- jQuery는 JavaScript를 기반으로 하는 빠르고 간편한 웹 개발을 위한 라이브러리
= 자바 스크립트를 쉽게 사용할 수 잇도록 도와주는 오픈 소스 - HTML 문서를 다루기, 이벤트 처리, AJAX 기능을 제공하는 등 다양한 웹 개발 작업을 단순화하는 데 사용
- 주요 특징과 기능:
1. 선택자(Selectors):
jQuery는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다.
이를 통해 원하는 요소에 쉽게 접근하고 조작할 수 있습니다.
// 예제: 모든 <p> 태그를 숨김 $("p").hide();
2. 이벤트 처리(Event Handling):
jQuery는 이벤트 핸들링을 간편하게 만든다. 이벤트에 대한 동작을 쉽게 정의 및 연결 가능.
// 예제: 버튼 클릭 시 메시지 출력 $("button").click(function(){ alert("버튼이 클릭되었습니다."); });
3. 애니메이션(Animations):
요소를 부드럽게 보여주거나 감추는 등의 애니메이션 효과를 제공.
// 예제: 요소가 서서히 나타나기 $("div").fadeIn();
4. AJAX(Asynchronous JavaScript and XML):
서버와 비동기적으로 데이터를 주고받을 수 있도록 도와주는 기능을 제공.
// 예제: AJAX를 사용한 데이터 로드 $.ajax({ url: "data.json", success: function(data){ console.log(data); } });
5. DOM 조작(DOM Manipulation):
HTML 문서의 구조를 변경하거나 요소를 추가/제거하는 등의 DOM 조작 작업을 쉽게 할 수 있음
// 예제: 새로운 요소 추가 $("<p>New paragraph</p>").appendTo("body"); - (추가) 최근에는 웹 표준의 발전과 브라우저의 성능 향상으로 순수 JavaScript로도 많은 작업을 처리할 수 있게 되었다. 때문에 jQuery를 사용하지 않고 순수 JavaScript로 개발하는 추세가 늘고 있다
- jQuery 링크 : https://jquery.com/download/
[ 간단한 예제 ]
- 실행결과
- 헤더에 라이브러리 추가
<!-- jquery cdn -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
- 자바스크립트와 jquery 코드 비교
<script type="text/javascript">
//javascript 시작점 = 창의 로드가 완료되면
window.onload = function(){
document.querySelector(".btn-click").addEventListener("click", function(){
alert("Hello Javascript");
});
};
</script> <script type="text/javascript">
//jquery 시작점 = 창이 로드되고, jquery 사용 준비까지 완료되면
//$ 자체가 jquery를 의미한다고 생각해도 무관
$(function(){
//$(".btn-click").on("click", function(){
$(".btn-click").click(function(){
alert("Hello jQuery!");
});
});
</script>(+) $(무언가) 후속작업 진행
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현할 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- jquery cdn -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
//javascript 시작점 = 창의 로드가 완료되면
/*
window.onload = function(){
document.querySelector(".btn-click").addEventListener("click", function(){
alert("Hello Javascript");
});
};
*/
//jquery 시작점 = 창이 로드되고, jquery 사용 준비까지 완료되면
//$ 자체가 jquery를 의미한다고 생각해도 무관
$(function(){
//$(".btn-click").on("click", function(){
$(".btn-click").click(function(){
alert("Hello jQuery!");
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>제목</h1>
</div>
<div class="cell">
<button class="btn positive btn-click">click</button>
</div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript / jQuery ] alert 창의 값 여부에 따라 페이지 이동 구현 (0) | 2024.05.25 |
|---|---|
| [ JavaScript / jQuery ] jQuery를 활용하여 같은 틀을 여러 번 반복해서 사용할 수 있는 코드를 작성해보자 (0) | 2024.05.24 |
| [ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 같은 틀을 여러 번 반복해서 사용하기 (0) | 2024.05.21 |
| [ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 폰트 크기 바꾸기 (1) | 2024.05.20 |
| [ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 이미지 크기 바꾸기 (0) | 2024.05.19 |