학습한 내용
jQuery 2일차. jQuery 함수, Ready 함수, jQuery 선택자에 대해서 학습했다.
학습소감
1️⃣🟢 JavaScript의 window.onload와 jQuery의 Ready 함수는 흡사하지만 window.onload는 제일 마지막 것만 동작하고 Ready는 모든 부분이 동작한다.
<div id="result"></div>
<script>
window.onload=function() {
var result = document.getElementById("result");
result.innerHTML += "on load 1<br/>";
}
window.onload=function() {
var result = document.getElementById("result");
result.innerHTML += "on load 2<br/>";
}
window.onload=function() {
var result = document.getElementById("result");
result.innerHTML += "on load 3<br/>";
}
</script>실행결과
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#result").append("ready 1<br/>");
});
$(document).ready(function() {
$("#result").append("ready 2<br/>");
});
$(document).ready(function() {
$("#result").append("ready 3<br/>");
});
</script>실행결과
2️⃣🟢 jQuery 선택자 종류
| 선택자 종류 | 선택자 | 내용 |
|---|---|---|
| 기본 선택자 | 전체 선택자 (*) | HTML 문서 내의 모든 태그를 선택 |
| 태그이름 선택자 (태그이름) | 지정한 태그이름에 해당하는 태그 객체를 가져온다 | |
| 아이디 선택자 (#id) | id 속성을 통해 태그 객체를 가져온다 | |
| 클래스 선택자 (.class) | class 속성을 통해 태그 객체를 가져온다 | |
| 기본 선택자 조합 | 선택자1, 선택자2 | 동시에 여러 태그를 선택할 때 사용 |
| 선택자1 > 선택자2 | 태그의 바로 하위의 태그들을 선택할 때 사용 | |
| 선택자1 선택자2 | 태그 내부의 모든 태그들을 선택할 때 사용 | |
| 선택자1.선택자2 | 모든 선택자를 만족하는 태그를 선택 | |
| 선택자1 + 선택자2 | 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택 | |
| 선택자1 ~ 선택자2 | 선택자1 태그 다음에 있는 모든 선택자2 태그를 선택 | |
| 순서필터 선택자 | :first | 선택자에 해당하는 태그 중 가장 처음 태그 |
| :first-child | 선택자에 해당하는 태그 중 각 영역별 첫 번째 태그가 선택 | |
| :first-of-type | 선택자에 해당하는 태그 중 각 영역별 처음 태그가 선택 | |
| :last | 선택자에 해당하는 태그 중 가장 마지막 태그가 선택 | |
| :last-child | 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택 | |
| :last-of-type | 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택 | |
| :odd | 인덱스 번호(0부터 시작)가 홀수인 태그 선택 | |
| :even | 인덱스 번호(0부터 시작)가 짝수인 태그 선택 | |
| :only-child | 영역내에서 선택자에 해당하는 태그가 하나일 경우 선택 | |
| :only-of-type | 영역내에 선택자에 해당하는 태그가 하나일 경우 선택 | |
| 인덱스 필터 선택자 | :ep(인덱스) | 인덱스(0부터 시작)에 해당하는 태그를 선택 |
| :nth-child(인덱스) | 각 영역의 인덱스(1부터 시작)에 해당하는 태그를 선택 | |
| :nth-of-type(인덱스) | 각 영역의 인덱스(1부터 시작)에 해당하는 태그를 선택 | |
| :gt(인덱스) | 선택자에 해당하는 태그 중 인덱스(0부터 시작) 태그 이후의 태그들이 선택 | |
| :lt(인덱스) | 선택자에 해당하는 태그 중 인덱스(0부터 시작) 태그 이전의 태그들이 선택 | |
| :nth-last-child(인덱스) | 뒤에서 인덱스(1부터 시작)번째 태그가 선택, 선택자 다르면 선택 안됨 | |
| :nth-last-of-type(인덱스) | 뒤에서 인덱스(1부터 시작)번째 태그가 선택 | |
| :not | 선택자에 해당하지 않는 태그들이 선택 | |
| 속성 선택자 | [속성] | 속성을 가지고 있는 태그를 선택 |
| [속성 = 값] | 속성의 값이 지정된 값과 일치하는 태그를 선택 | |
| [속성 != 값] | 속성의 값이 지정된 값과 일치하지 않는 태그를 선택 | |
| [속성 $= 값] | 속성의 값이 지정된 값으로 끝나는 태그를 선택 | |
| [속성 |= 값] | 속성의 값이 지정된 속성의 값과 일치하거나 지정된 속성으로 시작하고 하이픈으로 연결된 태그를 선택 | |
| [속성 ^= 값] | 속성의 값이 지정된 값으로 시작하는 태그를 선택 | |
| [속성 ~= 값] | 속성의 값이 지정된 값을 단어로 가지고 있는 태그를 선택 | |
| [속성 *= 값] | 속성의 값이 지정된 값을 포함하는 태그를 선택 | |
| 상태 선택자 | :header | h1 ~ h6 태그를 선택 |
| :focus | 현재 포커스가 주어진 태그를 선택 | |
| :contains('문자열') | 지정된 문자열이 포함되어 있는 태그를 선택 | |
| :has(선택자) | 지정된 선택자를 포함하고 태그를 선택 |
열정! 열정! 열정!