Javascript와 jQuery 비교
예제. 탭을 클릭했을 때 포커스를 변경하는 예제
JavaScript
<html>
<head>
<script type="text/javascript">
function addEvent(target, eventType,eventHandler, useCapture) {
if (target.addEventListener) { // W3C DOM
//target:첫번째 인자,window window.addEventListener가 존재하느냐
target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
} else if (target.attachEvent) { // IE DOM
//window가 targetattach가 있는지 확인
var r = target.attachEvent("on"+eventType, eventHandler);
}
}//브라우저가 무엇인지, 브라우저에 따라 다름; 크로스 브라우저 이슈
function clickHandler(event) {//system이 event라는 인자, 객체 전달
//현재 사용자가 클릭한 엘리먼트의 값이 들어있음
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)//node타입: 엘리멘트의 속성,
continue;
child.className = '';
//child: li엘리먼트들. 클래스네임에 공백을 대입. 클래스를 해제
}
event.target.className = 'selected';
}
addEvent(window, 'load', function(eventObj) {//제일먼저 실행되는 함수
//window객체는 브라우저 자체를 의미함. window객체가 load를 발생시켰을때,
//웹페이지에 대한 로드가 끝났을때 function(eventObj)을 system이 호출함
//시스템이 function을 실행시킴
var nav = document.getElementById('navigation');//인자로 navigation전달
//id가 nav인 변수에 navigation을 할당. nav에는 ul이 담겨있음
for(var i = 0; i < nav.childNodes.length; i++) {
//nav변수에 childNode라는속성이 있음, length : 자식이 몇개있는지.
var child = nav.childNodes[i];
//child라는 변수 선언. childNodes라는 배열안에
if(child.nodeType==3)
//nodeType:특정한 엘리먼트의 성격. 3번: 공백
continue;//skip
addEvent(child, 'click', clickHandler);
//child:li변수
}
})
</script>
<style type="text/css">
#navigation li {
list-style:none;//li앞에 검은색 점이 없어짐
float:left;//일렬로
padding:5px;
}
#navigation {
cursor:pointer;
}
#navigation .selected {//클래스명이 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>
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() {
//id값이 navigation인것 중에 li 엘리먼트를 가져옴. live라는 제이쿼리가 제공하는 일종의 이벤트api를 실행
// click을 받았을때 function을 실행했을 때 아래 호출
$('#navigation li').removeClass('selected');
//selected라는 클래스 네임 삭제. 암시적으로 for문 돌리고있음
$(this).addClass('selected');
//이벤트 핸들러가 실행됬을때 사용자가 현재 클릭한 엘리먼트=this
//$로 감싸줬을때 제이쿼리 api사용가능. this있는 값의 클래스 네임을 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>
'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 6강. Event (0) | 2021.01.24 |
|---|---|
| [생활코딩] 5강. Chain & Traversing (0) | 2021.01.24 |
| [생활코딩] 4강. 선택자 (0) | 2021.01.24 |
| [생활코딩] 3강. wrapper (0) | 2021.01.24 |
| [생활코딩] 1강. jQuery란? (0) | 2021.01.24 |