※※ 제이쿼리는 문서 객체를 선택($('selector'))하여 조작(제이쿼리에서 제공하는 메서드)할 때 사용한다.
※ 제이쿼리는 기존의 자바스크립트의 불편했던 부분을 개선했다.
1. 호환성(크로스 브라우징) 문제 해결 : 모든 브라우저에서 동일한 결과를 구현한다.
2. 문서 객체와 관련된 처리를 쉽게 표현
3. 이벤트(사용자의 행위) 연결을 쉽게 구현
4. 쉽고 편리한 애니메이션 효과 구현
5. Ajax(비동기식 데이터 처리) (비동기식 : 새로고침 X ) 애플리케이션(앱)을 쉽게 개발할 수 있음
※제이쿼리는 "자바스크립트 라이브러리(기능(메서드)의 묶음)" 이다.
※ 제이쿼리를 사용(연동)하는 방법
1. 제이쿼리 라이브러리를 다운로드하여 사용하는 방법
- CDNJS사이트(https://cdnjs.com/libraries/jquery)에서 jquery로 검색한 후 버전 선택 후 jquery.min.js를 다운로드 받는다. (v 1.12.4)
- 다운로드 되면 파일명을 jquery-1.12.4.min.js로 변경한다.
- *.min.js 또는 *min.css 파일은 ☆'지핑(zippgin)파일'☆로
줄바꿈,들여쓰기, 띄어스기를 제거한 압축형식의 파일(*.js 또는 *.css 파일보다 5배 이상 용량이 적다)을 말한다.
2. 제이쿼리 라이브러리를 CDN으로 사용하는 방법 (CDN : 네트워크 전송 방식 : 인터넷이 안되면 사용 불가함)
- 제이쿼리 사이트(www.jquery.com)에서 제이쿼리 라이브러리 CDN의 URL을 얻는다. (v 1.12.4)
3. HTML 문서에 <script> 로 포함시킨다.
- <script>는 src 속성으로 제이쿼리 라이브러리를 HTML 문서에 포함(연동)시킨다. src:필수속성
※ 기본문법
※ 제이쿼리 문법 (jquery('선택자') 에서 $('selector')로 바뀜!)
$ : 제이쿼리 함수
1. 문서 객체(Document Object Model)의 선택
1) $('selector(선택자)') : 선택자에 해당하는 요소를 선택해서 제이쿼리 영역으로 가지고 온다.
ex) $('.box') : .box 요소를 선택하여 문서 객체를 생성한다.
2) $('태그') : 문서 객체(요소)를 생성한다.
ex) $('<div class="flex"> flex </div>') : .flex 문서 객체를 생성
전달인자(argument) = 매개변수 = 파라미터
function(함수) = 메서드
| 함수 (fucntion) | 메서드 (method) | |
| 공통점 | 기능이 같음 | |
| 코드를 저장(명령문을 메모리에 저장) | ||
| 차이점 | 모양이 다름 | |
| .이 붙지 않음 | 오브젝트. 메서드명, 객체 필요함 | |
$(document) : HTML 문서를 선택한다.
ready() : 이벤트 연결 메서드로 객체의 코드를 모두 해석하여 준비시킨다.
$(document).ready() : 인터프리터(해석기)가 HTML 문서를 다 해석하면
이벤트 연결 메서드의 매개변수()에는 항상 익명 함수를 넣는다.
왜?
이벤트가 연결되면 코드를 바로 실행해야 하기 때문이다.
함수명이 없는 함수를 익명 함수라고 하는데,
익명 함수는 호출하지 않아도 {}안의 코드를 바로 실행하는 함수이다.
$(document).ready(function() {
제이쿼리 코드;
});
※ 인터프리터(해석기)
인터프리터는 위에서 아래로, 좌에서 우로 코드를 해석한다.
※ 제이쿼리는 요소를 선택할 때 반드시 제이쿼리 코드 위에 요소가 정의되어 있어야 선택할 수 있다.
따라서 </body> 다음에 제이쿼리 코드를 작성해야한다.
그런데 코드 유지보수에 어려운 부분이 발생하여 <head> 내부에 작성하기로 결정했다.
※ 함수는 선언적 함수와 익명 함수가 있다.
선언적 함수는 함수명이 있어서 함수명() 코드로 호출하면 {} 내부의 제이쿼리 코드가 실행된다.
익명 함수는 함수명이 없어서 제이쿼리 코드를 바로 실행한다.
'국비지원 JAVA 풀스택 과정 > Jquery' 카테고리의 다른 글
| 속성 선택자 (0) | 2022.10.27 |
|---|---|
| 형제 요소 선택자 (0) | 2022.10.27 |
| 이전 요소 선택자, 다음 요소 선택자(+) (0) | 2022.10.26 |
| 선택자사용 (0) | 2022.10.26 |
| 선택자 사용 (0) | 2022.10.26 |