✅ JQuery
$(선택자).동작함수1().동작함수2()
- 달러($) 기호는 제이쿼리를 뜻하고 , 제이쿼리에 접근할 수 있게 해주는 식별자이다.
- 선택자를 이용하여 원하는 HTML 요소를 선택한다.
- 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.
jQuery $객체
🟢 jQuery 사용 시 먼저 객체를 생성하여야 한다.
🟢 객체는 다양한 메소드를 가진다.
jQuery와 Javascript 문법 비교
//JQuery
$(function() {
$("#id_1").동작함수1().동작함수2();
$('.class_1).동작함수1().동작함수2();
}
//Javascript
document.onload = function() {
document.getElementByID('id_1');
document.querySelectorAll('class_1');
}
$() 함수의 인수로 CSS의 태그 선택자를 지정 이때 선택된 요소들은 JQuery 객체로 반환한다. 선택된 요소가 여러개일 경우 자동으로 리스트를 만들어 저장해준다
<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button" class="btn"></button>
<button type="button" class="btn"></button>
<button type="button" class="btn"></button>
<button type="button" class="btn"></button>
</body>
</html>
<JQuery>
//jquery는 여러개 요소 리스트일 경우 자동으로 등록
$(function() {
$('.btn').on('click', function() { });
}
<Javascript>
// js는 하나의 요소마다 일일히 click이벤트를 등록해줘야 한다.
window.onload = function() {
const btn = document.querySelectorAll('.btn');
btn.forEach((btn) => {
btn.addEventListener("click", function() {
//동작함수n...
});
})
});
'Library > JQuery' 카테고리의 다른 글
| [Jquery] AJAX (0) | 2023.12.13 |
|---|---|
| JQuery 메소드 종류 (0) | 2023.12.07 |
