<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- http://code.jquery.com/jquery.js -->
<script src="../js/jquery.js"></script>
<script>
$(document).ready(function(){
alert("Hello Jquery!");
});
</script>
</head>
<body>
<div class="box">box</div>
<p class="box">Hello</p>
<div class="box">World</div>
<div class="status">Test & Test</div>
<script>
var _$ = function myQuery(selector){
var dom = document.querySelectorAll(selector);
var obj = {};
obj.dom = dom;
obj.color = function(color) {
for(var i=0; i<this.dom.length; i++){
this.dom[i].style.color = color;
}
return this;
}
obj.border = function(data){
for(var i=0; i<this.dom.length; i++){
this.dom[i].style.border = data;
}
return this;
}
obj.size = function(size){
for(var i=0; i<this.dom.length; i++){
this.dom[i].style.width = size['width'];
this.dom[i].style.height = size['height'];
}
return this;
}
obj.moveTo = function(move){
for(var i=0; i<this.dom.length; i++){
this.dom[i].style.position = "relative";
this.dom[i].style.transition = "left 0.1s linear";
var box = this.dom[i];
var x = this.dom[i].offsetLeft;
var step = 10;
var interval = setInterval(function(){
x += step;
// 반복
if(x >= parseInt(move['left']) || x <= 0){
step *= -1;
}
// 정지
//if(x >= parseInt(move['left'])){
// x = parseInt(move['left']);
// clearInterval(interval);
//}
box.style.left = x + "px";
}, 100);
}
return this;
}
return obj;
}
_$(".box").color("red").border("5px solid blue");
_$(".status").color("orange").border("3px solid red");
_$(".status").size({'width': '100px', 'height': '100px'}).moveTo({'left': '500px'});
</script>
</body>
</html>
