글 작성자: juyoungit

jQuery

개발자들은 항상 개발의 효율성을 극대화하기 위해서 항상 다음과 같은 내용들을 고민했습니다.

1. 어떻게 하면 코드의 가독성을 최대화 할 수 있도록, 코드를 깔끔하게 작성 할 수 있을까?
2. 어떻게 하면 코드를 재사용 할 수 있을까?

코드를 깔끔하고 단순할수록 코드의 가독성이 올라가고, 코드를 재사용할 수 있을수록 코드를 작성하는 데 들이는 시간이

절약되기 때문에 위의 고민들은 개발을 함에 있어서 굉장히 중요한 이슈이기도 합니다. 그래서 이전에 공부한 javascript에 대한 위의 고민을 해결한 것 중 하나가 바로 jQuery 입니다.

 

jQuery는 자바스크립트의 라이브러리로서 오픈소스로 되어있고 배우기 굉장히 쉽다는 장점이 있습니다. 그리고 무엇보다도 자바스크립트에 비해서 코드가 굉장히 직관적으로 작성될 수 있다는 점입니다. jQuery의 목적은 웹 사이트에서 자바스크립트를 훨씬 쉽게 사용할 수 있도록 하는 것 입니다. 이전에 자바스크립트로 여려줄의 코드를 작성해서 구현하였던 기능들을 jQuery를 이용하면 단 몇줄의 코드만으로 구현할 수 있는 강력한 method들이 많이 지원됩니다.

 

jQuery는 기존에 공부했던 자바스크립트에 비해서 사용하기 정말  편리하고, 자바스크립트로 할 수 있는 일들을 모두는 아니지만 거의 대부분 대체할 수 있기 때문에 굉장히 많이 사용되고 있습니다. 실제로 많은 IT 기업들도(Google, MS, IBM, Netflix 등)이 jQuery를 이용해서 서비스를 개발/제공하고 있습니다.

 

jQuery를 공부하기 위해서는 이전에 다루었던 HTML, CSS, JavaScript에 대한 사전지식이 필요합니다. jQuery를 공부하기 전에 우선 이 세가지 항목에 대해서 전반적인 내용을 다시 한 번 살펴볼 것을 권장 드립니다. Html, CSS, JavaScript 대한 이해를 기반으로 jQuery를 공부한다면 jQuery가 가지는 장점을 더 크게 느끼실 수 있을 것입니다.

 

 

그래서 jQuery를 공부하기에 앞서서 다음 사실 한 가지를 기억해두고 시작하면 좋습니다.

 

jQuery 사용 목적은 동적 웹페이지 구현에 필요한 JavaScript를 더 쉽게 사용하기 위함이다.

 

실제로 이전에 JavaScript에 대해 공부하면서 함께 공부한 AJAX, DOM Manipulation을 다루기 위해서는 상당히 복잡하고 긴 로직의 코드가 필요했지만 jQuery를 사용하면 이러한 과정들을 하나의 method로 표현함으로서 단 몇줄의 코드만으로 동일한 기능을 수행할 수 있게 됩니다. 실제로 jQuery는 아래의 기능들을 더 쉽게 구현할 수 있도록 하는 여러가지 method를 지원합니다.

1. HTML/DOM manipulation
2. CSS manipulation
3. HTML event methods
4. Effects and animations
5. AJAX
6. Utilities

물론 jQuery 말고도 여러 종류의 JavaScript 라이브러리가 존재하지만, 그 중에서 이 jQuery가 대중적으로 많이 사용된다고 이해하면 됩니다.

 

jQuery를 사용하는 방법

웹 페이지에서 jQuery를 이용할 수 있는 방법은 다음 2가지 방법이 있습니다.

1.  직접 다운로드 해서 사용
2. CDN(Contents Delivery Network)을 사용

jQuery 라이브러리 다운로드

다운로드 가능한 jQuery에는 두 가지 버전이 존재합니다.

프로덕션 버전 - 라이브 웹사이트를 위한 축소 및 압축된 버전
개발 버전 - 테스트 및 개발용 (압축되지 않고 읽을 수 있는 코드)

그리고 이 두 가지 버전 모두 아래의 링크에서 다운로드가 가능합니다.

jQuery.com

 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

 

 

