JQuery란?
Javascript와 다른 특별한 소프트웨어가 아닌 미리 작성된 Javascript 코드로, 전문 개발자들이 짜둔 코드입니다.
Jquery 사용법
import
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>JQuery를 사용하려는 파일에 import 해줍니다.
간단 예제
텍스트 추가하기 : text()
<script>
function JQuery_ex() {
let a = "텍스트를 추가했습니다.";
$('#id').text(a);
}
</script>
<body>
<button onclick="JQuery_ex()">JQuery 실행하기</button>
<p id="id"></p>
</body>$('#아이디') 으로 원하는 html 태그를 선정해줍니다.
이후, 명령어 text()를 사용하여 태그 안의 text를 a로 지정합니다.
<p id="id">텍스트를 추가했습니다.</p>페이지에는 이렇게 코드를 짠 것과 동일하게 나옵니다.
태그 추가하기 : append()
<script>
function check() {
let nums = [1,2,3,4,5];
nums.forEach((n) => {
let temp_html = `<p>${n}</p>`;
$('#id').append(temp_html);
});
}
</script>
<body>
<div id="id"></div>
</body>id란 id를 가진 태그안에 <p>${n}</p>를 nums의 인덱스 수 만큼 반복하여 추가하는 것입니다.
<div id="id">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>위의 코드를 실행한 것과 같은 페이지가 나옵니다.
준비 상태 감지 : ready()
$(document).ready()DOM이 완전히 불러와지면 실행되는 Event입니다.
// 1
$(document).ready(function () {
console.log( "ready!" );
});
// 2
$(function() {
console.log( "ready!" );
});2번 코드처럼 축약하여 사용하기도 합니다.
클릭 이벤트 핸들러 : click()
$(#'btn').click()은 JQuery 에서 btn란 id를 가진 태그의 클릭 이벤트를 처리하기 위한 함수입니다.
$('#btn').click(async function () {
alert('버튼을 클릭했습니다.');
});btn란 id를 가진 태그를 클릭하면 해당 함수를 실행합니다.
공부일지로 완벽하지 않을 수 있습니다 🐹