[Javascript] jquery

jQuery

jquery란 자바스크립트 라이브러리이다.

 

jQuery는 form 같은 걸 찾아가서 조작하거나 이벤트 발생했을 때 form 데이터 검증이 가능하다.

Ajax 또한 jQuery 단 몇줄로 생성이 가능하다. 

 

myBatis는 프레임워크다. 프레임워크란 라이브러리 + 개념이 있는 것이다.

jQuery는 라이브러리로 개념은 없다. 따라서 라이브러리 사용법만 익히면 된다.

 

자바스크립트는 HTML문서 사용하지 않았다. 그래서 그냥 js파일로 만들었으나,

jQuery는 HTML문서가 있다는 전제 하에 있기 때문에 tomcat있어야 해서 dynamic web으로 만들어야 한다.

 

 

jQuery 사용 방법

<!-- jQuery 가져오는 것 -->
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
<script>
	/**첫 번째 표현**/
	jQuery(document).ready(() => $('body').append('<p>one</p>')); 
	
	/**두 번째 표현**/
	$(document).ready(() => $('body').append('<p>two</p>'));
	
	/**세 번째 표현**/
	let readyFn = () => $('body').append('<p>three</p>');
	$(document).ready(readyFn);
	
	/**네 번째 표현**/	
	$(()=> $('body').append('<p>four</p>'))
	
	//$ == jQueury(document).ready
</script>

jQuery(document).ready(() => $('body').append('<p>one</p>')); 
document는 스트링 아닌데, body는 스트링이다. 문서 안에 body 객체를 찾아낸다. body 태그로 만들어진 element를 jQuery로 wrapping해서 return.
append는 p element 생성해서 body element에 append 시킨다.
ready는 document의 DOM들이 '준비'됐는지 검사한다. 
준비가 됐다는 것은 서버로부터 클라이언트로 HTML코드가 다 다운이 됐다는 것을 뜻한다. 
준비가 다 되면 ready에 들어가는 function은 'callback' 함수이다
함수가 함수를 호출하는 것이 callback이다.
Dom이 준비가 되면 callback을 호출한다

jQuery(document)
jQuery - function 이름
() - 파라미터로 객체를 넣어준다.
여기서 document객체는 문서 자체를 만들어 내는 객체이다.
return 값은 document객체를 jQuery 객체로 wrapping 하는 것이다. 

DOM
객체는 주로 DOM(Document Object Model)이다.
글자의 집합이 아니라 객체의 집합이다.
DOM 안에 있는 객체를 element라고 부르기도 한다. 

브라우저가 문서를 추상화해서 가지고 있다. 그 모양은 피라미드 형태로 가지고 있다.  
모델 == 체계 
브라우저는 문서를 읽고 DOM을 만든다.
p라는 태그를 5번 쓰면, 그 p타입의 Object이 5개 생긴다.
모델링해서 Object가 생기는 것이다. 

결국 DOM안에 있는 객체를 다루게 된다.

Ajax

과거에는 서버로부터 데이터랑 태그 다 받았는데 Ajax로 태그들 빼고 data만 받는 것이다. 그리고 이 data를 JSON 형태로 받는다 .