[jQuery] 기본 구문&이벤트 메서드

1. jQuery 구문

• $(선택자).행동()

ex)

$(this).hide() - 현재 모든 요소를 숨김

$("p").hide() - 모든 <p> 요소를 숨김

$(".test").hide() - class="test"인 모든 요소를 숨김

$('#test').hide() - id="test"인 요소를 숨김

2. 문서 준비 이벤트

• $(document).ready(function() { // jQuery methods go here.... });

• 문서 로드가 완료(준비)되기 전에 jQuery 코드가 실행되는 것을 방지하기 위한 것

3. jQuery Selectors(선택자)

1) 요소(element) 선택자

ex) $("p")

2) #id 선택자: id는 페이지 내에서 고유해야 하므로 고유한 단일 요소를 찾으려면 #id 선택자 사용

ex) $("#test")

3) .class 선택자

ex) $(".test")

4) 그 외 선택자

ex) $(this) - 현재 HTML 요소

4. jQuery Event Methods

ex) 요소 위로 마우스 이동, 라디오 버튼 선택, 요소 클릭

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

5. 이벤트 메서드에 대한 jQuery 구문

ex) $("p").click(function(){ });

6. 일반적으로 사용되는 jQuery 이벤트 메서드

1) $(document).ready() - 문서가 완전히 로드되었을 때 함수 실행

2) click() - 사용자가 HTML 요소를 클릭했을 때 함수 실행

3) dblclick() - 사용자가 HTML 요소를 두 번 클릭하면 함수 실행

4) mouseenter() - 마우스 포인터가 HTML 요소에 들어가면 함수 실행

5) mouseleave() - 마우스 포인터가 HTML 요소를 벗어나면 함수 실행

6) mousedown() - 마우스 버튼을 누를 때 함수 실행

7) mouseup() - 마우스 버튼을 땔 때 함수 실행

8) hover() - 첫 번째 함수는 마우스가 HTML 요소에 들어갈 때 실행되고, 두 번째 함수는 마우스가
HTML 요소를 떠날 때 실행됨

9) focus() - 양식 필드가 포커스를 받으면 함수 실행

10) blur() - 양식 필드가 포커스를 잃으면 함수 실행

7. on() 메서드

• 선택한 요소에 대해 하나 이상의 이벤트 처리기 연결

ex)

$("p").on({
	
    mouseenter: function() {
    	//action
    },
    mouseleave: function() {
    	//action
    }
    
 });