[javascript] jQuery 기초
jQuery 기초 자료
개요
jQuery는 HTML의 요소들을 제어할 수 있는 javascript library 이다. API site : https://api.jquery.com/
사용하기
1. 호출하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
HTML파일 내 script 태그를 통해 jQuery 자바스크립트 파일을 호출한다.
2. HTML ID 속성 설정
jQuery는 ID 속성을 통해 HTML의 요소에 접근하므로 아래 예시와 같이 id 설정이 필수. ( 개인적으로 class와 구분을 위해 id_를 붙여 사용했으나 다를 수 있음 )
<div id="id_section" class="section"></div>
<input type="email" id="id_emailInput">
<label id="id_scoreLabel"></label>
3. HTML 요소 제어
$('#id_이름')
위와 같이 id를 통해 HTML 요소에 접근하여 아래 내장함수를 통해 조작한다.
( HTML에서 javascript의 변수에 접근할 때에는 ${변수명} 사용 )
.val() : value return
.val('내용') : value 설정
.show() : 보이기, 숨기기
.hide() : 숨기기
.append(태그) : 태그추가
3-1. Event
.hover(함수) : 오브젝트에 Mouse Over 시 함수/콜백함수 호출
$(document).ready(함수) : DOM 페이지가 Javascript를 실행 할 수 있는 준비가 되었을 때 함수 호출. 함수호출, 콜백함수 모두 가능하나 주로 콜백함수로 사용하는 것 같다.