반응형
9. jQuery 사용하기
1) 라이브러리
자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.
2) jQuery
jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery의 효용은 후속 수업을 통해서 살펴보자.
jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. 아래는 jQuery를 로드하는 방법이다.
<!DOCTYPE html>
<html>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery( document ).ready(function( $ ) {
$('body').prepend('<h1>Hello world</h1>');
});
</script>
</body>
</html>
3) jQuery를 사용하여 제어대상을 찾기
아래는 DOM을 이용했을 때와 jQuery를 이용했을 때를 비교한 것이다. 아래 코드는 복잡하다. 실행결과만 확인하자.
<!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>
결국 jQuery에서
$(‘태그명’) $(‘.클래스명’) $(‘#id명’) 으로 선택할 수 있다는 뜻이다.
출처 : https://opentutorials.org/course/1375/6630
반응형
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 javascript 정리 - Element 객체 (0) | 2017.07.16 |
|---|---|
| 생활코딩 javascript 정리 - jQuery 객체 (0) | 2017.07.08 |
| 생활코딩 javascript 정리 - HTMLCollection (0) | 2017.07.07 |
| 생활코딩 javascript 정리 - HTMLElement (0) | 2017.07.04 |
| 생활코딩 javascript 정리 - DOM(document object model) (0) | 2017.07.01 |
| 생활코딩 javascript 정리 - 창제어(window 제어) (0) | 2017.06.28 |
| 생활코딩 javascript 정리 - Navigator 객체 (0) | 2017.06.25 |
| 생활코딩 javascript 정리 - 사용자와 커뮤니케이션하기 (0) | 2017.06.24 |