[JS] JQuery의 초간단 사용법
2024. 1. 29. 15:35ㆍFE/JS
728x90
JQuery는 JavaScript에서 쉽게 사용할 수 있도록 만든 라이브러리입니다. JQuery를 사용하면 HTML의 컴포넌트들에 대해 쉽게 접근하여 사용할 수 있습니다.
사용 방법은 아주 간단합니다. JQuery 를 사용할 수 있도록 CDN을 선언하여주고, class, id에 따라 접근하여주면 됩니다. 예시 코드는 아래에 있습니다.
아래의 코드는 checkResult라는 버튼을 누르면 "q1", "q2"라는 id 값을 가지는 태그들이 업데이트 되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"> 테스트 </div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2"> 테스트</div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3"></div>
</div>
</body>
<script>
function checkResult() {
// let word = 'apple';
// $('#q1').text(word);
let a = ['사과', '배', '감', '귤']
$('#q1').text(a)
let b = {
'name': '영수',
}
$('#q2').text(b['name'])
}
</script>
</html>