html부터 웹사이트 개발까지! - Jquery편

✏️ Jquery 기초

제이쿼리란?

• 오픈 소스 기반의 자바스크립트 라이브러리
• 짧고 단순한 코드로 웹 페이지에 다양한 효과나 연출을 적용

제이쿼리 역사

• 2006년 미국의 존 레식이 뉴욕시 바캠프에서 처음으로 소개
• 현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지보수를 담당

제이쿼리의 장점

• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원
• HTML DOM을 손쉽게 조작, CSS 스타일도 간단히 적용 가능
• 애니메이션 효과나 대화형 처리를 간단하게 적용
• 같은 동장을 하는 프로그램을 더욱 짧은 코드로 구현 가능
• 다양한 플러그인과 참고할 수 있는 문서가 많이 존재
• 오픈 라이선스를 적용하여 누구나 자유롭게 사용 가능

제이쿼리 적용

• 제이쿼리 파일을 로컬에 다운받아 로드하는 방법
  • 직접 다운받아 서버에 저장
• CDN을 이용하여 로드하는 방법
  • 접속자가 서버에서 콘텐츠를 다운받을 때 자동으로 가장 가까운 서버에서 다운받도록함.
  • 특정 서버에 트래픽이 집중되지 않고 콘텐츠 전송 시간이 매우 빨라짐

✏️ 제이쿼리 기본

제이쿼리 문법

• 간단하게 HTML 태그를 선택
• 선택한 태그를 손쉽게 특정 동작을 설정 가능
• 형태

  // $ 기호는 제이쿼리를 의미
  $(선택자).동작함수();

$() 함수

• 선택된 HTML 태그를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할
• 인수로 HTML 태그명, CSS 선택자 등을 설정하여 HTML 요소를 선택할 수 있음
• $() 함수를 통해 생성된 요소를 제이쿼리 객체라함.

ready() 메소드

• 자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤 실행
• 보통은 문제가 없지만 생성되지 않은 HTML 태그를 생성하거나 로드되지 않은 이미지의 크기를 얻으려고 할때 문제가 발생됨.
• 위 문제를 해결하기 위해 자바스크립트에서는 Window 객체의 onload() 메소드 이용
• 제이쿼리에서는 ready() 메소드가 onload() 메소드 역할을 함
• 형태

  // 기본적인 문법
  $(document).ready(function(){
  	제이쿼리 코드;
  });
  // 축약한 버전
  $(function(){
  	제이쿼리 코드;
  });

✏️ 태그 선택

CSS 선택자

