[jQuery] jQuery 함수와 Ready
2022. 6. 8. 13:47ㆍJavaScript/jQuery
1. jQuery 함수
- jQuery 함수는 jQuery에서 가장 중요한 함수
- JavaScript는 생성된 객체 멤버를 추가하는 것이 자유롭습니다. 이러한 점을 이용해서 만들어진 라이브러리가 jQuery 라이브러리이다.
- JavaScript에서의 객체를 jQuery 함수에 매개변수로 넣어주면 객체에 jQuery에서 만든 여러 함수를 객체를 추가하여 반환합니다.
- 이를 통해 객체에 대한 jQuery 함수를 이용해 다양한 작업을 수행합니다.
- jQuery 함수는 jQuery(객체) 형태로 작성하지만 jQuery 6글자 대신에 $(객체)로 작성할수도 있습니다.
2. ready 함수
- ready 함수는 JavaScript의 window.onload와 흡사합니다.
- Window.onload는 태그 객체가 모두 생성되면 발생되는 이벤트로 웹 화면이 처음 나타날 때 필요한 작업이 있다면 여기서 구현하게 된다.
- ready도 window.onload와 동일한 시점에 동작을 하게 된다.
- 두 함수의 차이점은 window.onload가 여러 개 있을 경우 제일 마지막 것만 동작하지만 ready는 모든 부분이 동작합니다.
ready 함수 형식
// 방법 1
$(document).ready(function(){
// 함수 내용
});
// 방법 2
$(function()){
// 함수 내용
}
window.onload
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script>
// window.onload가 여러개 있는 경우 제일 마지막 onload 것이 수행됨
window.onload = function(){
const result = document.getElementById("result");
result.innerHTML += "on load1<br/>";
}
window.onload = function(){
const result = document.getElementById("result");
result.innerHTML += "on load2<br/>";
}
window.onload = function(){
const result = document.getElementById("result");
result.innerHTML += "on load3<br/>";
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
$(document).ready
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ready 함수를 이용해서 익명함수들 모두 적용됨 (위에서 아래로)
$(document).ready(function(){
$("#result").append("ready1 <br/>");
});
$(document).ready(function(){
$("#result").append("ready2 <br/>");
});
// $(document).ready(function(){})와 동일한 표현
$(function(){
$("#result").append("ready3 <br/>");
})
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
학습정리
- jQuery 함수는 JavaScript 객체에 jQuery에서 정의한 멤버를 추가하여 반환하는 함수입니다.
- jQuery(객체) 형태로 사용하지만 $(객체)로 사용할 수도 있습니다.
- Ready는 window.onload와 다르게 모든 부분이 실행됩니다.
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/Ready/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] 인덱스 필터 선택자 (0) | 2022.06.09 |
|---|---|
| [jQuery] 순서 필터 선택자 (0) | 2022.06.09 |
| [jQuery] 기본 선택자(basic selector) 조합 (0) | 2022.06.08 |
| [jQuery] 기본 선택자(basic selector) (0) | 2022.06.08 |
| [jQuery] jQuery 개발환경 준비 (0) | 2022.06.08 |