[JavaScript]제이쿼리(jQuery)
자바스크립트 코드를 줄여주는 라이브러리. 최근에는 리액트가 나와서 제이쿼리를 사용하지 않는 추세라고는 하지만 이미 제이쿼리를 사용하여 개발한 프로그램이 많이 존재하기 때문에 꼭 알아두는 것이 좋다.
제이쿼리 시작하기
파일을 직접 다운로드 받아 html 상단에서 로드해주는 방법도 있지만 cdn을 사용하면 다운로드 받지 않아도 jQuery를 사용할 수 있다. cdn은 인터넷 사용이 원활해야 하므로 그렇지 못한 지역에서는 직접 다운로드 받는 것이 좋다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
제이쿼리 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<h4 id="test" class="test">안녕하세요</h4>
<script>
//document.querySelector("#test");
//document.querySelectorAll(".test");
$(".test") // 클래스명 선택
$("#test").html("안녕"); // html 내부 변경
$("#test").text("안녕"); // text 변경
$("#test").text(); // text 로드
$("#test").css("color","red"); // 스타일 지정
$("#test").attr("src","http://~~~") // 속성 변경
</script>
</body>
</html>
제이쿼리 사용하는 이유
- 자바스크립트 코드가 줄어든다.
- 자바스크립트에서 할 수 없는 일괄 요소 변경이 가능하다.
- 애니메이션 UI를 쉽게 구현할 수 있다.
