JQuery & Ajax 정리

1. JQuery 

• Javascript로 HTML을 쉽게 제어 목적
• JavaScript Document 기반 접근은 복잡하므로 대신 사용.

 

2. JQuery Selectors

• 이름, ID, 클래스, 유형, 속성 값등을 기반으로 HTML 요소 찾는데 사용

$("p")	요소 선택기
$("#test")	id 속성 기반 찾기
$(".test")	class 속성 기반 찾기

 

3. JQuery 이벤트 메서드

• Mouse, Keyboard Events, Document, Windows, Form Events 등의 DOM 이벤트 메서드 

$(document).ready()	문서 로드시 함수 실행
$("p").click(**함수**)	HTML 요소 클릭시 함수 실행
$("p").dblclick(**함수**)	HTML 요소 더블클릭시 함수 실행
$("#p").mouseenter(**함수**) mouseleave(), mousedown(), mouseup()	HTML 요소 마우스 들어올 때 함수 실행
hover(**함수1**, **함수2**)	mouseenter() + mouseleave() 함수 들어오고(1) 나갈때(2)
focus(), blur()	양식필드에 포커스 있을 때 / 없을 때
$("p").hide(), .show()	숨기기, 표시하기
기타	JQuery Fade / JQuery 토글 / JQuery 슬라이드

 

4. JQuery Get, Add, Remove

• HTML 요소와 속성 변경 방법 및 콘텐츠 가져오기
• HTML 콘텐츠 추가/제거

text()	텍스트 내용 설정 및 반환
html()	html 요소 내용 설정 및 반환
val()	필드값 설정 및 반환
attr()	속성 값 가져오기
append()	선택 요소 끝에 내용 삽입
prepend()	선택 요소 시작 부분에 삽입
after()	선택 요소 뒤에 내용 삽입
before()	선택 요소 이전에 내용 삽입
remove()	선택 요소 제거
empty()	자식 요소 제거

 

5. JQuery AJAX

• JQuery Load() 메서드 기반 AJAX(Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml) 메서드
• 서버에 데이터를 요청하고 받아보기 가능

5. 1 Ajax 기본 골격

• success: 성공시, response 값에 서버의 결과 값을 담아 함수를 실행

$.ajax({
  type: "GET", // GET 방식으로 요청
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워서감)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})