jquery-12: jQuery

jQuery란 ?

클라이언트 측 페이지 제작을 손쉽게 만들어주는 자바크스크립트 라이브러리이다

• 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통 해 HTML 문서 탐색과 조작,
• 이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만들어 줌.
• 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.

jQuery를 먼저 배우는 목적

• jQuery를 사용하지 않으면, 전혀 실무적인 코드가 아닌 재미없는 예제로 구성될 것이다.
• 아울러, 자바스크립트로 코드를 짜게 되면 코드량만 늘어나 특정 기능이나 문법을 배우는데 집중이 어렵다.
• 가장 큰 이유는 바로 웹 프로그래밍에서 jQuery는 거의 표준 아닌 표준 라이브러리이기에 좀 더 빨리 익숙하게 하기 위함이다.

jQuery 사용법

• jQuery를 이용한 노드(웹 요소) 찾기 var $변수 이름 = $(“CSS 선택자”) ← 가장 기초적인 노드 찾는 방법

• $()의 정체
  • $()를 jQuery라고 생각하시는 초보자도 있지만, 사실 $()은 그냥 함수를 호출하는 것.
  • 함수 이름이 $()인 함수를 호출하는 것.
  • $()함수의 역할은 선택자에 해당하는 노드를 찾아주는 역할을 함.
• 선택자
  • 말 그대로 CSS의 선택자를 의미한다.
  • 찾고 싶은 선택자를 만들어 $()함수에 매개변수 값으로 넣어주면 된다.
• var $변수 이름
  • $()함수에서 리턴해주는 값을 저장하기 위해서 만든 변수일 뿐이다.앞에 $를 붙이 이유는 jQuery 기능이 들어있는 변수를 표현하기 위함.

jQuery와 css와의 관계

• CSS의 선택자 기능으로 jQuery의 기능이 각광을 받을만큼 연관성이 높다.
• CSS의 선택자 기능만 알고 있으면 jQuery기능은 어느정도 사용할 수 있다.

jQuery핵심기능

-이벤트(event)등록

$대상.on(“이벤트 이름“, ”이벤트리스너“); 또는 $대상.단축이벤트함수(이벤트리스너);

스타일 설정하기

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