[HTML 요약정리] 05-4. 제이쿼리를 사용한 태그 제어와 Ajax

 

 

1. 개요

 

제이쿼리(jQuery)는 빠르고 가볍고 다양한 기능을 가진 자바스크립트 라이브러리로,

2005년 처음 소개 되었으며 2006년 존 레식이 공식적으로 소개했다.

MIT 라이선스와 GNU GPL(General Public Licence)의 이중 라이선스를 가진 오픈 소프트웨어이다

 

2. 제이쿼리 기본 사용법

 

제이쿼리 라이브러리를 사용하려면 http://jquery.com/ 사이트에서 다운로드 받아서 소스에 포함하거나

CDN을 사용해서 HTML 파일에 포함한다

http://jquery.com/

jQuery

 

• 기본 문법
  jQuery는 HTML 엘리먼트(태그)를 사용해서 어떤 동작을 수행한다

$(selector).action()

 

• 실렉터(selector) - HTML 엘리먼트에 접근
  실렉터는 어떤 작업을 처리하기 위해 특정 엘리먼트를 선택하는 데 사용된다.

$(엘리먼트명/#엘리먼트의 id 속성 값/.엘리먼트의 class 속성 값/객체명)

 

실렉터	표시형태	사용 예
엘리먼트명	$("엘리먼트명")	-HTML 태그 <p>연습</p> -JS(자바스크립트)에서 접근 $("p")
엘리먼트의 id 속성 값	$("#id 속성 값")	-HTML 태그 <p id="test">연습</p> -JS에서 접근 $("#test")
엘리먼트의 class 속성 값	$(".class 속성 값")	-HTML 태그 <p class="t1">연습</p> -JS에서 접근 $(".t1")

 

3. HTML 엘리먼트 내용에 접근하기 -get/set

 

HTML 엘리먼트 객체의 내용에 접근해야 엘리먼트(태그)의 내용을 변경할 수 있다

 

메소드	설명
text()	선택한 엘리먼트의 내용을 텍스트 형태로 지정하거나 얻어낸다
html()	선택한 엘리먼트의 내용을 HTML 태그를 포함하여 지정하거나 얻어낸다
val()	폼 필드의 값을 지정하거나 얻어낸다

 

4. 제이쿼리 이벤트 처리

 

• 마우스 이벤트
  마우스 이벤트는 마우스 클릭, 더블클릭, 마우스 포인터의 위치 등에 발생한다

Mouse Events(마우스 이벤트)	설명
click	엘리먼트를 클릭 시 발생
dblclick	엘리먼트를 더블클릭 시 발생
mouseenter	엘리먼트에 마우스 포인터가 위치
mouseleave	엘리먼트에 위치된 마우스 포인터가 나가면 발생

 

• 키보드 이벤트
  키보드 이벤트는 키보드의 키를 투르거나, 누른 상태에서 놓을 때 발생한다

Keyboard Events(키보드 이벤트)	설명
keypress	키보드를 눌렀다 놓으면 발생
keydown	키보드를 누르면 발생
keyup	눌린 키보드를 놓으면 발생

 

• 폼 이벤트
  폼 이벤트는 <input>, <select>, <textarea>등의 폼 엘리먼트가 포커스를 받거나 잃는경우 또는 폼 전송 시 발생한다

Form Events(폼 이벤트)	설명
submit	폼을 전송 시 발생
change	폼 엘리먼트가 변경되면 발생
focus	폼 엘리먼트의 포커스가 위치되면 발생
blur	폼 엘리먼트가 포커스를 잃으면 발생

 

• 도큐먼트/윈도우 이벤트
  도큐먼트/윈도우 이벤트는 웹 페이지의 로드가 발생되거나 완료되는 경우 또는
  웹브라우저 창의 크기가 변경되거나 스크롤이 이동될 때 발생한다

Document/Window Events (도쿠먼트/윈도우 이벤트)	설명
ready	페이지의 로드가 완료되면 발생
load	페이지가 로드되면 발생
resize	웹 브라우저의 창의 크기를 변경하면 발생
scroll	웹 브라우저 창의 스크롤을 이동하면 발생
unload	페이지가 언로드되면 발생

 

5. 제이쿼리 Ajax

 

• .load() 메소드
  이 메소드는 서버에 요청하고 지정한 엘리먼트에 응답 받은 결과를 넣는다

엘리먼트.load(url [,data] [,complete(responseText, textStatus, XMLHttpRequest)
])

 

• $.get()
  서버로 HTTP get 방식의 요청을 한다

$.get(url [,data] [,success(data, textStatus, jqXHR)][,dataType])

 

• $.post()
  서버로 HTTP post 방식의 요청을 한다

$.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])

 

 

2024.09.02