jQuery 요소 탐색, 클래스 조작, 이벤트

요소의 탐색

jQuery 쓰는 법	의미	예시
• $( 선택자 ).parent().함수()	• 바로 위에 존재하는 하나의 부모 요소 선택
• $( 선택자 ).parents().함수()	• 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택
• $( 선택자 ).next().함수()	• 선택된 요소 바로 다음에 위치한 형제 요소 선택
• $( 선택자 ).prev().함수()	• 선택된 요소 바로 이전에 위치한 형제 요소 선택
• $( 선택자 ).children().함수()	• 선택된 요소의 자식 요소 모두 선택

 

클래스 조작하기

jQuery 쓰는 법	의미	예시
• $( 선택자 ).addClass(“클래스명”)	• 선택된 요소에 클래스 추가	• $("h1").addClass(“.c1”)
• $( 선택자 ).removeClass(“클래스명”)	• 선택된 요소에 클래스 삭제	• $("h1").removeClass(“.c1”)
• $( 선택자 ).hasClass(“클래스명”)	• 선택된 요소에 클래스가 있는지 여부 확인 • Return 값은 true 와 false 로 나온다.	• $("h1").hasClass(“.c1”)
• $( 선택자 ).toggleClass(“클래스명”)	• 선택된 요소에 클래스가 있으면 추가, 없으면 삭제	• $("h1").toggleClass(“.c1”)
• $( 선택자 ).switchClass(“클래스명1”, “클래스명2”, 시간)	특정 시간에 클래스를 바꿈	• $("h1").switchClass(“.c1”."c2",1000)

 

 

jQuery 이벤트 리스너 

 

jQuery 쓰는 법	의미	예시
$().ready() || $()	로딩 시에 실행
$().`click()	선택자로 선택된 태그를 클릭 시 실행
$().mouseover()	선택자로 선택된 태그에서 마우스를 내렸을 시 실행
$().hover()	선택된 태그에 마우스를 올렸을 때 실행
$().scroll()	스크롤을 내렸을 떄 실행
$().keydown()	키를 눌렸을 때 실행
$().keyup()	키를 땠을 때 실행