키워드 : jQuery, ajax-JSON, OpenAPI
jQuery의 장점
css 선택자를 그대로 가져와 이용할 수 있다.
바닐라 자바스크립트의 명령어를 축약된, 직관적인 형태로 쓸 수 있다.
정말 쉽다!
jQuery의 단점
기본이 되는 자바스크립트를 배우지 않고도 코딩에 문제가 없다는 점이 나중에 스스로 코딩하는 능력을 저하시킬 수 있다.
또한 가상돔이 아닌 직접 조작방식 자체가 올드해지고 있다는 분석도 있다.
웹개발종합반 공부하면서 서치하다보면 종종 제이쿼리에 대한 이런 기고문을 볼 수 있는데 충격적이다. 초보자 입장에선 이렇게 편리하고 좋은 라이브러리인데 이미 옛 기술이다. 마치 서든어택 칼전에서 대세가 롤/오버워치 초능력전이 된 것처럼... 하지만 이런게 있었다는 것, 그리고 이렇게 편리하게 쓸 수 있다는 것을 안다는 사실이 언젠가 필요해질 때가 오겠지.
자주 쓰는 함수 정리
문서 로드 함수
함수가 언제 로드될지 정해주는 함수.
이거 아니면 타이머, 아니면 이벤트 (클릭이나 스크롤같은거)
참조 - https://gxnzi.tistory.com/21
1번 도큐먼트레디
$(document).ready(function() {
// DOM 이 모두 로드된 후 실행할 코드를 입력하세요.
});
도큐먼트 레디는 DOM 이 모두 로드된 후 처리된다.
위와 같이 사용하며, 아래와 같이 축약 문법으로도 사용이 가능
$(function() {
// DOM 이 모두 로드된 후 실행할 코드를 입력하세요.
});
- $(window).load 는 해당 페이지의 모든 외부 리소스, 이미지 등이
로드 된 후에 처리된다
2번 윈도우로드
$(window).load(function() {
// 모든 외부 리소스, 이미지 등이 로드된 후 실행할 코드를 입력하세요.
});css 관련 함수
.show()
.hide()
.css()
데이터 다루는 함수
.find() : 객체 값을 찾아오는 함수, 선택자와 함께 사용 가능 https://sas-study.tistory.com/153
.val() : 입력 값(input)을 찾아오거나 바꿔줄 수 있는 함수 https://www.codingfactory.net/10765
data와 attr의 차이 https://gxnzi.tistory.com/55
.data() : 변수에 키값과 밸류를 지정하거나 생략해서 태그에 지정된 data-여러가지 = 값 을 객체로 가져온다
.attr() : 데이터와 같지만 그걸 문자열로 바꿔서 가져온다
둘다 앞에 remove를 붙이고 대문자카멜케이스 적용해서 삭제함수로 쓸 수 있다.
데이터 추가하는 함수
4가지가 있는데 append를 제일 많이 쓴다. https://baessi.tistory.com/87
.append() : 요소 내부의 끝부분에 들어감
.prepend() : 요소 내부의 시작부분에 들어감
