[제이쿼리] spring으로 게시판 만들때 나오는 제이쿼리

[ 목 차 ]

- 제이쿼리
- 선택자 및 메서드 기본형
- 이벤트 등록 메서드  

- 효과 메서드

---

< 제이쿼리 >

• 제이쿼리란?
  ➡ 자바스크립트를 이용해 만든 라이브러리 언어
• 라이브러리 언어?
  ➡ 자바스크립트로 만들어진 다양한 함수들의 집합
• 제이쿼리에서 개선된 사항들
  1) 호환성 문제 해결
  2) 쉽고 편리한 애니메이션 효과 기능 구현

 

---

< 선택자 및 메서드 기본형 >

• 제이쿼리 선택자로 스타일이나 속성을 적용하는 기본형
• $ = getElementByID와 같다.
  

// 1. 선택한 요소에 지정한 스타일을 적용
$("CSS 선택자").css("스타일 속성명", "값");

// 2. 선택한 요고에 지정한 속성을 적용
$("CSS 선택자").attr("속성명", "값");

 

• script 내 적용 방법

// 방법 1
<script>
$(function(){
	$("#title").css("color","red");
});
</script>

// 방법 2 (HTML에 전체 요소가 로딩되면 이벤트 핸들러가 실행됨)
<script>
$(document).ready(function(){
	$("#title").css("color","red");
});
</script>

 

• 기본 선택자 및 속성 조작 메서드

기본 선택자		속성 조작 메서드
아이디 선택자	$("#아이디명")	html(["새 요소"])	$("요소 선택").html(["새 요소"]);
클래스 선택자	$(".클래스명")	attr("속성명", ["새 값"])	$("요소 선택").attr("속성명", ["새 값"]);
요소 선택자	$("요소명")	val(["새 값"])	$("요소 선택").val(["새 값"]);

 

---

< 이벤트 등록 메서드 >

• 이벤트?
  ➡ 사이트에서 방문자가 취하는 모든 행위
• 이벤트 핸들러?
  ➡ 이벤트가 발생했을 때 실행되는 코드
• 이벤트 등록 메서드?
  ➡ 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있다.

// click 이벤트 등록

// 방법 1
$(".btn1").on("click", function() {
	console.log("welcome");
})

// 방법 2
$(".btn1").click(function() {
	console.log("welcome");
})

 

---

< 효과 메서드 >

• 선택한 요소를 역동적으로 숨겼다가 보이는 기능을 가진 메서드
• hide() / show()
  
  
• 효과 메서드의 기본형

$("요소 선택").효과 메서드(효과 소요 시간, 가속도, 콜백 함수);

 

---

< Ajax > - 제이쿼리 비동기 방식 연동

• Ajax (Asynchronous JavaScript and XML) 란?
  ➡ 비동기 방식의 JS와 XML을 가르킵니다.
• 동기 방식
  : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음
• 비동기 방식
  : 그와 반대로 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있음
• Ajax 사용이유
  : 화면 전환 없이 클라이언트와 서버 간에 XML, JSON, 텍스트, HTML 등의 정보를 교환하기 위함
  : Ajax를 사용하면 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있음
    ex) 카페나 블로그의 게시글에 댓글을 달았을 때 페이지 전환 없는 것도 Ajax 를 사용했기 때문임
• $.ajax() 메서드
  사용자가 지정한 url 경로에 파일의 데이터를 전송하고
  입력한 URL 경로 파일로부터 요청한 데이터를 불러옵니다. 
  
  
• $.ajax() 메서드의 기본형

$.ajax({
	url : "전송 페이지"(action url),
    type : "전송 방식"(get, post 방식),
    data : "전송할 데이터",
    dataType : "요청한 데이터 형식" ("html", "xml", "json", "text", "jsonp"),
    success : function(data) {
    	전송에 성공하면 실행될 코드;
    },
    error : function() {
    	전송에 실패하면 실행될 코드;
    },
});