해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 제이쿼리(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<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 < 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 를 이용했을 때 어떤 것이
더욱 편리하고 생산성이 좋은가 - 입니다.
제이쿼리를 이용하면 코드의 길이 뿐만 아니라 고려해야할 요소가 줄어드는 것을 확인할 수 있습니다.
'Archive > Develop' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 기본 문법 | HTMLCollection (0) | 2021.02.07 |
|---|---|
| [ JavaScript ] 자바스크립트 기본 문법 | HTMLElement (0) | 2021.02.07 |
| [ JavaScript ] 제어 대상 찾기 - getElementById, getElementsByClassName, getElementsByTagName (0) | 2021.02.07 |
| [ JavaScript ] 자바스크립트 기본 문법 | 창(window) 제어 | 팝업 차단 (0) | 2021.02.07 |
| [ JavaScript ] 자바스크립트 기본 문법 | Navigator 객체 | 크로스 브라우저 이슈 해결 (0) | 2021.02.07 |