jQuery는 자바스크립트 라이브러리 중 하나로, HTML 문서의 탐색과 조작, 이벤트 처리, 애니메이션 등을 쉽게 할 수 있도록 설계되었습니다. 이 라이브러리의 목적은 "write less, do more"로 요약할 수 있으며, 개발자가 다양한 브라우저에서 동일하게 작동하는 자바스크립트 코드를 더 적게 쓰면서 더 많은 일을 할 수 있도록 도와줍니다.
jQuery 추가하기
jQuery를 사용하기 위해서는 먼저 jQuery 라이브러리를 페이지에 추가해야 합니다.
이는 주로 <head> 태그 내에 다음과 같은 스크립트 태그를 추가함으로써 이루어집니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jQuery 문법
jQuery의 기본 문법은 $(selector).action() 형태로, $는 jQuery를 의미하고, selector는 HTML 요소를 선택하며, action()은 선택된 요소에 적용할 작업을 나타냅니다.
예를 들어, 모든 <p> 요소의 텍스트 색상을 변경하고 싶다면 다음과 같이 씁니다.
$("p").css("color", "red");
문서 준비 이벤트
jQuery는 문서가 완전히 로드되고 준비된 후에 코드가 실행되도록 해줍니다. 이는 다음과 같이 작성합니다.
$(document).ready(function(){
// 여기에 jquery코드를 작성합니다.
});
HTML 요소 숨기기
HTML의 특정 요소를 숨기고 싶을 때 hide() 메소드를 사용할 수 있습니다.
<button id="hide">숨기기</button>
<p>이 텍스트는 숨겨질 것입니다.</p>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
});
</script>
HTML 요소에 클릭 이벤트 추가하기
특정 요소에 클릭 이벤트를 추가하여 사용자가 요소를 클릭했을 때 어떤 동작을 하도록 설정할 수 있습니다.
<button>클릭하세요</button>
<p style="display:none">안녕하세요!</p>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").show();
});
});
</script>
이제는 웹개발을 할때 자바스크립트는 jquery를 활용하는것이 필수가 되었습니다.
jquery를 넘어서 다양한 자바스크립트 라이브러리들이 탄생하고 있고 그 이상의 기술을 선보이고 있습니다.
'웹개발 > front-end' 카테고리의 다른 글
| [react]기초 (0) | 2024.03.22 |
|---|---|
| [자바스크립트]jquery 이벤트 종류 (0) | 2024.03.17 |
| 자바스크립트 ajax기초 (0) | 2024.03.17 |
| [css]브라우저 별 css적용의 차이 (0) | 2024.03.12 |
| [CSS]css의 기초 (0) | 2024.03.12 |
