Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 DOM (2) jquery 사용 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 DOM (2) jquery 사용

Romantic_Developer 2018. 7. 31. 17:00

안녕하십니까 영감을 주는 개발자 방민방민입니다.


오늘은 웹 자바스크립트의 절대 강자 jquery에 대하여 사용해 보도록 하겠습니다.


jQuery 는 자주 사용되는 자바스크립트 코드를 정리해 놓은 라이브러리입니다.

그렇기 때문에 특정 로직을 사용할 때, 새롭게 해당 로직을 짤 필요가 없이 해당 라이브러리 코드만을 불러와서 사용할 수 있도록 해줍니다. 



1. jQuery 홈페이지


아래의 jQuery 홈페이지에서 jquery 파일을 다운로드 받습니다.

링크 주소 : https://jquery.com



그리고 아래와 같이 jquery 파일을 소스로 로드해 주면 사용이 가능합니다.


<html>

<!DOCTYPE html>
<html>
<body>
<script src="jquery.js"></script>
    <script>
    jQuery( document ).ready(function( $ ) {
      $('body').prepend('<h1>Hello world</h1>');
    });
    </script>
</body>
</html>


저의 경우에는 일단 같은 소스폴더에 위치해 있기 때문에, src =  'jquery.js' 를 바로 사용하였습니다.

다른 폴더에 있다면 "../폴더경로" 를 통해 실제 폴더 경로를 찾아주면 됩니다.


위의 코드는 아래의 결과를 출력합니다.



코드를 간단하게 설명하면 $('body') 를 이용하여 , body 태그 엘리먼트에 대한 제어를 선택합니다.

.prepend 는 body 태그 맨 앞을 의미합니다. 그리고 <h1>hello world<h1> 를 통해 화면에 hello world 를 출력합니다.



오늘은 간단하게 제이쿼리 사용방법에 대하여 알아보았습니다.


제이쿼리는 자바스크립트 사용에 있어 아주 강력한 라이브러리입니다. 

10줄 이상의 코드를 1줄로 요약할수 있기도 합니다. 이러한 제이쿼리의 사용법에 대한 내용은 추후 포스팅에서 다루도록 하겠습니다.


그러면 지금가지 영감을 주는 개발자 방민방민 이었습니다! :)

저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 DOM (4) HTML element  (0) 2018.08.02
(Web JavaScript) 웹 자바스크립트 DOM (3) jquery 제어대상 찾기  (0) 2018.08.01
(Web JavaScript) 웹 자바스크립트 DOM (1) 제어대상 찾기  (0) 2018.07.30
(Web JavaScript) 웹 자바스크립트 BOM (4) 창제어  (0) 2018.07.29
(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체  (0) 2018.07.28
'Romantic Developer/Web JavaScript' Related Articles more