[JavaScript] jQuery 라이브러리 사용 방법

오늘은 JavaScript의 라이브러리 중에서 가장 유명한 jQuery 라이브러리를 사용하는 방법에 대해 배웠다. 

먼저, 라이브러리를 사용하는 이유는 빠른 소프트웨어 구현이다. 모든 코드를 스스로 작성 하는 것은 한계가 있기 때문이다. 

jQuery 라이브러리를 이용하면 더욱 직관적이고 쉬운 코드를 작성할 수 있다. 

 

라이브러리 jQuery 사이트에 접속하여 Download 버튼을 누른 뒤 링크를 누르면 jQuery 라이브러리를 다운 받을 수 있다. 

이떄 control + F로 'CDN' 검색하면 간편하게 다운 받을 수 있다. (Content Delivery Network)

https://jquery.com/

 

 

1. jQuery 라이브러리를 불러오는 코드 추가

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

 

 

2. jQuery를 이용한 기존 코드 수정

- $('a') : 웹 페이지에 있는 모든 <a> 태그를 jQuery로 제어

- css("  ") 

 

기존 코드 

var Links = {
    setColor: function(color){
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i<alist.length){
            alist[i].style.color= color;
            i = i+1;
        }
    }
}

 

jQuery를 이용하여 수정한 코드 

var Links = {
    setColor: function(color){
        $('a').css('color', color);
    }
}

 

 

추가로 다른 코드도 수정해보겠다. 

 

이전 코드

var Body ={
    setColor: function (color){
        document.querySelector('body').style.color = color;
    },
    setBackgroundColor:function (color){
        document.querySelector('body').style.backgroundColor = color;
    }
}

 

수정한 코드

var Body ={
    setColor: function (color){
        $('body').css('color', color);
    },
    setBackgroundColor:function (color){
        $('body').css('backgroundColor', color);
    }
}

 

더 직관적이고 수정이 편리한 코드가 됐다.