[JavaScript] jQuery

[JavaScript Founder, Brendan Eich]

5. jQuery, Ajax, JSON

가. jQuery

- 자주 사용되는 자바스크립트 라이브러리

- write less, do more

- 코딩량이 매우 절감됨

- 2006년 존 레식(John Resig)이 발표

- http://jquery.com 에서 다운로드

1) jQuery의 버전

- 1.x 버전 : 구버전 브라우저까지 지원되는 버전

- 2.x 버전 : 구버전 브라우저(Internet Explorer 6, 7, 8 등)을 지원하지 않음

- 3.x 버전 : 2014년부터 개발, 더 빠르고 풍부한 API

2) jQuery를 사용하는 방법

- 다운로드 받아서 사용할 경우

<script src="jquery-3.2.1.js"></script>

- 다운로드 받지 않고 사용할 경우

<script src="http://code.jquery.com/jquery-3.2.1.js"></script>

3) 기본 문법

- 선택한 엘리먼트에 어떤 동작을 수행

$(selector).action()

$ : jQuery에서 정의 및 접근에 사용

(selector) : HTML 객체(태그)

action() : 해당 객체에서 수행할 동작

* 선택자 : HTML 객체(태그)를 선택함

- $("#name")    id가 name인 태그를 선택

- 엘리먼트를 선택해 작업을 처리하기 위해 사용

- $( ) 안에는 태그명, 태그의 id 속성값, class 속성값 등이 올 수 있음

- 엘리먼트명 사용 : $("p")

- id 속성 값 사용 : $("#test")

- class 속성 값 사용 : $(".t1")

4) 일반적인 jQuery 구조

DOM이 로딩 완료되면 jQuery 함수가 자동으로 실행됨

$(function() {

// 실행할 코드

});

5) 이벤트 처리

$(선택자).이벤트(실행할 코드);

$(선택자).bind("이벤트", 실행할 코드);

6) 이벤트의 종류

- click

- mouseover

- focus

- blur

7) 애니메이션 효과

show("slow"), show("fast")

hide() 숨기기

toggle()    show/hide를 교대로

animate() 애니메이션 효과

stop() 애니메이션 중지

fadeIn()    페이드인 효과

fadeOut()    페이드아웃 효과

slideUp()    슬라이드를 올림

slideDown()    슬라이드를 내림

8) jQuery를 이용한 DOM 변경

- $(선택자).text()    텍스트를 가져옴

- $(선택자).text("변경할 내용")    텍스트 변경

- $(선택자).html()    html 코드를 가져옴

- $(선택자).html("변경할 내용")    html 코드를 변경

- $(선택자).val()    입력 필드의 값을 가져옴

- $(선택자)val("변경할 내용")    입력 필드의 값을 변경함

- $(선택자).attr("변경할 속성")    요소의 속성 가져오기

- $(선택자).append("추가할 요소")    DOM 요소 추가

- $(선택자).remove()    DOM에서 삭제 처리

9) CSS 조작

- $(선택자).css("속성")    CSS 속성 가져오기

- $(선택자).css("속성", "값")    CSS 속성 값 변경

hide()

---

Hello, JavaScript!

(숫자, 문자, 참/거짓(불린/불리언)

Console 창을 흔히 레플(READ EVALUATE PRINT LOOP, REPL)이라고 부릅니다.

1-3 연산자