[ JavaScript ] 제어 대상 찾기 - 제이쿼리(jQuery)

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

자바스크립트 기본 문법  ::  제이쿼리(jQuery)

 

 

 

 

 

 

라이브러리

 

자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 합니다.

 

 

jQuery

 

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구 중 하나입니다.

 

 

 

 

jQuery 의 사용

 

 

jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 합니다. 

 

 

직접 다운 받는 방식과, CDN 을 이용하는 방법이 있습니다.

 

 

아래의 예제 코드는 CDN 을 이용해 jQuery 를 로드하는 코드입니다.

 

 

 

<!DOCTYPE html>
<html>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    jQuery( document ).ready(function( $ ) {
    
    });
    </script>
</body>
</html>

 

 

 

 

 

jQuery 를 이용하면 DOM 을 사용하는 것보다 훨씬 효율적으로 필요한 객체를 조회할 수 있습니다.

 

 

jQuery 는 객체를 조회할 때 CSS 선택자를 이용합니다.

 

 

 

 

jQuery의 기본문법

 

 

jQuery의 기본 문법은 단순하고 강력합니다.

 

 

 

 

 

 

$()는 jQuery의 함수입니다.

 

이 함수의 인자로 CSS 선택자(li)를 전달하면, jQuery 객체를 리턴합니다.

 

이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있는데,

위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경해줍니다.

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
    <style>
    #demo{width:200px;float: left; margin-top:120px;}
    #execute{float: left; margin:0; font-size:0.9em;}
    #execute{padding-left: 5px}
    #execute li{list-style: none}
    #execute pre{border:1px solid gray; padding:10px;}
    </style>
</head>
<body>
<ul id="demo">
    <li class="active">HTML</li>
    <li id="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
<ul id="execute">
    <li>
        <pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i&lt;lis.length; i++){
    lis[i].style.color='red';   
</pre>
        <pre>
$('li').css('color', 'red')     </pre>
        <input type="button" value="execute" onclick="$('li').css('color', 'red')" />
    </li>
    <li>
        <pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i &lt; lis.length; i++){
    lis[i].style.color='red';   
}</pre>
        <pre>
$('.active').css('color', 'red')</pre>
        <input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
    </li>
    <li>
        <pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
        <pre>
$('#active').css('color', 'red').css('textDecoration', 'underline');
        </pre>
        <input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
    </li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>

 

 

 

위의 코드는 복잡하니, 실행된 결과만 확인해보도록 하겠습니다.

 

 

 

 

 

 

우선, execute 버튼 위에 있는 두개의 box 가 같은 코드입니다.

 

 

 

 

var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++){
    lis[i].style.color='red';   

 

위 코드는 DOM 을 이용하여 li 태그의 글자 색을 red 로 바꾸는 코드이고,

 

$('li').css('color', 'red')     

 

위의 코드는 jQuery 를 이용하여 li 태그의 글자색을 red 로 바꾸는 코드입니다.

 

 

육안으로 봤을 때도 jQuery 를 이용한 코드가 훨씬 쉽고 간단해 보입니다.

 

 

 

 

var lis = document.getElementsByClassName('active');
for(var i=0; i < lis.length; i++){
    lis[i].style.color='red';   
}

 

getElementsByClassName 메소드를 이용한 코드입니다.

 

 

$('.active').css('color', 'red')

 

css를 다뤄보셨던 분들이라면 아시겠지만,

 

. 은 클래스를 나타냅니다.

 

 

 

var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';

 

getElementById 메소드를 이용한 코드입니다.

 

 

 

$('#active').css('color', 'red').css('textDecoration', 'underline');

 

 

# 은 아이디를 나타냅니다.

 

 

 

 

 

 

위의 예시가 보여주는 것은, DOM 을 이용했을 때와 jQuery 를 이용했을 때 어떤 것이

더욱 편리하고 생산성이 좋은가 - 입니다.

 

 

 

제이쿼리를 이용하면 코드의 길이 뿐만 아니라 고려해야할 요소가 줄어드는 것을 확인할 수 있습니다.