์๋
์ ์๋ฐ์คํฌ๋ฆฝํธ ํ ๋ ์ ๊น ๊ณต๋ถํ๊ณ ์ฐ์ต ์กฐ๊ธ ํ๋ 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>๋ฐ์ํ
'๐ค Web > ๐ JQuery' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| JQuery ์ ๋ณตํ๊ธฐ 4 (ํ์, animation, ajax) (1) | 2022.07.06 |
|---|---|
| JQuery ์ ๋ณตํ๊ธฐ 3 (event, element, form) (1) | 2022.07.06 |
| JQuery ์ ๋ณตํ๊ธฐ 2 (wrapper, ์ ํ์, chain) (0) | 2022.07.06 |
๋๊ธ