jQuery(jQuery 기본 및 DOM 조작 가이드)_2024-07-29

선택자와 이벤트

1) 기본 선택자

$("p") : 모든 <p>태그 선택

$("#test") : id가 "test"인 요소 선택

2) 이벤트

click() : 클릭 이벤트 발생 시 실행

dblclick : 더블 클릭 이벤트

mouseenter : 마우스가 요소 위로 이동할 때

mouseleave : 마우스가 요소 밖으로 이동할 때

mousedown : 마우스 버튼을 누를 때

hover() : 마우스가 요소 위로 이동하거나 벗어날 때

focus() : 요소가 포커스를 얻을 때 (주로 input 요소)

blur() : 요소가 포커스를 잃을 때

 

복잡한 선택자

1) 하위 요소 선택

.list2 > li[class*='list']:class 속성에 "list"를 포함하는 .list2의 모든 li자식 요소 선택

.list1 > li[class = 'list_1']:class 속성이 "list_1"인 .list1의 모든 li자식 요소 선택

 

요소의 표시/숨기기 및 애니메이션

1) 표시/숨기기

show() : 요소를 보여줌

hide() : 요소를 숨김

2) 페이드

fadeIn() : 요소를 점차적으로 보여줌

fadeOut() : 요소를 점차적으로 숨김

3) 슬라이드

slideDown() : 요소를 아래로 슬라이드하며 보여줌

slideUp() : 요소를 위로 슬라이드하며 숨김

4) 애니메이션

animate() : 커스텀 애니메이션 생성

5) 애니메이션 중지

stop() : 진행 중인 애니메이션 중지

 

DOM 조작

1) 내용 변경

text() : 요소의 텍스트 내용 변경

html() : 요소의 HTML 내용 변경

val() : input 요소의 값 변경

attr() : 요소의 속성 값 변경

2) 요소 추가

append() : 자식 요소를 마지막에 추가

prepend() : 자식 요소를 처음에 추가

after() : 요소 뒤에 새로운 요소 추가

before() : 요소 앞에 새로운 요소 추가

4) 요소 삭제

remove() : 선택된 요소를 삭제

empty() : 선택된 요소의 모든 자식 요소를 삭제

 

클래스 조작

1) 클래스 추가/삭제

addClass() : 클래스 추가

removeClass() : 클래스 삭제

toggleClass() : 클래스 토글 (있으면 삭제,없으면 추가)

2) CSS 스타일 변경

css() : CSS 스타일 설정

 

기타 유용한 메소드

1) 요소 선택

first() : 첫 번째 요소 선택

last() : 마지막 요소 선택

eq() : 특정 인덱스의 요소 선택

filter() : 조건에 맞는 요소 선택

not() : 조건에 맞지 않는 요소 선택