jQuery 라이브러리는 단일 자바스크립트 파일이며 html <script> 태그를 사용하여 참조할 수 있습니다. 아래와 같이 html 문서의 <head> tag 안에 <script> tag를 통하여 다운로드한 jQuery 라이브러리 파일을 지정해주면 됩니다.

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

위와 같이 코드를 작성하는 경우 다운로드한 jQuery 라이브러리 파일은 페이지 소스가 위치한 디렉터리에 위치해야하며

다른 위치에 위치한 경우 절대/상대 경로를 사용해서 접근할 수 있습니다.

 

jQuery CDN

CDN이란 Contents Delivery Network의 약자로서 Contents의 전송을 위해서 사용되는 아주 빠른 속도의 네트워크를

말합니다. 그렇기 때문에 CDN을 사용해서 jQuery를 참조하게 되면 별도로 jQuery를 다운로드하여 웹서버의 디렉터리에

저장할 필요가 없습니다. CDN을 이용해서 jQuery를 참조하는 코드는 다음과 같습니다.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

CDN을 이용해서 jQuery를 이용하게 되면 속도가 굉장히 빠르기 때문에 로딩시간을 단축할 수 있다는 장점이 있습니다.

(대부분의 CDN은 사용자가 파일을 요청하면 가장 가까운 서버에서 파일을 제공하기 때문 입니다.)

 

 

jQuery 구문

jQuery 구문은 HTML 요소를 선택하고 요소에 대한 작업을 수행할 수 있도록 맞춤화 되어 있습니다. 기본적인 jQuery 구문은 다음과 같은 구조로 이루어져 있습니다.

$(selector).action()

위의 기본 구조에서 각 부분이 의미하는 바는 다음과 같습니다.

문자/part 내용
$ jQuery를 정의하고 접근하기 위한 문자
selector HTML 요소를 지정/찾기 위한 부분
action() selector로 지정한 HTML 요소에서 수행할 jQuery 작업

 

 

문서준비 이벤트(Document Ready Event)

jQuery의 모든 메소드들은 아래와 같이 Document Ready Event 내에 위치하게 됩니다.

$(document).ready(function(){

  // jQuery 메소드가 위치하는 부분

});

이는 문서의 로딩이 완료되기 전에 다른 jQuery 코드가 실행되는 것을 방지하기 위함입니다. 문서의 로딩이 완료되지 않은 상태에서 jQuery의 메소드가 실행될 경우 아직 생성되지 않은 요소를 숨기려고 한다거나 아직 로딩되지 않은 이미지의 크기를 가져오려는 등의 시도를 하게 되기 때문에 오류가 발생하게 됩니다. 그래서 이러한 오류를 방지하기 위해서는 반드시 jQuery의 모든 메소드들을 Document Ready Event 내에 위치셔켜주어야 합니다.

 

Document Ready Event 는 다음과 같이 더 간단하게 작성할 수도 있습니다.

$(function(){

  // jQuery 메소드가 위치하는 부분

});

첫번째와 두번째 예시모두 동일한 문서준비 이벤트를 나타내는 구문이며 각자 자신이 선호하는 스타일에 따라서 원하는 구문을 사용하면 됩니다.

 

 

jQuery 선택기(Selector)

jQuery Selector는 jQuery 라이브러리에서 가장 중요한 부분 중 하나라고 할 수 있을 정도로 중요한 부분 입니다. 이 jQuery Selector를 사용함으로써 HTML element를 선택하고 조작할 수 있으며, HTML element를 선택하는 데 name, id, class, type, 속성값 등을 사용합니다. jQuery의 모든 선택기는 달러기호(' $ ')와 괄호( ' ( ', ' ) ')로 시작합니다.

 

요소 선택기(Element Selector)

jQuery Element Selector는 element의 이름을 기준으로 요소를 선택합니다. 이는 이전에 CSS에서 공부했던 selector의 방식과 거의 동일하므로 이해하기 쉬울 것입니다. 그래서 아래와 같이 코드를 작성하는 경우 이는 현재 페이지의 모든 <p> 태그를 선택하겠음을 의미합니다.

$("p")

아래의 두번째 코드를 보면 아직 우리가 공부하지 않은 표현들도 있습니다. 하지만 지금은 아래의 코드에서 Selector 쪽만

