일지이기 때문에 일기의 성격이 더 강합니다.
드디어 오늘의 일지를 쓴다. 문제는 jQuery는 이론적인 것보다 실 코드가 더 많아서 그만큼 내 일지도 짧아진다. 과제 관련해서는 TIL에서 다룰 거라서 그렇다. 내일은 개인 의뢰 일지도 적어야겠다.
jQuery 선택자
선택자를 이어서 한다. 다음 표로 정리했다.
| 요소:필터 | 설명 |
| 요소:odd | 홀수 번째 요소 선택 |
| 요소:even | 짝수 번째 요소 선택 |
| 요소:first | 첫 번째 요소 선택 |
| 요소:last | 마지막 요소 선택 |
| 요소:checked | 체크된 요소 선택 (* checkbox, radio) |
| 요소:selected | 선택된 요소 선택 (* select) |
| 요소:disabled | 비활성화 입력요소 선택(* input, select, textarea 등) |
| 요소:enabled | 활성화 입력요소 선택 (* input, select, textarea 등) |
| 요소:focus | 현재 커서가 놓여진 입력요소 선택 (* input, select, textarea 등) |
| 요소:eq(n) | n번째 요소 선택 |
| 요소:not(선택자) | 선택자와 일치하지 않는 요소 선택 |
| 요소:lt(n) | n번째 미만 요소 선택 |
| 요소:gt(n) | n번째 초과 요소 선택 |
| 요소:has(선택자) | 선택자를 가지고 있는 요소 선택 |
| 요소:nth-child(n+x) | n의 배수 + x번째 요소 선택. (2n, 2n+1 등) |
| 속성 선택 | 설명 |
| 태그명[속성] | [] 안의 속성(attribute)을 포함하는 모든 태그 선택 |
| 태그명[속성="지정값"] | 속성(attribute) 내의 값이 지정값과 동일한 모든 태그 선택 |
| 태그명[속성^="지정값"] | 속성(attribute) 내의 값이 지정값으로 시작하는 모든 태그 선택 |
| 태그명[속성$="지정값"] | 속성(attribute) 내의 값이 지정값으로 끝나는 모든 태그 선택 |
| 태그명[속성*="지정값"] | 속성(attribute) 내의 값이 지정값을 포함하는 모든 태그 선택 |
jQuery 변수
jQuery 변수는 $변수명 = $('선택자')를 사용하여 Object 선택자를 사용할 수 있다. 이렇게 되면, 하나하나 DOM 선택을 하지 않아도 변수 자체로 DOM이 된다. 물론 변수명 = $('선택자') 자체도 사용된다. $divLen = $('div').length; 이것도 사실 사용이 가능하다.
jQuery 이벤트
메서드 사용 기본 구조
$(대상).이벤트 유형.이벤트 핸들러
형태로 나타난다.
$(대상) → 선택자 등으로 대상 DOM(노드 등)을 선택한다.
이벤트 유형 → click, mouseover 등 이벤트 유형을 선택한다.
이벤트 핸들러 → 이벤트 처리 함수를 선택한다(function(){ … } 형태)
.hover()
다음처럼 사용된다.
$(대상).hover(
function(){ //mouseenter 시의 동작
},
function(){ //mouseleave 시의 동작
}
);
.on('이벤트 유형',function(){ … });
그룹 이벤트 등록을 위한 on이다. 이벤트 유형은 따라서 복수의 것이 들어갈 수 있고, 쉼표로 구분된다. (ex: mouseover, mouseout)
이 on에는 동적 연결도 가능한데, 다음처럼 이용하면 된다.
$(document).on('이벤트 유형', '대상', function(){ … });
이렇게 하면 동적으로 요소가 생성되어도 연결이 가능하다.
window 이벤트들
| 이벤트 | 설명 |
| ready | 문서 객체가 load되면 발생(DOM 로드) 리소스, 이미지, 음악 등이 load되지 않아도 발동. |
| resize | 윈도우 창이 변경 시 발생 |
| scroll | 윈도우 창이 스크롤 이동 시 발생 |
| load | 문서 객체 요소가 load되면 발생(DOM 로드) 리소스, 이미지, 음악 등이 전부 load되어야 발동. |
| unload | 문서 객체를 닫을 때 발생 |
ready와 load는 엄연히 성격이 다르다.
거기에 둘의 사용처는 다르다. ready는 document가 전부 로드되면 바로 발동한다. 즉, HTML 파일의 로드만 신경 쓴다고 봐도 된다. 그러나 load는 모든 리소스가 로드되는지 확인한다. 둘 중 ready가 더 많이 쓰인다. 둘의 속도에서 차이가 나기 때문.
그 외 각종 이벤트들
[jQuery] 마우스 이벤트 및 각종 이벤트 정리
jQuery 이벤트 정리이다. 마우스 이벤트 이벤트 설명 click 노드(elements)를 마우스 포인터로 눌렀다가 떼었을 때에 발생 dblclick 노드를 더블 클릭 했을 때에 발생 hover mouseenter와 mouseleave 이벤트를 한
grandma-coding.tistory.com
남의 잘 정리되어 있는 포스트를 올리고 종료한다.
'부트캠프 일지 > Java 풀스택 과정 강의' 카테고리의 다른 글
| [Java 풀스택 과정 강의] 1월 22일 (0) | 2026.02.04 |
|---|---|
| [Java 풀스택 과정 강의] 1월 16일자 (0) | 2026.01.16 |
| [Java 풀스택 과정 강의] 1월 14일차 (0) | 2026.01.15 |
| [Java 풀스택 과정 강의] 1월 13일차 (0) | 2026.01.15 |
| [Java 풀스택 과정 강의] 1월 12일차 (0) | 2026.01.13 |
