728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
[ 자바스크립트와 jQuery 비교 ]
예제) 탭을 클릭했을 때 포커스를 변경하는 예제
* Java script 경우
<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>
* 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>
javascript로는 몇십줄로 표현해햐 하는 코드가 jQuery로는 4-5줄로 확 줄여지고, 실행타입도 신경쓰지 않아도 되는 부분이 포인트이다.
즉, jQuery는 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 매우 유용하고 중요한 역할을 해준다.
다음글>>
2023.07.09 - [VsCode(HTML)/4. JQUERY] - JQUERY - 3. wrapper
+ 아래 링크를 참고하여 공부하였습니다.
728x90
반응형
LIST
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - 6. 이벤트 event (0) | 2023.07.09 |
|---|---|
| JQUERY - 5. Chain (0) | 2023.07.09 |
| JQUERY - 4. 선택자 (0) | 2023.07.09 |
| JQUERY - 3. wrapper (0) | 2023.07.09 |
| JQUERY - 1. jQuery란? (0) | 2023.07.09 |
