CH5- sec4. 동작을 처리하는 자바스크립트와 제이쿼리 라이브러리

<section 04 : 제이쿼리를 사용한 태그 제어와 Ajax>

제이쿼리는 현재 가장 많이 사용되는 자바스크립트 라이브러리 >>웹 애플리케이션의 작성이 쉬워지며, 자바스크립트나 ajax 및 DOM 관련 작업을 간단히 처리해줌.

▶기본 문법

제이쿼리는 HTML 엘리먼트를 사용해서 어떤 동작을 수행한다

엘리먼트를 사용한다는 것은 제어하는 것으로 , 태그를 제어하기 위해서는 어떤 태그에 어떤 동작이 발생했을 때 어떻게 제어할지를 지정해야 한다

동작이 발생되는 태그를 실렉터라 한다.

기본적으로 동작이 발생되는  태그인 실렉터에서 특정동작이 발생되면 처리하는 문법은 $(selector).action() 이다

-$: 제이쿼리에서 태그 접근에 사용

-(selector) : html 엘리먼트(태그명)

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

$(this).hide() : 현재 엘리먼트를 숨김. this는 이벤트가 발생한 엘리먼트
$("p").hide() : <p> 엘리먼트들을 숨김
$(".test").hide() : class속성의 값이 test인 엘리먼트를 숨김
$("#test").hide() : id속성의 값이 test인 엘리먼트를 숨김

 

▶ 실렉터 - 어떤 작업을 처리하기 위해 특정 엘리먼트를 선택하는데 사용됨

실렉터에는 엘리먼트명, 엘리먼트의 id속성 값, 엘리먼트의 class속성 값을 사용할 수 있다

모든 제이쿼리의 실렉터는 $로 시작해 $() 와 같은 형태로 사용함

 

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

 

▶제이쿼리 이벤트 처리

마우스이벤트  : 

click/dbclick/mouseenter/mouseleave키보드이벤트 : keypress/keydown/keyup폼이벤트 : submit/change/focus/blur도규먼트/ 윈도우 이벤트 : ready/load/resize/scroll/unload

 

▶제이쿼리 Ajax

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