jQuery

jQuery는 HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리이다. 기능적으로야 더 좋은 라이브러리들도 많지만, jQuery가 순식간에 업계를 장악한 특장점은 바로 무지하게 쉽고 간편하다는 점이다. 'write less, do more.'가 모토로서 비프로그래머인 웹디자이너들도 어렵지 않게 이해할 수 있을 만큼 쉬운 편이다. DOM 구조와 CSS에 대한 지식만 있다면 애니메이션 같은 건 바로 이해가 가능할 정도다

 

- 쉬운 API를 통해서 문서 탐색 및 조작,

- 이벤트 처리, 애니메이션, ajax등을 훨씬 더 간단히 만들어줌

- 함수에 이름을 붙이면 같은 기능이 필요할 때 해당 함수를 실행 할 수 있어서 유용함.

- 표준 라이브러리의 일부로 사용되는 경향이 더 많으므로 더 익숙해 질 수 있도록 하기 위함.

 

JQuery vs Js

jQuery를 이용한 노드 (웹 요소) 찾기

기초 요소:

var $변수 이름 = $("css 선택자") 

 

*$(): 함수를 호출하는 역활을 한다. 

* 선택자: css 그대로를 의미함.

* var $변수 이름: $() 함수의 역활은 선택자에 해당하는 노드를 찾아주는 역활을 한다.

 

Relationship between css and jquery

$("div")

$(".select")

$("div ul")

$("#menu2 li")

 

1. 이벤트 등록

$대상.on("이벤트 이름", "이벤트 리스너");

$대상.단축이벤트함수(이벤트리스너);

 

예시:

 

2. 스타일 설정

$대상.css("스타일 이름", 값);

 

예시: