알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
javascript vs JQuery 본문
javascript vs JQuery
해당 강의를 보기 전에 javascript를 알고 보는것이 좋습니다.
먼저 javascript 예제 코드 입니다.
<html>
<head>
<script type="text/javascript">
function addEvent(target, eventType,eventHandler, useCapture) {
if (target.addEventListener) { // W3C DOM
target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
} else if (target.attachEvent) { // IE DOM
var r = target.attachEvent("on"+eventType, eventHandler);
}
}
function clickHandler(event) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
child.className = '';
}
event.target.className = 'selected';
}
addEvent(window, 'load', function(eventObj) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
addEvent(child, 'click', clickHandler);
}
})
</script>
<style type="text/css">
#navigation li {
list-style:none;
float:left;
padding:5px;
}
#navigation {
cursor:pointer;
}
#navigation .selected {
background-color:red;
color:white;
}
</style>
</head>
<body>
<ul id="navigation">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li class="selected">jQuery</li>
<li>PHP</li>
<li>mysql</li>
</ul>
</body>
</html>위 샘플 코드가 많으니 분석을 해보도록 하겠습니다.
<style type="text/css">
#navigation li {
list-style:none;
float:left;
padding:5px;
}
#navigation {
cursor:pointer;
}
#navigation .selected {
background-color:red;
color:white;
}
</style>
</head>
<body>
<ul id="navigation">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li class="selected">jQuery</li>
<li>PHP</li>
<li>mysql</li>
</ul>
</body>이코드만 보면 css 는 select 라는 이름의 클래스를 background-color:red;color:white; 으로 만들어 주는 군요.
function addEvent(target, eventType,eventHandler, useCapture) {
if (target.addEventListener) { // W3C DOM
target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
} else if (target.attachEvent) { // IE DOM
var r = target.attachEvent("on"+eventType, eventHandler);
}
}
addEvent(window, 'load', function(eventObj) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
addEvent(child, 'click', clickHandler);
}
})
function addEvent 는 브라우져 호환성으로 인해 각 브라우저에 맞게 이벤트를 주기 위해서 사용 됩니다.
addEvent을 사용 하여 브라우저가 load 가 완료 될때 이벤트로 function(eventObj) 함수를 실행합니다.
function(eventObj) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
addEvent(child, 'click', clickHandler);
}
}위의 함수를 파라메터로 주어 이벤트로 실행 시키게 합니다.
실행 시키는 함수 안에서는
var nav = document.getElementById('navigation');
엘리먼트를 선택하고 nav객체 넣고 그 하위 객체들에게 addEvent함수를 써서 click 시 이벤트 함수를 넘겨 줍니다.
function clickHandler(event) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
child.className = '';
}
event.target.className = 'selected';
}
클릭시 실행 되는 함수로 엘레먼트가 선택 될때 id = navigation의 하위 자식들을 모두 child.className = '' 을 만들고
선택된 자신만 event.target.className = 'selected'; 가 되어 css 부분의
#navigation .selected {
background-color:red;
color:white;
}
해당 코드로 인해 빨간색 배경이 글자가 하얀색이 되는 코드 입니다.
위에서 child.nodeType==3 은 어떤 브라우저들 공백이나 문자들 또한 자식 객체로 잡아버리는 경우가 있습니다.
그럴때를 대비해서 그런 객체는 continue 로 넘깁니다.
JQuery 예제 코드 입니다.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('#navigation li').live('click', function() {
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
})
</script>
<style type="text/css">
#navigation li {
list-style:none;
float:left;
padding:5px;
}
#navigation {
cursor:pointer;
}
#navigation .selected {
background-color:red;
color:white;
}
</style>
</head>
<body>
<ul id="navigation">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li class="selected">jQuery</li>
<li>PHP</li>
<li>mysql</li>
</ul>
</body>
</html>
분석을 해보겠습니다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('#navigation li').live('click', function() {
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
})
</script>
이부분만 다르고 겨우4줄 코드로 바뀌었습니다.
$('#navigation li') 는 id가 navigation 의 부분에서 tag가 li 녀석들을 선택합니다. css 선택자 문법으로 사용합니다.
live 는 JQuery 에서 이벤트를 사용할수 있게 지원되는 라이브러리 함수 입니다. API 라고 합니다.
$('#navigation li').removeClass('selected'); 클래스 이름들을 지우고
$(this).addClass('selected'); 현재 선택한 엘리먼트 에게만 class 이름을 'selected' 라고 해줍니다.
JQuery 에서 이벤트 함수에 넘겨준 함수에서는 선택된 엘리먼트를 말합니다.
'Web > JQuery' 카테고리의 다른 글
| [jQuery]엘리먼트 제어 (0) | 2017.08.23 |
|---|---|
| [javascript,jQuery] 이벤트란? (0) | 2017.08.23 |
| [jQuery] Chain이란? (0) | 2017.08.23 |
| JQuery 선택자 (0) | 2017.08.22 |
| jQuery란? (0) | 2017.08.22 |
