JQuery
과거 브라우저간 호환성을 고려해, 쉽고 간편하게 동일한 기능을 구현할 수 있도록 만들어진 Javascript Library.
CDN을 통해 jquery를 import해야 사용할 수 있다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" />자주 사용되는 몇 가지 methods
// structure
$(selector).method()
// methods
.append(string) // 자식요소 추가
.empty() // 자식요소 비우기
.val([string]) // get & set value
.attr(attr[, val]) // get & set attribute
.css(string) // css 속성
.hide() // 숨기기 (display: none 적용)
.show() // 보이기 (display: block or inline 적용)
$(document).ready(callback) // 페이지 로딩완료 후 callback 호출hide(), show() 실험
실험조건
element의 display 값을, default가 아닌 다른 값으로 바꿈.
// style tag 이용. <style> button { display: block; // default는 inline-block; } </style>
실험 1
실험조건에 hide - show 하면display: block이 그대로 적용되어 있을까?
- 결과
display: block이 적용됨.
실험 2
실험조건에display: none를 추가하고 show - hide 하면display: block이 적용되어 있을까?
- 결과
display: inline-block (default)이 적용됨.
실험 3
실험조건에 인라인으로display: none를 추가하고 show - hide 하면display: block이 적용되어 있을까?
- 결과
display: block이 적용됨.
Ajax(feat. jquery)
Asynchronous JSON And XML 의 약자.
비동기로 JSON 또는 XML 형식의 데이터를 주고 받는 것을 말한다.
가장 기본적인 ajax method로 XMLHttpRequest(이하 XHR) 가 있다.
IE도 호환이 되는 무시무시한 장점(?)이 있지만, 우리에겐 fetch나 axios 등이 더욱 익숙하다.
jquery에서도 ajax가 가능하다.
jquery의 ajax는 호환성 때문에 XHR을 이용하는 것 같다.
사용법
$.ajax({
type: // [string] http request method (GET, POST, DELETE...)
url: // [string] url
data: // [object || dict] POST 시, 넘겨줄 body
success: // [function(callback)] 성공했을 때 실행될 callback 함수.
})후기
Javscript가 ES6 규격이 적용됨에 따라 Jquery이 사용빈도도 점차 줄어든 것으로 알고 있다. 처음 접한 Javascript가 이미 ES6가 적용된 버전이어서인지, 편리이 크게 체감되지 않지만 jquery를 배우면서 '굳이 쓸 필욘 없겠다' 싶은 느낌이 살짝 들었다.
하지만 그럼에도 직관적이고 간결한 사용법이라는 jquery의 장점은 확실히 느꼈다.
