[jQuery] Basic

Study/jQuery

[jQuery] Basic

tonyprojectroom 2022. 9. 26. 22:05

1. jQuery

1) jQurey 란

jQuery는 오픈 소스 JavaScript 라이브러리입니다. jQuery를 사용하면 짧고 단순한 프로그램으로 웹 페이지에 다양한 효과나 연출을 추가할 수 있고 복잡하게 구성된 콘텐츠를 제어할 수 있습니다. jQuery는 2006년 존 레식(John Resig)이 처음으로 공개했으며, 현재는 'jQuery Team' 이라는 개발자 그룹이 개발과 유지 보수를 담당하고 있습니다. [2] (20)

John Resig 가 개발한 JavaScript 라이브러리로 다음과 같은 특징이 있다. [1] (146)

- 'Write Less, Do More (좀 더 단순한 코드로 더 많은 처리를)' 목표

- 기본적인 DOM 조작에서부터 애니메이션 기능, 이벤트 처리, Ajax 통신까지, 대략 JavaScript 의 Web 사이트 개발 전반을 폭넓게 지원

- Internet Explorer, Chrome, Firefox, Safari, Opera 등 주요 브라우저 지원

- 사이즈는 32KB 정도로 가벼움 (Minified 판을 GZIP 압축한 경우)

- 고기능의 위젯을 제공하는 jQuery UI, 스마트폰 어플 대응 jQuery Mobile 을 비롯한 jQuery 를 베이스로 개발된 플러그 인이 풍부

2) jQuery 를 많이 사용하는 이유 [2] (24)

- CSS를 적용할 수 있으며 DOM을 쉽게 다룰 수 있습니다.

- 넓은 범위의 크로스 브라우징을 지원합니다.

- 애니메이션과 대화형 작업을 쉽게 구현할 수 있습니다.

- 버그가 적고 참고할 수 있는 정보와 문서가 많습니다.

- 플러그인이 풍부합니다.

- 코드를 적게 작성하므로 개발 시간을 단축할 수 있습니다.

- 모바일 기기에 대응 할 수 있습니다.

- MIT 라이선스를 적용했으므로 자유롭게 사용할 수 있습니다.

2. jQuery 임포트

1) CDN 경유로 소스 코드 임포트

- CDN : Content Delivery Network, 콘텐츠 배포에 특화한 전용 네트워크

Ex) jQuery 1.11.0.min 버전 소스 코드 임포트

<!DOCTYOE htlm>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </body>
</html>

Ex) 항상 최신 버전 소스 코드 임포트

<!DOCTYOE htlm>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </body>
</html>

2) 로컬에 다운로드 후 임포트

<!DOCTYOE htlm>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
    <body>
        <script src="jquery-1.11.0.min.js"></script>
    </body>
</html>

3. jQuery 다운로드 사이트

https://jquery.com/download/

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

4. jQuery $() 함수

문서 트리에서 요소를 빼내려면 $() 함수를 이용한다. jQuery 에서 $() 함수로 구한 요소 셋 (정식으로는 jQuery 객체) 을 바탕으로 jQuery 메소드를 호출하는 것이 기본적인 흐름이며 그런 의미에서 $() 함수는 jQuery 프로그래밍에서 기본이다. [1] (151)

JavaScript 코드는 위에서부터 차례대로 읽어 수행되는 것이 기본이다. 예를 들어 다음과 같은 코드는 올바르게 동작하지 않는다.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('p a:first').css('background-color', 'Yellow');
</script>
<p><a href="http://somecompany.net/">Some Company</a></p>

정확한 실행을 위해 jQuery 로 쓰여진 코드 전체를 $(function() { }) 로 묶는다.

$(fuction() { }) 로 묶인 코드는 페이지가 모두 읽히 뒤 실행되므로 조작의 내용에 관계없이 코드를 정확히 실행할 수 있다. [1] (156)

$(function() {
    $('p a:first').css('background-color', 'Yellow');
});

Reference

[1] 예제가 가득한 JavaScript 프로그래밍, Yamada Yoshihiro (2014), 정보문화사 (2015)

[2] jQuery 최고의 교과서, SHIFTBRAIN (2013), 한빛미디어 (2015)