44일차 - [JQ] 기초문법, event

안녕하세요. pitang입니다.

저번 게시물로 자바스크립트를 마무리하고 제이쿼리 jQuery를 알아보겠습니다.

jQuery의 기초와 event들을 먼저 알아보도록 하겠습니다.

 

JQUERY 기초

jQuery 라이브러리는 모든 웹 브라우저에서 동작하는 클라이언트용 자바스크립트 라이브러리이다.

 

jQuery는 무료로 사용 가능한 오픈 소스 라이브러리이며, 사용 목적은 다음과 같다.

- 쉬운 문서 객체 모델과 관련한 처리 구현

- 쉽고 일관된 이벤트 연결 구현

- 쉬운 시각적 효과 구현

- 쉬운 Ajax 응용 프로그램 개발 

 

ex1)

- 아래의 외부 js 파일을 html 파일에서 사용하는 방법은 다음과 같다.

98external-jf.html - 99external-jf.html

cool.js

console

 

CDN은 jQuery를 비롯해 구글, 마이크로소프트 등에서도 제공한다.

CDN은 파일을 여러 서버에 분산시키고 사용자가 접속하는 지역과 가장 가까운 곳의 서버에서 파일을 전송하는 기술이다.

이 회사의 링크를 복사해서 HTML 페이지를 작성한다.

 

그 회사의 링크를 복사해 사용하는 방법은 아래와 같다.

jQuery를 검색하면 아래의 사이트를 들어갈 수 있다. 

https://jquery.com/

jQuery

 

그 사이트에서 Download를 클릭해 아래로 스크롤하면 Other CDNs 가 나오게 된다.

download - Other CDNs - CDNJS CDN

나는 CDNJS CDN을 선택하였고, link요소 밑에 script 요소 안에 복사하여 붙여 넣어줬다.

CDNJS CDN - 복사, 붙여넣기

5번째 줄에 복사하여 붙여 넣기 한 코드를 확인할 수 있다.

code.html

 

JQUERY 문법

jQuery는 script요소 안에 작성한다.

 

jQuery 라이브러리는 아래와 같은 형태로 사용한다.

$(선택자). 메서드(매개변수, 매개변수(대게 function이 오게 됨)) 

자바스크립트는 식별자로 특수 문자 $와 _를 사용할 수 있다. 

 

querySelector() 메서드와 달리 문서 객체 여러 개를 한 번에 선택할 수 있고,

querySelectorAll() 메서드와 달리 반복문을 사용하지 않아도 된다.

 

ex1)

02jquery.html

console

 

ex2)

03jquery.html

console

---

jQuery는 script요소 안에 작성하는데 그 순서가 중요하다.

그렇기에, 앞으로 jQuery는 주로 style바로 밑 script요소에 작성을 할 것이다.

 

ex1)

04js-onload.html

console

위의 코드에서 아래의 주석 처리되어있는 것을 해제하고 위의 script요소를 주석 처리하면, 아래의 결과가 나오게 된다.

console

 

ex2) 

ready() 메서드는 DOM Tree가 생성이 완료된 후,  함수를 호출하는 것이다.

05jquery-ready.html

console

 

ex3)

06jquery.html

console

---

this selector는 현재 HTML 요소를 선택한다.

.class , #id 등과 같이 선택하는 방식의 this 가 있는 것이다.

ex1)

16this.html

console

 

ex2)

17this.html

console

 

jQuery-Events

이벤트란, 웹페이지가 응답할 수 있는 모든 작업을 이벤트라고 한다.

어려운 말이지만 아래의 예시들을 본다면 쉽게 이해가 갈 것이다.

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click - 마우스로 한번 클릭	keypress	submit	load
dbclick - 마우스로 더블 클릭	keydown	change	resize
mouseenter - 마우스가 올라옴	keyup - 타자를 치고 난 후	focus	scroll
mouseleave - 마우스가 떠남		blur	unload

 

select 이벤트는 마우스로 드래그하여 선택하면 발생한다.

 

ex1)

07event-click.html

console

 

ex2)

08event-dblclick.html

console

 

ex3)

09event-mouseenter.html

console

 

ex4)

10event-mouseleave.html

console

 

ex5)

hover(a, b) 메서드는 a - mouseenter, b - mouseleave 이벤트를 처리한다. 

11event-hover.html

console

 

ex6)

12event.html

console

---

on() 메서드는 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결한다.

on({ 중괄호 안에 객체로 이벤트를 쉼표로 구분해 계속 사용할 수 있다. })

 

ex7)

 

13event-on.html

console

 

ex8)

14event-on.html

console

 

ex9)

15event-on.html

console

 

 

 

 

 

감사합니다.

 

*m1 맥북을 사용 중입니다.*