<java script+jQuery> jQuery 개요

1. jQuery란?

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

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

jQuery를 배우는 목적

  jQuery를 사용하지 않으면, 전혀 실무적인 코드가 아닌 재미없는 예제로 구성될 것

• 아울러, 자바스크립트로 코드를 짜게 되면 코드량만 늘어나 특정 기능이나 문법을 배우는데 집중이 어려움.
• 가장 큰 이유는 바로 웹 프로그래밍에서 jQuery는 거의 표준 아닌 표준 라이브러리이기에 좀 더 빨리 익숙하게 하기 위함

2. jQuery 사용법

jQuery 기능이 있는 라이브러리 파일 연결하기

• lib 폴더를 만들고 https://jquery.com/download/에서 다운로드한 파일을 아래와 같이 연결한다.

jQuery를 이용한 노드(웹 요소) 찾기
var $ 변수 이름= $("css 선택자") <- 가장 기초적인 노드 찾는 방법

$()의 정체

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

3. jQuery와 CSS와의 관계

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

4. jQuery 핵심 기능

이벤트(event) 등록
이벤트는 사용자의 행위를 뜻하는 것( ex) 스크립트에서의 hover)
대상.on("이벤트 이름","이벤트 리스너"); 또는 $대상.단축이벤트함수(이벤트리스너);</span> **스타일 설정하기** 대상.css("스타일 이름",값);

ex) 실습예제

=> https://github.com/SHINYEBIN/JS-ex.git

1) 자바스크립트로 글자색 바꾸기

오류) getElementsById가 아니라 getElementById이다!(s 안붙음!)

해결)

2) jQuery로 글자색 바꾸기

jQuery를 연결하는 2가지 방법
첫번째, CDN 방식 - 인터넷이 연결되는 곳에서만 아래코드가 적용

두번째, jQuery 다운받는 방법

주의할 점 : jQuery를 사용하려면 반드시 연결해줘야 한다!

                    참고강의: 자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1(인프런)