제이쿼리(jQuery) 설치 및 사용법

 

 

"write less, do more."
적게 작성하고, 많은 것을 하자

 

제이쿼리(jQuery)란? 

 

제이쿼리(jQuery)는 웹 사이트에 자바스크립트를 쉽게 활용할 수 있도록 만들어주는

오픈소스 기반의 자바스크립트 라이브러리이다.

 

2006년 미국의 존 레식(John Resig)에 의해 뉴욕 시 바캠프에서 공식적으로 소개되었다.

 

작지만 풍부한 기능을 강점으로 여러 자바스크립트 라이브러리 중 높은 점유율을 보였으며

전 세계 개발자 설문 조사 StackOverflow Developers Survey 2020에 따르면

jQuery는 개발자 사이에서 가장 많이 사용되는 웹 프레임워크로 1위를 차지했다.

 

https://insights.stackoverflow.com/survey/2020#technology

그러나 현재는 웹브라우저 환경의 변화(Google Chrome), 가상 DOM을 사용하는 리액트(React.js)의 등장으로 밀려나는 추세

 

 

제이쿼리(jQuery)의 특징? 

 

1. 웹디자이너들도 어렵지 않게 이해할 수 있을 만큼 쉽고 간편하다는 점이다.

DOM 구조와 CSS에 대한 지식만 있다면 짧은 코드로 다양한 애니메이션 효과를 적용할 수 있다.

 

2. 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원된다.

웹 사이트 개발시 브라우저간 호환성을 신경 쓰지 않아도 된다.

 

3. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현

 

4. 오픈 라이선스를 적용하여 누구나 자유롭게 사용 가능

 

5. 다양한 플러그인과 참고 문서가 다수 존재

플러그인 검색 https://plugins.jquery.com/

jQuery Plugin Registry

 

 

제이쿼리(jQuery) 사용하기 

 

jQuery는 한 개의 JavaScript 파일로 존재하며 그 안에 여러 기능들이 포함되어있어,

코드를 가져와서 포함시켜 사용한다.

 

jQuery를 설치하는 방법으로는 크게 두 가지가 있다.

 

 

1. 링크를 사용하는 방법

 

작성한 <script>...</script> 태그 바로 윗 줄에 jQuery CDN의 코드를 붙여 넣어주는 방법 (jQuery CDN -> minified)

<script
	src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    	crossorigin="anonymous">
</script>
<script>
  // 내 코드...
</script>

사용 예시

 

 

2. 직접 jQuery 코드를 다운받아서 쓰는 방법

 

jQuery 사이트에 들어가면 jQuery 코드를 직접 다운로드 받을 수 있다. ( .js 파일 우클릭 - 다른 이름으로 링크 저장 )

코드를 다운로드 받아서 프로젝트 안에 두고, <script>태그에 jquery.js 파일에 대한 경로를 써주면 된다.

경로 예시 사진

<script src="js/jquery-3.6.0.min.js"></script>
<script>
//내 코드...
</script>

사용 예시

 

 

 

jQuery = '선택' + '동작'

 

모든 jQuery 코드는 . 을 기준으로 선택 부분과 동작 부분으로 나눌 수 있다

// 선택 // . // 동작 //
$('#hello').on('click', sayHello);
$('#hello').text();
$('#hello').css('background', '#7f8ff4');

$('#hello')는 id가 hello인 요소를 선택하는 코드이다

jQuery는 CSS문법을 그대로 사용하며, id를 #으로 선택하는 것은 CSS문법이다

마찬가지로 class인 요소 선택은 $('.클래스명')으로 선택할 수 있다