[jQuery] 제이 쿼리(jQuery), Ajax(Asynchronous JavaScript And XML)

✏️jQuery

• 자주 사용되는 자바스크립트 라이브러리
•  write less, do more 라는 캐치-프레이즈(catchphrase)를 내세움
• 코딩량이 매우 절감됨
• 2006 년 존 레식(John Resig)이 발표
• https://jquery.com/download/ 에서 Download the compressed, production jQuery 3.x.x 선택 후 마우스 우클릭하여 "다른이름으로 링크 저장" 후 이클립스에 복사(/web02/src/main/webapp/include/jquery-3.x.x.min.js)

✏️jQuery 구조

<!-- 약식표현(실무에서 주로 쓰임)-->

$( function() { //jQuery 코드 블럭
// 실행할 코드
});

✏️이벤트 처리

• $(선택자).이벤트(함수); //한개의 이벤트 처리
• $(선택자).bind(이벤트:함수, 이벤트:함수,...); //여러개의 이벤트 처리

✏️이벤트의 종류 (자바스크립트의 on 이라는 이름이 빠짐)

• click
• mouseover
• focus
• blur

✏️ 애니메이션 효과

• show("slow"), show("fast") 느리게 보이기, 빠르게 보이기
• hide() 숨기기
• tiggle() show/hide를 교대로
• animate() 애니메이션 효과
• stop() 애니메이션 중지
• fadein() 페이드인 효과
• fadeout() 페이드아웃 효과
• slideup() 슬라이드를 올림
• slidedown() 슬라이드를 내림

✏️ jQuery를 이용한  Dom 변경

• $(선택자).text() 텍스트를 가져옴
• $(선택자).text("변경할 내용") 텍스트 변경
• $(선택자).html() html 코드를 가져옴
• $(선택자).html("변경할 내용") html 코드를 변경
• $(선택자).val() 입력필드의 값을 가져옴
• $(선택자).val( "변경할 내용" ) 입력필드의 값을 변경함
• $(선택자).attr( "변경할 속성" ) 요소의 속성 가져오기
• $(선택자).append(" 추가할 요소 ") DOM 요소 추가
• $(선택자).remove() DOM 에서 삭제 처리

✏️CSS 조작

• $(선택자).css("속성") css 속성 값 가져오기
• $(선택자).css("속성","값") css 속성 값 변경

---

✏️Ajax(Asynchronous JavaScript And XML, 비동기적인 자바스크립트와 XML)

• 클라이언트가 서버와 적은 양의 데이터를 교환하여 비동기적으로 웹페이지를 업데이트하는 기술
• 빠르고 동적인 웹페이지를 만드는데 유용한 기술
• 사용 예 : 구글 맵, 키워드 검색 기능 등

1) 동기식과 비동기식

• Synchronized 동기식 : A 작업이 종료된 후 B 작업을 시작할 수 있음(single thread)
• Asynchronized 비동기식 : A 작업과 B 작업을 동시에 실행 가능(multi thread)

2) 비동기식 서버 요청과 관련된 메소드

$.ajax({
type: "POST",
url: "loginPro.jsp",
data: query, <!-- 전송할 데이터 -->
success: function(data){} <!-- 정상적으로 처리되었을 때의 코드 -->
});