반응형
jQuery 란?
jQuery는 JavaScript를 기반으로 한 라이브러리로 DOM 조작과 이벤트 처리를 더 쉽고 간결하게 만들어주는 라이브러리이다. jQuery를 사용하면 일부 JavaScript 코드를 짧게 작성하여 반복적이고 일반적인 작업을 할수있다.
예를 들어 jQuery를 사용하여 CSS 선택자를 활용하여 요소를 쉽게 선택하고 스타일을 변경하거나 이벤트 핸들러를 간단하게 연결할 수 있다, jQuery는 크로스 브라우징을 지원하여 브라우저 간 호환성 문제를 해결해준다.
Vanilla JavaScript 예시
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 예시</title>
</head>
<body>
<h1>Hello, World!</h1>
<button id="changeTextButton">클릭하여 텍스트 변경</button>
<!-- JavaScript 코드 -->
<script>
// 버튼 클릭 시 텍스트 변경
document.getElementById("changeTextButton").addEventListener("click", function() {
document.querySelector("h1").textContent = "JavaScript를 이용해 텍스트가 변경되었습니다!";
});
</script>
</body>
</html>jQuery 예시
<!DOCTYPE html>
<html>
<head>
<title>jQuery 예시</title>
<!-- jQuery 라이브러리를 CDN(콘텐츠 전송 네트워크)에서 가져옵니다. -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<button id="changeTextButton">클릭하여 텍스트 변경</button>
<!-- jQuery 스크립트 -->
<script>
// 문서가 준비되면 실행될 콜백 함수
$(document).ready(function() {
// 버튼 클릭 시 텍스트 변경
$("#changeTextButton").click(function() {
$("h1").text("jQuery를 이용해 텍스트가 변경되었습니다!");
});
});
</script>
</body>
</html>Vanilla JavaScript, jQuery
바닐라JS 는 순수한 JavaScript 언어 자체를 의미하며 jQuery는 JavaScript 기반의 라이브러리로 DOM 조작과 이벤트 처리를 더 쉽게 만들어준다.
반응형
'간단한 공부' 카테고리의 다른 글
| [공부] 동기, 비동기 프로그래밍 이란? (0) | 2023.07.26 |
|---|---|
| [공부] 바닐라 JS(Vanilla JS) 란? (0) | 2023.07.26 |
| [공부] Float 사용시 발생하는 이슈, 해결법 (0) | 2023.07.26 |
| [공부] 시멘틱 태그(Semantic Tag) 란? (0) | 2023.07.26 |
| [공부] 웹표준, 웹접근성 이란? (0) | 2023.07.26 |
