1. jQuery란?
HTML속 클라이언트 사이드 스크립트 언어(CSS)를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리다.
존 레식에 의해, 2006년 뉴욕시 바캠프(Barcamp NYC)에서 공식으로 소개되었다.
jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나다.
2. 다운로드
1) http://jqueyr.com/download/에서 jquery.com-3.3.1.min.js를 다운받는다.
2) 프로젝트는 Dynamic Web Project로 하고 WebContent폴더에 jquery-3.3.1.min.js를 복사해서 붙여 넣는다.
3) 이클립스에서 html/jsp <script src = "jquery-3.3.1.min.js"></script>를 추가한다.
4) error 표시를 없애고 싶을 때
프로젝트에서 오.버-> Properties -> Javascript -> IncludePath ->Source -> Excluded(선택) -> Edit -> 원하는 패턴으로 입력(**/jquery*.js) -> Add -> Finish
3. 다운로드 없이 사용
Content Delivery Network[cdn]사용
<script src = "http://code.jquery.com/jquery-3.3.1.min.js"></script>
4. jQuery개요
1) DOM과 관련된 처리를 쉽게 구현 (날씨 정보, 미세먼지 정보)
2) 일관된 이벤트 연결을 쉽게 구현
3) 시각적 효과를 쉽게 구현 (CSS 제어)
4) Ajax애플리케이션을 쉽게 개발(비동기 통신)
5. jQuery(document).ready() : 페이지 로드되면서 연동될 이벤트를 기다림.
1) document객체의 ready이벤트 연결
[형식]
$(document).ready(function(){
});
2) window객체의 load이벤트 연결
[형식]
window.onload = function() {
});
3) 간단한 형식
exam03_와일드 카드 *, $, ^
ⓐ $("a[href* = '문자열']") : '문자열'이 들어있는 모든 링크
ⓑ $("a[href$ = '문자열']") : '문자열'로 끝나는 모든 링크
ⓒ $("a[href^ = '문자열']") : '문자열'로 시작되는 모든 링크
6. 태그와 함께 자주 사용되는 연산자
$("tr:odd").addClass("redColor");
:first - 첫 번째 요소
:last - 마지막 요소
:not('') - 주어진 조건을 만족하는 요소를 제외한 요소
:even - 짝수번째 요소(n-1번째, 0번째부터 시작, 즉 0번째가 짝수)
:odd - 홀수번째 요소
:eq(index) - 주어진 인덱스에 해당하는 요소
:gt(index) - 주어진 인덱스보다 큰 요소
:lt(index) - 주어진 인덱스보다 작은 요소
7.
$("td:contains('RedPlus')").addClass("redColor");
: contains(text) => 지정한 텍스트를 포함하는 요소들과 일치
: empty => 자식을 가지지 않는 모든 요소와 일치. 내부 텍스트를 가지지 않는 요소들도 해당
: has(selector) 지정된 선택기에 해당하는 요소를 갖는 모든 요소들과 일치
: parents 부모인 모든 요소들과 일치
8. 선택한 클래스에 메소드를 통해 접근 Chain Method 방법으로 사용할 수 있다.
.siblings() //형제 요소를 탐색.
.addClass("redColor") //형제 요소에 빨간색을 입힌다.
.parent() //부모 요소로 이동
.find("td:eq(0)") //0번째 셀을 탐색
.addClass("blueColor"); //탐색된 요소에 파란색을 입힌다.
9. 이벤트
.bind( eventType [, eventData ], handler )
blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown,
mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress, and keyup
10.
/* $("#btnClick").bind("mouseover", function() {
document.getElementById("btnClick").style.backgroundColor = "red";
});
$("#btnClick").bind("mouseleave", function() {
document.getElementById("btnClick").style.backgroundColor = "";
}); */
$("#btnClick").bind({
mouseover: function() {
this.style.backgroundColor = "red";
},
mouseleave: function() {
this.style.backgroundColor = "";
}
});
위 아래 같은 코드
11. Ajax : [Asynchronous Javascript + XML]
Javascript와 XML을 비동기로 서버와 통신을 이루는 것을 말한다.
12. 기능 순서
1) 클라이언트에서 비동기 갱신에 필요한 데이터를 서버에 보냄
2) 서버는 수신 클라이언트에 데이터를 반환
3) 클라이언트는 서버로부터 받은 데이터를 DOM에 반영
4) 관련된 객체
ⓐ XMLHttpRequest : 클라이언트와 서버 사이에서 데이터를 전송하는 기능을 클라이언트 측에서 제공하는 API
브라우저에서 서버와 HTTP 통신을 위한 API
ⓑ Javascript : XMLHttpRequest가 javascript 내장 개체
ⓒ DOM : Document Object Model(DOM)은 HTML과 XML 문서를 위한 API
Web 페이지를 스크립트나 프로그래밍 언어와 연결
ⓓ XML : Extensible Markup Language 로 문서와 데이터의 의미와 구조를 설명하기 위한 마크업 언어 중 하나
ⓔ JSON : JavaScript Object Notation로 경량 데이터 교환 형식
기본은 XML 경량은 JSON
13. Ajax 흐름
http://www.w3.org/TR/XMLHttpRequest1/
1) 페이지에서 어떤 이벤트가 발생(버튼 클릭 등)
2) Javascript + XMLHttpRequest로 서버에 요청을 제출(비동기 통신)
(원하는 정보, 돌아오는 응답의 정보를 사용하여 요청)
3) 서버에서 받은 정보를 처리
(서버 프로세스 중에 클라이언트는 작업을 계속할 수 있다)
4) 처리 결과를 JSON 또는 XML과 같은 형식으로 응답
5) 응답을 받은 결과를 DOM에서 페이지를 업데이트 한다.
댓글