jQuery
Javascript는 동적언어로 문법적 표현이 너무 다양해서 좋아하는 사람(나)은 이점을 좋아하지만
싫어하는 사람은 tricky하다고 아주 많이 싫어합니다. 호불호가 많이 나뉘죠
jQuery는 이런 자바스크립트의 다양한 문법에 어느정도 일관성을 부여해서 누구나 쉽게
배울수 있도록 하자는 취지로 만들어진 Javascript 라이브러리입니다.
AJAX 흥행이후 Javascript의 새로운 버젼이 매년 발표되면서 jQuery는 업그레이드 버젼을 내놓기가 어려워져서
그 미래가 불투명해지긴 하였지만, 이미 많은 곳에 퍼져 있고, 좋은 플러그인 프로그램도 많아서
금방 없어질거라고 속단하기는 이릅니다. 자바스크립트의 크로스 브라우져 문제(브라우져 호환성)도 감안하면 금방 없어지진 않겠죠
하지만 현재 진행되는 모습과 진행되어진 내용을 볼 때, 마이크로소프트 IE 문제만 어느정도 해결(EDGE이상으로)되어
최신버젼의 Javascript를 범용적으로 사용할 수 있으면 jQuery의 사용은 많이 줄어들 것으로 보입니다.
설치
https://jquery.com/ 에서 다운로드
또는 CDN을 이용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
시작
//window.onload 구현(실제는 완전히 같지는 않음)
$(document).ready(function(){ })
또는(가장 많이 쓰는 방식)$(function(){ })
$글자 다른 라이브러리와 충돌시
$.noConflict();
//위 명령 기술후 $대신 jQuery 사용
기본 사용느낌
$(선택자).html() //읽기
$(선택자).html("값") //쓰기
CSS 선택자(Selector)
구글에서 css selector cheatsheet로 검색하면 GOOD 자료!
전체 *
TAG
ID #
CLASS .
자손 >
후손 빈칸(스페이스)
여러개선택 ,로 나열
속성 요소[속성=값]
#### 필터선택 예 #####
INPUT:BUTTON
INPUT:CHECKBOX:CHECKED
SELECTOR > OPTION:SELECTED
### 함수선택 예 #####
eq
nth-child(2n+1)
필수 메소드
/******** eq *********/ eq(인덱스번호) eq(뒤에서부터인덱스번호 곧 마이너스인덱스) /******** html *********/ html() html(문자열) html(function) // 만약 function의 리턴값이 있으면 그 값으로 /******** val *********/ val() val(값) val(function) /******** attr *********/ attr(속성명) attr(속성명, 값) attr(속성과값의 묶음 곧 JSON) attr(속성명, function(인덱스,값){}) // function의 리턴 값 /******** css *********/ css(속성명) css(속성명묶음JSON) css(속성명, 값) /******** prop *********/ prop(속성명) prop(속성명, 값) prop(속성명값묶음) prop(속성명,function) // attr의 일부 문제를 개선 /******** append 반대는 prepend *********/ append(내용 [,내용]) append(function) // return이 중요 /******** appendTo *********/ appendTo(타겟) /******** remove *********/ remove(타겟) /******** trigger *********/ trigger(이벤트명) /******** show *********/ show() /******** hide *********/ hide() /******** addClass *********/ addClass(클래스명) /******** removeClass *********/ removeClass(클래스명) /******** each *********/ each(function) /******** 추가적으로 찾아봐야 할 메소드 ***********/ find 검색기준: 현재선택된 요소부터현재선택된 요소의 후손(자손포함)부터 filter 검색기준: 현재선택된 요소부터 closest end first/last add is parent/children empty
객체생성 예 (태그문자열 이용)
(“<h1></h1>”)(“<img>”)
이벤트
jQuery객체.이벤트명(콜백함수)
jQuery객체.on(이벤트명,콜백함수)
jQuery객체.off(이벤트명)
jQuery사용에 가장 핵심적 기술
jQuery API 문서 보는법을 터득
$(JavaScript DOM객체) 처럼 사용하면 자바스크립트로 접근한 DOM객체에 jQuery메소드 사용이 가능
ⓧ
jQuery AJAX로 파일업로드를 구현할때는
processData:false, contentType:false 설정 필요
cache:false도 권장