JQuery 사용법

JQuery 기본 사용법

1)기본 문법

ex)

$(selector).action()

 

$:JQuery에서 정의 및 접근에 사용

(selector): HTML 엘레먼트

action():해당 엘리먼트에서 수행할 동작

 

2)실렉터 - HTML 엘리먼트에 접근

-JQuery 실렉터는 엘리먼트를 선택하여 작업을 처리하기 위해 사용한다.

 

-모든 JQuery의 실렉터는 $로 시작해 $()와 같은 형태로 사용한다.

 

-()안에는 엘리먼트명, 엘리먼트의 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 엘리먼트 객체의 내용에 접근해야 엘리먼트의 내용을 변경할 수 있다.

 

-$("p")와 같은 형태는 HTML 엘리먼트의 객체 자체에 접근하는 것이며, 내용에 접근하려면 text(),html(),val() 메소드 중 하나를 사용해야 한다.

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

 4) 이벤트

-이벤트는 마우스를 이동하거나 엘리먼트 또는 라디오버튼 등을 클릭하는 동작에 의해 발생하는 것

 

-JQuery에서도 웹 페이지에서 발생한 이벤트를 제어하는 방법을 제공한다.

 

-자주 사용하는 이벤트

마우스 이벤트(mouse events)	설명
click	엘리먼트 클릭 시 발생
dblclick	엘리먼트 더블클릭 시 발생
mouseenter	엘리먼트에 마우스 포인터가 위치
mouseleave	엘리먼트에 위치한 마우스 포인터가 벗어나면 발생

ex)

$("p").click(function(){//<p>엘리먼트에서 클릭 이벤트 발생 시 실행

  alert("test");

});

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

ex)

$("input").keypress(function(){//<input>엘리먼트가 포커스를 받으면 발생

  $(this).css("font-color","#cccccc:);

})

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

ex)

$("input").focus(function(){//<input>엘리먼트가 포커스를 받으면 발생

  $(this).css("background-color","#cccccc:);

})

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

ex)

$(document).ready(function(){//페이지 로드가 완료되면 발생

  //id 속성의 값이 result인 엘리먼트에 test.txt 파일을 로드함

  $("#result").load("test.txt");

});

 

4)JQuery Ajax

-JQuery는 Ajax 기능을 구현하는 메소드들을 제공한다.

 

-이 메소드들은 서버로부터 text,HTML,XML 또는 JSON형태의 파일을 요청하고 응답받을 수 있는 기능을 제공한다.

 

-이들 메소드를 사용하면 간단한 코드만을 이용해서 Ajax 기능을 구현할 수 있다.

 

-Ajax 관련 메소드 중 서버 요청과 관련된 메소드

메소드명	설명
$.get()	서버로 HTTP get 방식의 요청을 함
$.getJSON()	HTTP get 방식을 사용해서 JSON 데이터를 요청함
$.post()	서버로 HTTP post 방식의 요청을 함
.load()	서버로 데이터를 요청하고 HTML 엘리먼트에 응답받는 결과를 로드함(넣음)
$.ajax()	비동기 Ajax 요청을 수행함. get,post 방식을 지정해서 사용

1 .load() 메소드

-서버에 요청하고 지정한 엘리먼트에 응답받은 결과를 넣는다.

 

-응답받은 결과를 화면에 표시해야 하는 로그인 폼, 회원 가입 폼, 글목록 등을 실행할 때 주로 사용한다.

 

-$.get(url, data, success) 메소드와 처리 결과가 거의 같다.

 

ex)

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

 

url: 서버에 요청할 url이며 문자열로 지정한다.(필수 요소)

data: 전송할 파라미터이며 키와 값의 쌍을 문자열 또는 객체로 기술한다.(선택 요소)

complete(responseText, textStatus, XMLHttpRequest):

서버가 처리한 요청에 대한 응답 결과를 얻어낸다.(선택 요소)

responseText에 응답 결과textStatus에 응답된 상태XMLHttpRequest에 XMLHttpRequest 객체가 포함된다.

 

 

2. $.get() 메소드

-서버로 HTTP get 방식의 요청을 한다.

 

-.load() 메소드를 사용하는 것과 결과가 거의 같다.

ex)

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

 

url: 서버에 요청할 url이며 문자열로 지정한다.(필수 요소)

data: 전송할 파라미터이며 키와 값의 쌍을 문자열 또는 객체로 기술한다.(선택 요소)

success(data, textStatus, jqXHR):

서버가 처리한 요청이 성공하면 이 콜백 함수는 실행된다.(선택 요소)

data는 요청된 페이지의 내용(처리 결과)

textStatus는 처리상태

jqXHR는 XMLHttpRequest 객체

 

3. $.post() 메소드

-서버로 HTTP post 방식의 요청을 한다.

ex)

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

 

url: 서버에 요청할 url이며 문자열로 지정한다.(필수 요소)

data: 전송할 파라미터로 문자열 또는 객체로 기술한다.(선택 요소)

success(data, textStatus, jqXHR):

서버가 처리한 요청이 성공하면 이 콜백 함수는 실행된다.(선택 요소)

data는 요청된 페이지의 내용(처리결과)

textStatus는 처리 상태

jqXHR는 XMLHttpRequest 객체

 

4. $.Ajax() 메소드

-서버로 비동기 Ajax요청을 하며 주로 로그인 처리,회원 가입 처리, 글쓰기 처리 등과 같이 DB와 연동 후 처리 결과만을 반환하는 경우에 사용하면 좋다.

 

ex)

$.ajax({type:vlaue, url:value, data:value, success:function(data){} ...})

 

type: 서버에 요청할 HTTP 방식으로 get 또는 post를 지정한다.

url: 서버에 요청할 url이며 문자열로 지정한다.(필수 요소)

data: 전송할 파라미터이며 문자열 또는 객체로 기술한다.(선택 요소)

success: 서버가 처리한 요청이 성공하면 function(data)()콜백 함수가 실행된다. 매개 변수 data는 처리 결과를 반환받는다.