잡동사니에도 사랑을

jQuery정리 본문

카테고리 없음

jQuery정리

luvforjunk 2021. 9. 24. 17:35
728x90
반응형

jQuery의 개요

* jQuery

- 전 세계에서 가장 많이 사용되는 JavaScript 라이브러리
- HTML 요소 제어
  → HTML 요소를 손쉽게 획득하고 제어할 수 있다.
- 손쉬운 이벤트 처리
  => 단 한번의 이벤트 정의로 크로스 브라우징 해결
- 요소의 탐색과 생성
  → DOM 요소를 제어하기 위한 간결한 기능 제공
- Ajax 통신처리
  → 페이지 이동이 없는 비동기 데이터 통신

 

* jQuery 특징

- 크로스 브라우징

  → 한번의 코딩으로 거의 모든 브라우저에 적용된다.
- 간결한 문법
  → HTML 태그 (element)를 제어하거나 이벤트를 처리하는 부분 등 Javascript의 전반에 걸쳐서
     구문이 짧아지기 때문에 개발 효율성이 높아진다.
- 익숙한 구문
  → CSS에서 사용하던 속성과 값을 그대로 Javascript 구문에 적용할 수 있어서 
     document 내장 객체가 제공하는 기능을 쉽게 사용할 수 있다.
- 다양한 플러그인
  → jQuery를 기반으로 하는 수 많은 플러그인들이 무료로 배포되고 있기 때문에, 
     갤러리, 메뉴 등의 구현에 대한 작업이 많이 단축된다.

 

jQuery 개발 환경


1. jQuery 라이브러리
  - 사이트 : http://www.jquery.com 
  - production 버전 다운로드
    "Download the compressed, production jQuery 3.6.0" 

 

2. jQuery 참조하기 
① js 파일을 다운 받아서 사용
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
② http://code.jquery.com의 CDN 서비스를 사용
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
③ http://code.jquery.com의 CDN 서비스를 버전 명시 없이 사용
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

 

 

CDN(Contents Delivery Network) 이란?

- 지리, 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술
- 느린 응답속도 / 다운로딩 타임 을 극복하기 위한 기술

 

CDN을 사용하지 않는 경우
CDN을 사용하는 경우

 

 

jQuery 문법

: jQuery를 사용하면 아주 편하게 HTMl 요소를 선택하고, 쉽게 특정 동작들을 설정할 수 있다.

[형식] $(선택자).동작함수( );

*동작함수( ): 가장 대표적으로 click이 있다.
 
$ 기호는 jQuery를 의미하면서 jQuery에 접근할 수 있는 식별자 이다.
괄호안에 "선택자"를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

$( ) 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해줍니다.
$( ) 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
이러한 $( )함수를 통해 생성된 요소를 제이쿼리 객체(jQuery Object)라고 한다.
jQuery는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.

Document 객체의 ready( ) 메소드
Javascript 코드는 웹브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
보통은 별다른 문제가 발생하지 않지만, 아래 2가지일 경우에는 오류가 발생한다.
1. 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
2. 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우

window.onload = function( ){
   //자바 스크립트 코드;
};
Javascript에서는 Window 객체의 onload( ) 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.

$(document).ready(function( ) {
    //제이쿼리 코드;
});
jQuery에서는 Document 객체의 ready()메소드를 이용하여 위와 같이 동일하게 로드된 뒤에 코드가 실행된다.

$(function( ) {
    제이쿼리 코드;
});
jQuery에서는 위 코드와 동일한 결과를 보장하며 더욱 짧은 문법을 제공한다.

[실습]
<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script>
       // jQuery
      $(document).ready( function() {
         $("#docu").text("문서가 전부 로드됐어요!");
      });
        // Javascript
      $(window).load( function() {
         $("#wind").text("창이 모두 로드됐어요!");
      });
   </script>
</head>
<body>
   <p id="docu">제이쿼리</p>
   <p id="wind">자바스크립트</p>
</body>
</html>

<p>태그에서 id속성으로 각각 값을 입력해줍니다.
<script>에서 jquery로 $()안에 #을 사용하여 id의 속성을 의미하고, 그 값을 넣어 선택자를 지정한다.
text함수를 호출해서 값을 입력하면 웹브라우저가 문서의 모든 요소를 로드한 뒤에 
위 코드의 <script>가 바로 실행되도록 한다.


jQuery $()의 의미

$()가 의미하는 것은 무엇이냐고 물어보면 처음에 jQuery라고 대답한다. 어떤 의미에서는 맞는 말일 수도 있지만 정확한 의미는 그냥 이름이 $인 함수 그 자체라고 할 수 있다. 해석하자면 $()는 $함수를 호출 한 것이라고 할 수 있다. jQuery 라이브러리 내부를 살펴보면 아래와 같이 작성되어 있는 것을 알 수 있다.

window.jQuery = window.$ = jQuery;

따라서 위의 코드에 따라 아래 두 코드는 동일한 코드이다.
$('div').css('border', '4px solid #f00');
jQuery('div').css('border', '4px solid #f00');

$('div') 의미는 'div'를 매개변수 값으로 $() 함수를 호출한 것이다.

$()함수의 리턴값
Javascript에서 점(.)은 특정 객체에서 제공하는 기능에 접근할 때 사용하는 접근 연산자이다. 
$('div').css('border', '4px solid #f00');

.css()는 접근 연산자를 통해 특정 객체에서 제공하는 기능 중 하나이다. 즉 $('div') 함수의 리턴값인 특정 객체가 바로 jQuery객체라는 것이다. 위의 코드를 좀더 쉽게 정리하자면 아래와 같다.
$divs = $('div');
$divs.css('border', '4px solid #f00');

$()가 jQuery 객체를 리턴한다는 사실은 jQuery 레퍼런스를 보면 알 수 있다.
http://api.jquery.com/jQuery에 들어가보면 오른쪽 상단에 return으로 jQuery 객체를 해주는 것을 알 수 있다.

jQuery 정체
jQuery 객체에 대해 좀 더 자세히 알아보자면 앞에서도 언급한 것처럼 DOM을 쉽게 다룰 수 있게 도와주는 기능들로 가득 찬 라이브러리이다. jQuery는 자바스크립트의 prototype이라는 클래스 제작 문법으로 만들어졌으며, jQuery를 prototype으로 간단하게 표현하면 아래와 같다.
function jQuery() {
}
 
jQuery.prototype.css = function(){}
jQuery.prototype.on = function(){}
jQuery.prototype.click = function(){}

클래스를 사용하기 위해서는 인스턴스를 생성해야 하지만, 우리는 jQuery를 사용할 때 jQuery 인스턴스를 생성한 적이 없다. 그럼에도 불구하고 사용할 수 있는 건 무슨 이유일까, 바로 $()에서 jQuery 인스턴스를 여러분 대신 만들어서 제공해주기 때문이다.

function $( ) {
    return new jQuery();
}

728x90
반응형