※제이쿼리는 문서객체를 선택($('selector'))하여 조작(제이커리에서 제공하는 메스드를 호출하여 조작)할 때 사용한다.
※제이쿼리는 기존의 자바스크립트의 불편했던 부분을 개선했다.
1.호환성(크로스 브라우징) 문제 해결: 모든 브라우저에서 동일한 결과를 구현한다.
2.문서 객체와 관련된 처리를 쉽게 표현.
3.이벤트(사용자의 행위) 연결을 쉽게 구현.
4.쉽고 편리하게 애니메이션 효과 구현.
5.Ajax(비동기식 데이터처리) 애플리케이션(앱)을 쉽게 개발.
※제이쿼리는 "자바스크립트 라이브러리(기능(:메서드)의 묶음)"이다.
※제이쿼리를 사용(연동)하는 방법
1.제이쿼리 라이브러리를 다운로드하여 사용하는 방법 (☆이 방법이 더 쉽고 많이 사용한다)
CDNJS사이트(cdnjs.com)에서 jquery로 검색한 후에 버전에 1.12.4를 선택하여 jquery.min.js(v1.12.4)를 다운로드 받는다.다운로드 되면 파일명을' jquery-1.12.4.min.js'로 변경한다
*.min.js 또는 *min.css 파일은 '지핑(zipping) 파일'로 줄바꿈과 들여쓰기,띄어쓰기를 제거한 압축형식의 파일을 말한다. 특징은 *.js 또는 *.css 파일보다 5배이상 용량이 작다.
2.제이쿼리 라이브러리를 CDN(네트워크 전송방식)으로 사용하는 방법
제이쿼리 사이트(jquery.com)에서 제이쿼리 라이브러리 CDN(v1.12.4)의 URL을 얻는다
3.HTML 문서에 <script>로 포함시킨다.
<script>는 src속성으로 제이쿼리 라이브러리를HTML문서에 포함(연동)시킨다.
※기본문법
1.문서객체(Document Object Model)의 선택방법 (있는걸 선택)
$('selector=선택자'):선택자에 해당하는 요소를 선택해서 제이쿼리 영역으로 가지고 온다.
ex)$('.box'): .box요소를 선택하여 문서객체를 생성한다.
2.문서 객체 생성 (없는걸 생성)
$('태그'):문서 객체를 생성한다.
ex)%('<div class="flex">flex</div>'): .flex 문서 객체를 생성한다.
$= 제이쿼리 함수, 제이쿼리에 접근할 수 있게 해주는 식별자.
$(document) : html 문서 전체 선택한다. document는 선택자가 아니라 ' '가 붙지않는다.
ready() : 이벤트 연결 메서드로 객체의 코드를 모두 해석하여 준비시킨다.
$(document).ready(); = 인터프리터(해석기)가 html 문서를 다 해석하면 이란 뜻이다.
이벤트 연결 메서드의 매개변수에는 항상 익명 함수를 넣는다.
왜? 이벤트가 연결되면 코드를 바로 실행하여야 하기 때문이다.함수명이 없는 함수를 익명함수라고 하는데, 익명함수는 { }안의 코드를 바로 실행하는 함수이다.
$(document).ready(function(){
제이쿼리 코드;
});
※인터프리터(해석기):인터프리터는 위에서 아래로, 좌에서 우로 코드를 해석한다.
※제이쿼리는 요소를 선택할때 반드시 제이쿼리 코드 위에 요소가 정의되어 있어야 선택할 수 있다. 따라서, </body> 다음에 제이쿼리 코드를 작성해야한다. 그런데 코드 유지보수에 어려운 부분이 발생하여 <head> 내부에 작성하기로 결정했다.
※함수는 선언적함수와 익명함수가 있다.
1. 선언적 함수의 선언방법
function 함수명( ){
제이쿼리 코드;
}
var 변수명=function( ){
제이쿼리 코드;
}
2. 선언적 함수 호출
선언적 함수를 호춯하면{ } 내부의 제이쿼리 코드가 실행된다.
함수명();
변수명();
3.익명함수의 선언방법
function( ){
제이쿼리 코드;
}
4.익명함수 호출
익명함수는 함수명이 없기 때문에 호출할 수 없다. 따라서 메서드의 매개변수에 넣는다.
이벤트 연결 메서드(ready(), click(), mouseenter(), mouseleave(), hover)(), scroll() 등)의 매개변수에 사용된다.
선언적 함수는 함수명이 있어서 함수명( );코드로 호출하면 { }내부의 제이쿼리 코드가 실행된다.
익명 함수는 함수명이 없어서 제이쿼리 코드를 바로 실행한다.
변수선언 : 자료형과 변수명이다
※자료형 : 데이터를 저장하는 저장소를 생성한다. 데이터형(정수형, 실수형, 문자형, 불리언형,/문자열형)과 크기를 지정한다. 그런데, 자바스크립트는 자료형이 없다.
※변수명 : 데이터가 저장된 저장소를 참조하여 데이터를 사용할 때 필요하다.
※변수선언 : 자료형 변수명 ; ←기본문법
함소 또는 메서드{ }(영역)내부에 변수를 선언하면 그 변수는 로컬 변수라고 지칭하고 반드시 '초기화' 해야한다.
var num ; //변수선언
num = 0; //변수 초기화한다.(자바스크립트는 초기화 할때 기본값이 정수형,실수형,문자형:0 / 불리언형 false / String null )
var num=0 ;//변수를 선언하고 초기화한다.
자바스크립트는 변수를 초기화 할때 자료형이 정해진다
※변수에 저장된 값을 확인하는 방법
1.alert(변수명): 경고창을 띄우는 함수로 매개변수에 작성한 변수에 지정된 값을 출력한다. <예>alert(pi);
2.console.log(변수명): 개발자모드의 console에 변수에 저장된 값을 출력한다 <예>console.log(pi);
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 시작</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
//$(document).ready(function(){ }); 를 줄이면 ↓이렇게 쓴다
$(function(){
});
function ham(){
alert('ham 함수호출');
};
ham();
var value = function(){
alert('value 함수호출')
};
value();
</script>
</head>
<body>
</body>
</html>
'jQuery' 카테고리의 다른 글
| 선택자 사용 : 인접 관계 선택자 (0) | 2022.10.26 |
|---|---|
| 선택자사용 : 인접관계선택자(자식 선택자, 후손(하위)선택자) (0) | 2022.10.26 |
| 선택자사용 : 기본선택자, 그룹선택자 ,종속선택자. (0) | 2022.10.26 |