2024-10-16
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.7.1.js"></script>
<script>
/*
제이쿼리(JQuery)?
- 제이쿼리는 웹 사이트에 자바스크립트를 쉽게 활용할 수 있도록
도와주는 오픈 소스 기반의 경량의 자바스크립트 라이브러리임.
제이쿼리의 특징
- 웹 사이트 상에서 요소를 쉽게 찾고 조작할 수 있음.
- 거의 모든 웹 브라우저에 대응할 정도로 호환성이 좋음.
- 애니메이션 등 다양한 기능을 제공함.
- 유지관리가 용이한 짧은 코드 작성을 지원함.
- 오픈소스여서 쉽게 접근이 가능함.
제이쿼리 사용 방법
- 라이브러리 파일을 다운 받아서 사용하는 방법.
- CDN(Content Delivery Network)을 이용하여 사용하는 방법.
*/
// 자바스크립트로 작성한 코드
// onload = () => {
// let h2_elemets = document.querySelectorAll("h2");
// for(h2_elemet of h2_elemets) {
// h2_elemet.style.color="red";
// }
// }
/*
제이쿼리 실행 방법 - 4가지
1. JQuery(document).ready(function() {
코드 작성;
});
2. JQuery(function() {
코드 작성;
});
3. $(document).ready(function() {
코드 작성;
});
4. $(function() {
코드 작성;
});
*/
// 제이쿼리를 이용하여 작성한 코드
// 문서의 body부분을 읽고 제이쿼리를 실행하라는 의미.
// 제이쿼리 동작 방법
// 형식) $("선택자").동작함수("속성", "값");
$(function() {
$("h2").css("color", "red");
});
</script>
</head>
<body>
<h2>HEADER1</h2>
<h2>HEADER2</h2>
<h2>HEADER3</h2>
<h2>HEADER4</h2>
<h2>HEADER5</h2>
</body>
</html>
