작년에 자바스크립트 할때 잠깐 공부하고 연습 조금 했던 JQuery를 다시 파보려 한다.
https://www.samsungsds.com/kr/insights/jQuery.html
라이브러리란?(library)
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
jQuery란?
엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리
Hello world - 첫번째 jQuery
🌞 사용방법
- 직접 서비스 하는 경우
https://jquery.com/download/ 에서 jquery 소스코드를 다운로드 한다.
위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.
- 구글의 자바스크립트 라이브러리를 사용하는 경우
https://developers.google.com/speed/libraries#jquery
<html>
<body>
<div class="welcome"></div>
<div class="welcome"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
</script>
</body>
</html>자바스크립트와 jQuery 비교
탭을 클릭했을 때 포커스를 변경하는 예제
👀 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>
🕵🏻♀️ 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>반응형
'Frontend > 📌 JQuery' 카테고리의 다른 글
| JQuery 정복하기 4 (탐색, animation, ajax) (0) | 2022.07.06 |
|---|---|
| JQuery 정복하기 3 (event, element, form) (0) | 2022.07.06 |
| JQuery 정복하기 2 (wrapper, 선택자, chain) (0) | 2022.07.06 |
댓글