집중해서 보도록 하겠습니다.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

위의 코드를 해석해보면 해당 코드는 "button" 요소가 클릭된 경우 모든 "p" 요소를 숨기는 함수를 실행하라는 의미로 해석할 수 있습니다.

 

id 선택기(Id Selector)

jQuery Selector는 HTML tag의 id 속성을 사용하여 특정 element를 찾을 수 있습니다. id는 해당 페이지 내에서 고유한(유일한) 값을 속성값으로 가지기 때문에 고유한 한 element를 찾고 싶은 경우 html element에 적절한 id 속성값을 할당하고 jQuery 에서 이 속성값을 이용해 해당 html 요소로 접근할 수 있습니다.

id를 기반으로 선택하기 위해서는 코드상에서 아래와 같은 표현을 사용합니다.

$("#test")

 

 

class 선택기(Class Selector)

또한 jQuery Selector는 HTML 태그의 class 속성을 사용하여 특정 요소를 찾을 수 있습니다. 특정 class를 가진 요소를 찾고 싶은 경우 다음과 같이 코드르 작성합니다. 전반적으로 CSS에서 사용하는 Selector와 거의 동일한 표현들을 사용하는 것을 발견할 수 있을 것 입니다.

$(".test")

 

 

위에서 언급한 선택기들을 다양하게 응용해서 활용할 수 있습니다.

활용의 예시는 다음과 같으니 학습 시에 참고하시면 좋을 것입니다.

선택기(Selector) 내용
$("*") 모든 요소를 선택
$(this) 현재 위치한 html 요소를 선택
$("p.intro") class intro에 속하는 모든 <p> 요소를 선택
$("ul li:first") 첫번째 <ul> 요소의 첫번째 <li> 요소를 선택
$("ul li:first-child") 모든 <ul> 요소의 첫번째 <li> 요소를 선택
$("[href]") href 속성을 가진 모든 요소를 선택
$("a[target='_blank']") target 속성값이 _blank인 모든 <a> 요소를 선택
$("a[target!='_blank']") target 속성값이 _blank가 아닌 모든 <a>요소를 선택
$(":button") 모든 <button> 요소와 <input>의 type이 button인 요소를 선택
$("tr:even") 모든 짝수인 <tr> 요소를 선택
$("tr:odd") 모든 홀수인 <tr> 요소를 선택

 

 

jQuery 이벤트 메소드(Event Method)

jQuery에서 사용할 수 있는 이벤트 메소드의 종류와 그 기능은 다음과 같습니다.

메소드(Method) 내용
click() 특정요소가 클릭된 경우
dblclick() 특정요소가 더블클릭된 경우
mouseenter() 특정요소 안으로 마우스 커서가 들어간 경우
mouseleave() 특정요소 안에서 마우스 커서가 나간 경우
mousedown() 특정요소 위에서 마우스 왼쪽, 오른쪽, 가운데 버튼이 눌러진 경우
mouseup() 특정요소 위에서 마우스 왼쪽, 오른쪽, 가운데 버튼이 떼어진 경우
hover() mouseenter()와 mouseleave()의 역할을 모두 수행

(첫번째 인자로 전달하는 함수는 mouseenter 의 경우
두번째 인자로 전달하는 함수는 mouseleave의 경우 수행함)
focus() 양식(form) 필드 위에 포커스가 있는 경우 인자로 받은 함수수행
blur() 양식(form) 필드 위에 포커스가 없는 경우 인자로 받은 함수수행

on 메소드(Method)

on() 메소드는 선택된 요소에 대해서 하나 이상의 이벤트 핸들러를 첨부하려는 경우 사용할 수 있습니다.

하나의 이벤트 핸들러를 첨부하는 경우에는 아래와 같이 작성할 수 있고

$("p").on("click", function(){
  $(this).hide();
});

여러개의 이벤트 핸들러를 첨부하려는 경우 아래와 같이 작성할 수 있습니다.

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

'Web Basic > jQuery' 카테고리의 다른 글

jQuery - AJAX  (0) 2021.07.16
jQuery - Traversing  (0) 2021.07.16
jQuery - HTML  (0) 2021.07.16
jQuery - Effect  (0) 2021.07.15

티스토리툴바