• CSS 선택자를 이용해 HTML 태그를 선택 가능
• $()에 전달되는 인수는 방드시 문자열 형태로 전달되야함.
• 태그명, 태그의 id속성(#id속성명), 태그의 클래스 속성(.클래스명), 속성([속성='속성값'])를 이용 가능

제이쿼리 선택자

• 선택한 태그의 저장
  • 선택한 태그들을 변수에 저장하여 사용 가능
  • 형태

    var 변수명 = $("태그명");

• 선택한 태그의 필터링
  • 제이쿼리 선택자를 통해 선택한 태그 중 더욱 세분화된 선택을 하기 위한 필터링 가능
  • 필터링에서 사용하는 선택자 종류
    • :eq(n) : 인덱스가 n인 태그를 선택
    • :gt(n) : 인덱스가 n보다 큰 태그를 모두 선택
    • :lt(n) : 인덱스가 n보다 작은 태그를 모두 선택
    • :even : 인덱스가 짝수인 태그를 모두 선택
    • :odd : 인덱스가 홀수인 태그를 모두 선택
    • :first : 첫번째 태그를 선택
    • :last : 마지막 태그를 선택
    • :animated : 애니메이션 효과가 실행 중인 요소를 모두 선택
    • :header : 선택된 태그 중 H1 ~ H6태그가 존재하면 모두 선택
    • :lang(언어) : 지정한 언어의 태그를 모두 선택
    • :not(선택자) : 선택자와 일치하지 않는 태그를 모두 선택
    • :root : 최상위 루트 태그를 선택
    • :target : 웹페이지 URI의 fragment 식별자와 일치하는 태그를 모두 선택
    • :contains(텍스트) : 지정한 텍스트를 포함하는 태그를 모두 선택
    • :has(선택자) : 선택자와 일치하는 자손 태그를 갖는 태그
    • :empty : 자식 태그를 가지고 있지 않은 태그를 모두 선택
    • :parent : 자식 태그를 가지고 있는 태그를 모두 선택
• input 태그 선택
  • input 태그의 type 속성값을 이용해 특정 input태그 선택
  • input 태그 선택자 종류
    • :button : type 속성값이 button
    • :checkbox : type 속성값이 checkbox
    • :file : type 속성값이 file
    • :image : type 속성값이 image
    • :password : type 속성값이 password
    • :radio : type 속성값이 radio
    • :reset : type 속성값이 reset
    • :submit : type 속성값이 submit
    • :text : type 속성값이 text
    • :input : input, textarea, select, button 태그를 모두 선택
    • :checked : 체크박스나 라디오버튼일 때 체크되어 있으면 해당 태그 선택
    • :selected : option 태그 중에서 선택된 태그를 모두 선택
    • :focus : 현재 포커스가 가지고 있는 태그를 선택
    • :disabled : 비활성화되어있는 태그를 모두 선택
    • :enabled : 활성화되어있는 태그를 모두 선택

선택한 태그에 접근하여 데이터 설정/가져오기

• 대표적인 getter/setter 메소드
  • .html() : 해당 태그의 HTML 콘텐츠를 반환/설정 (태그까지 반환/설정)
  • .text() : 해당 태그의 텍스트 콘텐츠를 반환/설정 (태그는 제외, 오직 텍스트만)
  • .width() : 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환/설정
  • .height() : 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환/설정
  • .attr() : 명시된 속성의 속성값을 반환/설정
  • .position() : 첫 번째 태그에 대해 특정 위치에 존재하는 객체를 반환 (getter)
  • .val() : form태그의 값을 반환/설정
• 메소드 체이닝(method chaining)
  • getter 메소드는 첫 번째 태그의 값만 반환
  • setter 메소드는 선택한 모든 태그에 데이터 값을 설정, 선택된 모든 요소에 접근할 수 있는 다른 제이쿼리 객체를 반환
  • 반환된 제이쿼리 객체에 다른 여러 제이쿼리 메소드를 호출하는 방식을 메소드 체이닝이라함
  • .end()를 사용하면 이전에 선택했던 태그들을 다시 선택 가능

✏️ 제이쿼리로 태그 조작하기

태그 추가

• 기존 태그의 내부에 추가
  • .append() : 선택한 태그의 자식 태그 마지막에 새로운 태그 추가
  • .prepend() : 선택한 태그의 자식 태그 처음에 새로운 태그 추가
  • .appendTo(삽입 위치) : 선택한 태그를 삽입 위치의 마지막에 추가
  • .prependTo(삽입 위치) : 선택한 태그를 삽입 위치의 처음에 추가
  • .html() : 해당 태그의 HTML 콘텐츠를 반환/설정 (태그까지 반환/설정)
  • .text() : 해당 태그의 텍스트 콘텐츠를 반환/설정 (태그는 제외, 오직 텍스트만)
• 기존 태그의 외부에 추가
  • .before() : 선택한 태그의 바로 앞에 새로운 태그 추가
  • .after() : 선택한 태그의 바로 뒤에 새로운 태그 추가
  • .insertBefore(삽입 위치) : 선택한 태그를 삽입 위치의 앞에 추가
  • .insertAfter(삽입 위치) : 선택한 태그를 삽입 위치의 뒤에 추가
• 기존 태그를 포함하는 태그를 추가
  • .wrap() : 선택한 태그를 포함하는 새로운 태그를 추가 (선택한 태그 마다 추가)
  • .wrapAll() : 선택한 모든 태그를 포함하는 새로운 태그를 추가
  • .wrapInner() : 선택한 태그에 포함되는 새로운 태그를 추가 (선택한 태그 마다 추가)

태그 복사

• .clone()
  • 선택한 태그를 복사하여 새로운 태그를 생성
  • clone은 태그를 복사해서 새로운 태그를 생성할 뿐 HTML문서에 표시하려면 태그 추가 메소드를 이용해 추가해야함

태그 변경

• .replaceAll()
  • 선택한 태그를 지정한 태그로 변경
  • 인자로 선택자, 제이쿼리 객체, HTML DOM요소, 배열 등을 전달 가능
• .replaceWith()
  • .replaceAll() 메소드의 기능과 비슷
  • 지정된 태그로 대체되어 제거된 기존 태그를 반환
  • 제거된 태그의 데이터와 이벤트 핸들러도 같이 제거

태그 삭제

• .remove()
  • 선택한 태그 삭제
  • 제이쿼리 데이터와 이벤트도 모두 삭제
• .detach()
  • 선택한 태그 삭제
  • remove() 메소드와 달리 제이쿼리 데이터와 이벤트는 계속 유지
  • 태그 추가 메소드를 통해 삭제한 태그를 복구할 수 있음
• .empty()
  • 선택한 태그의 자식 태그를 모두 삭제
• .unwrap()
  • 선택한 태그의 부모 태그를 삭제

✏️ 태그 탐색

조상 태그 탐색

• .parent()
  • 선택한 태그의 부모 태그를 선택
• .parents()
  • 선택한 태그의 조상 태그를 모두 선택
  • 인자로 태그명을 주면 조상 태그 중 해당하는 태그만 선택됨
• .parentsUntil()
  • 선택한 태그의 조상 태그 중 전달받은 선택자에 해당하는 태그 바로 이전까지의 조상 태그만 모두 선택
  • 인자가 없으면 조상 태그를 모두 선택
• closest()
  • 자신을 포함한 조상 태그 중 전달받은 선택자에 해당하는 태그들 중 가장 첫 번째 태그 선택

형제 태그 탐색

• .siblings()
  • 선택한 태그의 형제 태그 중 지정한 선택자에 해당하는 태그를 모두 선택
• .next()
  • 선택한 태그의 바로 다음에 위치한 형제 태그를 선택
• .nextAll()
  • 선택한 태그의 다음에 위치한 형제 태그를 모두 선택
• .nextUntil()
  • 선택한 태그의 이전에 위치한 형제 태그 중 전달받은 선택자 이전까지의 태그를 모두 선택
• .prev(), .prevAll(), .prevUntil()는 .next...() 메소드와 정반대로 동작

자손 태그 탐색

• .children()
  • 선택한 태그의 자식 태그를 모두 선택
  • 인자가 있으면 해당하는 자식 태그만 선택
• .find()
  • 선택한 태그의 자손 태그 중 전달받은 선택자에 해당하는 자손 태그를 모두 선택
  • *를 인자로 넘겨주면 모든 자손 태그를 선택

기타 탐색 방법

• .add()
  • 선택한 태그들에 전달받은 태그를 추가
• .each()
  • 선택한 태그들의 태그마다 전달받은 콜백함수를 실행
• .end()
  • 마지막으로 실행한 메소드의 실행 전 상태로 선택한 태그의 집합을 복원
• .offsetParent()
  • 선택한 태그를 위치시킬 때 기준으로 사용된 조상 태그를 선택
• .contents()
  • 선택한 태그의 자싱 태그를 텍스트 노드와 주석 노드까지 모두 포함하여 선택

필터링 메소드

• .first()와 .last()
  • first()는 선택한 태그의 첫번째 태그를 선택
  • last()는 선택한 태그의 마지막 태그를 선택
• .eq()
  • 선택한 태그 중 전달된 인덱스 위치에 해당하는 태그를 선택
  • 인덱스를 음수로 전달하면 뒤에서부터 검색
• .filter()
  • 선택한 태그 중에서 전달받은 선택자에 해당하거나 함수 호출 결과가 참인 태그를 모두 선택
• .not()
  • 선택자에 해당하거나, 함수 호출 결과가 참인 태그를 제외한 모든 태그 선택
• .has()
  • 전달받은 선택자에 해당하는 태그를 자손 태그로 가지고 있는 태그를 모두 선택
• .is()
  • 전달받은 선택자에 해당하는 태그가 하나라도 존재하면 참을 반환
• .map()
  • 선택한 태그들의 각 태그마다 콜백 함수를 실행, 반환값으로 구성된 제이쿼리 객체 반환
• .slice()
  • 전달받은 인덱스 범위에 해당하는 태그만 선택

✏️ 태그 영역

태그 크기

• .width()와 .height()
  • 선택한 태그 중 첫 번째 태그의 content 영역의 너비(높이)를 반환
  • 선택한 태그의 content 영역의 너비(높이)를 인수로 전달받은 값으로 설정
  • content 영역의 너비와 높이를 구하는 메소드
• .innerWidth()와 .innerHeight()
  • 선택한 태그 중 첫 번째 태그의 content 영역의 너비(높이)와 padding 영역의 너비(높이)를 포함한 값을 반환
• .outerWidth()와 .outerHeight()
  • 선택한 태그 중 첫 번째 태그의 content 영역의 너비(높이)와 padding 영역의 너비(높이), border영역의 너비(높이)를 포함한 값을 반환
  • 인자로 true를 주면 margin영역의 너비(높이)까지 포함

태그 위치

• .offset()
  • 선택한 태그 중 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환
  • 인수를 통해 위치를 설정할 수 있음
• .position()
  • 선택한 태그가 웹 페이지에 위치할 때 기준이 되었던 부모 태그를 기준으로 하는 상대 위치를 반환
• .scrollLeft()
  • 선택한 태그 중 첫 번째 태그의 수평 스크롤바의 현재 위치값 반환
  • 인수를 통해 수평 스크롤 바의 위치를 설정
• .scrollTop()
  • 선택한 태그 중 첫 번째 태그의 수직 스크롤바의 현재 위치값 반환
  • 인수를 통해 수직 스크롤 바의 위치를 설정

✏️ 제이쿼리로 CSS 설정

프로퍼티 설정

• .css()
  • 선택한 태그의 CSS 스타일을 간단하게 설정
  • 여러 CSS 속성을 설정할 때 중괄호({})를 사용하면 한 번에 설정 가능
  • 주의사항으로 CSS 속성명을 작성할 때 하이픈(-)을 제거하고 사용
• .attr()
  • 선택한 태그 중 첫번째 태그의 지정된 속성값을 반환하거나
  • 선택한 태그의 속성의 속성값을 설정
• .prop()
  • 선택한 태그 중 첫 번째 태그의 지정된 프로퍼티값을 반환
  • 선택한 태그의 프로퍼티값을 설정
• 속성과 프로퍼티의 차이점
  • 속성 : HTML 태그의 추가적인 정보를 가지고 있는 이름과 값의 한 쌍
  • 프로퍼티 : 속성을 객체화했을 때 HTML DOM 트리 내부에서의 값
  • 속성은 HTML 문서에 존재X, 프로퍼티는 HTML DOM 트리에 존재하여 값을 변경 가능

클래스 설정

• .addClass()
  • 선택한 태그에 클래스 속성 추가
  • 해당 클래스의 CSS 스타일을 선언한 뒤 해당 메소드를 통해 한꺼번에 스타일 적용
• .removeClass()
  • 선택한 태그의 클래스 속성 삭제
• .toggleClass()
  • 선택한 태그에 토글처럼 클래스 추가 및 삭제를 번갈아가며 할 수 있다.
• .hasClass()
  • 선택한 태그에 인자로 전달된 클래스를 가지고 있는지 체크

✏️ 이벤트

이벤트란?

• 마우스를 움직이거나, 클릭하거나, 텍스트를 입력하는 등 사용자의 동작들을 이벤트라 한다.
• 웹 페이지에서 특정 동작이 발생, 웹 브라우저가 그 사실을 알려주는 것을 의미

이벤트 핸들러(event handler)

• 특정 요소에서 발생하는 이벤트를 처리하려면 이벤트 핸들러를 작성하여 연결해야함.
• 해당 이벤트가 발생하면 연결된 이벤트 핸들러가 실행

이벤트 객체(event object)

• 이벤트 핸들러 함수에서 이벤트 객체를 인수로 전달받을 수 있음
• 이벤트 객체를 이용하여 이벤트의 성질을 결정하거나, 이벤트의 기본 동작을 막을 수도 있음

이벤트 처리

• 이벤트 연결
  • 특정 태그에서 발생하는 이벤트를 처리하기 위해 이벤트 핸들러를 작성, 이벤트 핸들러와 태그를 연결하는 것을 이벤트 연결이라함.
• 이벤트 연결 처리 메소드 변화과정
  • .bind() -> .live() -> .delegate() ->.on() 순서로 연결 처리 메소드 변화함
• 현재 사용되는 이벤트 연결 처리 메소드 종류
  • .on()
    • 태그에 이벤트를 연결
    • on() 메소드 특징
      • 선택한 태그에 어떤 이벤트라도 연결 가능
      • 하나의 이벤트 핸들어에 여러개의 이벤트를 동시에 연결 가능
      • 선택한 태그에 여러개의 이벤트 핸들러와 여러개의 이벤트를 같이 연결 가능
      • 사용자 지정 이벤트를 위해 이벤트 핸들러로 데이터 넘기기 가능
      • 차후 다루게될 태그를 이벤트에 연결 가능
    • 형태

      // 기본적인 문법
      $(선택자).on(이벤트명,function(){
      	제이쿼리 코드;
      });
      // 이벤트를 여러개 설정할 때
      $(선택자).on({
      	이벤트명1 : function(){
      		이벤트1 처리문
      	},
      	이벤트명2 : function(){
      		이벤트2 처리문
      	}, ...
      });

  • .one()
    • 연결된 이벤트 핸들러가 한 번 실행되고 나서는 더 이상 실행되지 않음
    • 같은 이벤트에 대해 한번만 실행된 후 다른 이벤트 핸들러를 실행하고 싶을 때 사용
    • .on() 메소드와 같은 특징을 가짐
  • .off()
    • 더이상 사용하지 않는 이벤트와의 연결을 제거

이벤트 위임 (event delegation)

• 이벤트 위임
  • 현재 존재하는 자손태그뿐만 아니라 나중에 추가될 자손요소에게 이벤트를 위임
• 이벤트 전파
  • 이벤트가 발생했을 때 브라우저가 이벤트 핸들러를 실행시킬 대상 요소를 결정하는 과정
  • Document 객체나 HTML 문서의 요소에서 일어나면 대상 객체를 결정하기 위해 이벤트 전파가 발생
  • 이벤트가 전파되는 과정은 이벤트 버블링, 이러한 전파를 통해 이벤트 위임이 가능해짐
  • 이벤트 버블링(event bubbling)
    • 이벤트가 발생한 요소부터 시작하여 DOM트리를 따라 위쪽으로 올라가며 전파되는 과정

이벤트 메소드

• 마우스 관련 이벤트
  • .click() : 선택한 태그를 클릭했을 때 이벤트 발생
  • .dbclick() : 선택한 태그를 연속해서 두 번 클릭했을 때 이벤트 발생
  • .mouseout() : 선택 태그의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생
    (하위태그의 영향)
  • .mousehover() : 선택 태그의 영역에 마우스 포인터 올렸을 때 이벤트 발생
  • .hover() : 선택한 태그에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생
  • .mousedown() : 선택한 태그에서 마우스 버튼을 눌렀을 때 이벤트가 발생
  • .mouseup() : 선택한 태그 범위에 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생
  • .mouseenter() : 선택한 태그 범위에 마우스 포인터를 올렸을 때 이벤트가 발생
  • .mouseleave() : 선택한 태그 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생
  • .mousemove() : 선택한 태그 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생
  • .scroll() : 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생
• 키보드 관련 이벤트
  • .keyoress() : 선택한 태그에서 키보드를 눌렀을 때 이벤트가 발생. 문자키를 제외한 키의 코드값 반환
  • .keydown() : 선택한 태그에서 키보드를 눌렀을 때 이벤트 발생. 키보드의 모든 기의 코드값을 반환
  • .keyup() : 선택한 태그에서 키보드에서 손을 떼었을 때 이벤트가 발생.
• 입력 양식 관련 이벤트
  • .focus() : 선택한 태그에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 태그에 강제로 포커스 생성
  • .focusin() : 선택한 태그에 포커스가 생성되었을 때 이벤트 발생
  • .focusout() : 포커스가 선택한 태그에서 다른 태그로 이동되었을 때 이벤트 발생
  • .blur() : 포커스가 선택한 태그에서 다른 태그로 이동되었을 때 이벤트가 발생하거나 선택한 태그의 포커스가 강제로 사라지도록 함
  • .change() : 이벤트 대상인 입력 태그의 값이 변경되고, 포커스가 이동하면 이벤트가 발생. 그리고 강제로 change 이벤트를 발생시킬 때도 사용.

✏️ 이펙트 효과

요소 표시/숨김

• .show()와 .hide()
  • .show()는 선택한 태그를 나타나게함.
  • .hide()는 선택한 태그를 순간적으로 사라지게함.
  • .hide()를 통해 숨겨진 태그는 CSS의 display 속성값이 none으로 설정되어 웹 페이지의 레이아웃에 영향을 주지않고 완전히 사라짐
  • 인자로 밀리초나 속도 관련 예약어를 전달하면 이펙트 효과의 속도를 조절할 수 있음
• .toggle()
  • 현재 표시 상태에 따라 다른 동작을 수행
  • 예를 들어, 나타나있는 상태면 .hide(), 사라진 상태면 .show()를 수행

페이드 효과

• .fadeIn()
  • 선택한 태그를 서서히 사라지게하는 효과
• .fadeOut()
  • 선택한 태그를 서서히 나타나게하는 효과
• .fadeTo()
  • 페이드 효과에서 사용하는 opacity 속성값(투명도)을 직접 설정
• .fadeToggle()
  • 선택한 태그의 현재 표시 상태에 따라 다른 동작을 수행
• 인자로 밀리초나 속도 관련 예약어를 전달하면 이펙트 효과의 속도를 조절할 수 있음

슬라이드 효과

• .slideUp()
  • 선택한 태그가 서서히 올라가면서 사라지는 효과
• .slideDown()
  • 선택한 태그가 서서히 내려오면서 나타나는 효과
• .slideToggle()
  • 선택한 태그의 현재 표시 상태에 따라 다른 동작을 수행
• 인자로 밀리초나 속도 관련 예약어를 전달하면 이펙트 효과의 속도를 조절할 수 있음

이펙트 효과 제어

• .delay()
  • 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간 설정
• .stop()
  • 선택한 태그에서 실행 중인 모든 이펙트 효과를 즉시 중지
• .finish()
  • 선택한 태그에서 실행 중인 모든 이펙트 효과 즉시 중지
  • 선택한 태그가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료

jQuery.fx 객체

• speeds 프로퍼티
  • 이펙트 효과 속도관련 프로퍼티를 가지고 있음
  • fast -> 200
  • normal -> 400
  • slow -> 600
• interval 프로퍼티
  • 이펙트 효과가 보여지는 동안의 초당 프레임 수
• off 프로퍼티
  • true로 설정하면 모든 이펙트 효과를 사용할 수 없음

사용자 정의 이펙트

• .animate()
  • 사용자가 직접 원하는 이펙트 효과를 정의
  • 형태

    $(선택자).animate(프로퍼티[, 지속시간][, 시간당 속도 함수][, 콜백 함수])

  • 프로퍼티에는 색에 관한 속성을 제외한 거의 모든 CSS 속성을 사용 가능
  • CSS 속성 값으로 미리 정의된 값(show, hide, toggle)을 사용
  • 시간당 속도 함수를 추가해 이펙트 효과 속도를 설정 가능
  • 콜백 함수를 통해 이펙트 효과가 끝난 후 실행할 함수를 정의

✏️ AJAX 연동

AJAX란?

• Asynchronous JavaScript and XML의 줄인말
• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 함.
• 백그라운드 부분에서 서버와 데이터를 교환하여 웹페이지에 표시

HTTP 요청

• GET 방식
  • 주소에 데이터를 추가하여 전달하는 방식
  • HTTP요청은 브라우저에 의해 캐시되어 저장
  • 브라우저 히스토리에 쿼리 문자열로 저장
  • 전달하는 데이터가 쿼리 문자열에 포함되어 전송되어 길이의 제한이 있음
  • 오직 ASCII 문자 타입 데이터만 전송 가능
  • 보안상 취약점 존재
• POST 방식
  • 데이터를 별도로 첨부하여 전달하는 방식
  • HTTP 요청은 브라우저에 캐시 X
  • 브라우저 히스토리에 기록 X
  • 데이터 길이 제한 없음
  • 데이터 길이 제한 없음
  • 보안성 높음
• $.get()
  • AJAX를 이용하여 GET 방식의 HTTP 요청을 보냄
  • 형태

    $.get(URL주소, 보낼 데이터,function(){
    		전송 받은 데이터 처리 및 전송 성공 여부
    });

• $.post()
  • AJAX를 이용하여 POST 방식의 HTTP 요청을 보냄
  • 형태

    $.post(URL주소, 보낼 데이터,function(){
    		전송 받은 데이터 처리 및 전송 성공 여부
    });

AJAX 메소드

• $.ajax()
  • HTTP 요청을 만드는 강력하고 직관적인 방법 제공
  • 형태

    $.ajax(URL주소,{
    		옵션1:옵션값1,
    		옵션2:옵션값2,
    		...
    });

  • 중요 옵션 종류
    • url
      • 요청을 보낼 대상 URL
    • contentType
      • 서버에 데이터를 보낼 때 사용하는 content-type 헤더 값
    • processData
      • data에서 지정한 개체를 쿼리 문자열로 변환할지 여부를 설정
    • method
      • HTTP 통신의 종류를 설정
    • success
      • AJAX 통신이 성공하면 호출되는 함수
    • error
      • 요청에 실패하면 호출
    • data
      • 서버로 보낼 데이터
    • dataType
      • 서버에서 보내줄 데이터 타입
  • 그외 옵션 종류
    • accepts
      • 키-값 형태, 해더에 포함
      • 어떤 종류의 응답을 받아들일지 서버에 알려주는 역할
    • async
      • 기본값으로 true, 기본적으로 비동기 요청
    • beforeSend
      • 전송 전에 함수 실행, false를 반환하면 HTTP 요청 취소
    • cache
      • false일 시 브라우저에서 강제로 캐시되지 않도록 함.
    • complete
      • 요청이 완료될 때 함수 실행
    • contents
      • Jquery가 응답 구문을 분석하는 방법을 결정하는 옵션
      • 새로운 데이터 유형을 정의할 때 사용
    • contentType
      • 해더의 Content-Type을 설정
    • context
      • 특정 엘리먼트 또는 키-값 형태의 오브젝트를 context로 설정
      • 콜백 함수 등에서 사용 가능
    • converters
      • 콜백 함수에 도착하기 전에 인터셉터하여 데이터를 똑같이 사용하기 위해 데이터를 파싱
    • crossDomain
      • true일 시 크로스 도메인 요청을 허용
    • data
      • 서버로 보낼 데이터
    • dataType
      • 서버에서 보내줄 데이터 타입
    • dataFilter
      • success 함수가 호출되기 전에 실행되며 success 함수로 전달할 데이터를 반환
    • global
      • global ajax 이벤트 핸들러를 사용할지 결정
    • headers
      • 해더 값을 키/값 형태로 설정/변경 가능
• .load()
  • 선택한 태그에서 호출하는 유일한 제이쿼리 AJAX 메소드
  • 서버에서 데이터를 읽은 후 읽어온 HTML 코드를 선택한 태그에 배치
  • 형태

    $(선택자).load("경로 태그");

AJAX와 Form

• 직렬화(serialization)
  • .serialize() : HTML form 태그를 통해 입력된 데이터를 쿼리 문자열로 변환
  • .serializeArray() : 입력된 데이터를 문자열이 아닌 배열 객체로 변환

✏️ 유틸리디 메소드

타입 검사 메소드

• $.type()
  • 전달받은 값을 자바스크립트의 내부 클래스와 비교, 더 정확한 타입 검사 제공
• $.isArray()
  • 전달받은 값이 배열인지 체크
• $.isFunction()
  • 전달받은 값이 자바스크립트 함수 객체인지 체크
• $.isNumeric()
  • 전달받은 값이 자바스크립트 Number 객체인지 체크
• $.isEmpthObject()
  • 전달받은 값이 비어있는 객체인지 체크
• $.isPlainObject()
  • 전달받은 값이 기본 객체인지 체크
• $.isWindow()
  • 전달받은 값이 자바스크립트 Window 객체인지 체크
• $.isXMLDox()
  • 전달받은 DOM 노드가 XML 문서인지, XML 문서가 포함되어 있는지 체크

기타 유틸리티 메소드

• 범용 유틸리티 메소드
  • $.contains()
  • $.unique()
  • $.each()
  • $.data()
  • $.removeData()
  • $.queue()
  • $.dequeue()
  • $.extend()
  • $.noop()
  • $.proxy()
  • $.now()
  • $.trim()
• 배열 관련 메소드
  • $.makeArray()
  • $.inArray()
  • $.map()
  • $.merge()
  • $.grep()
• 파싱 관련 메소드
  • $.parseHTML()
  • $.parseJSON()
  • $.parseXML()