jQuery 따라해서 만들어보기
Core.html
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<div class="roze1">111</div>
<div class="roze">222</div>
<div class="roze1">333</div>
<div class="roze">444</div>
<div class="roze1">555</div>
<input type="text" id="id_jyj" value="장유진">
</body>
<script>
//즉각실행함수, 선언문법이냐 표현식이냐
// () 아닌 +도 가능하다.
// 메모리 절약 또는 중요한 코드를 묶어서 지키려고 할 때
// (function(p_arg){
// alert("난 그냥 실행됨" + p_arg);
// })("KGB");
// - 전체를 ()로 묶어주면 표현식으로 인식, 바로 실행됨
/* +function(){
alert("난 그냥 실행됨");
}()
*/
//둘을 즉각실행함수로 묶었다. - 밖에서 직접 접근할 수 없음.
(function(){
// 코딩양(new를 생략가능하게)을 줄여주기 위해서 함수 선언
var $ = function(p_selector){
return new MyDOM(p_selector);
}
// 클래스로 사용하려고 만듦 (클래스나 함수로 사용하는데, 이번경우는 클래스)
var MyDOM = function(p_selector){
var v_elements = document.querySelectorAll(p_selector);
this.length = v_elements.length;
for(var i=0; i<v_elements.length; i++){
this[i] = v_elements[i];
}
return this; // 명시적 표현 없어도 됨
}
MyDOM.prototype.메소드명 = function(){
}
window.$=$;
//window.$(전역변수)=$(지역변수); 두 개가 가리키는게 같아진다.(참조타입이기 때문)
$.fn=MyDOM.prototype;
// 누구나 메소드를 추가 확장을 편하게 하기위해 밖으로 꺼내줌
// 실제 jQuery는 $.fn을 이용해서 플러그인 제작을 가능토록 함
})();
$.fn.eq = function(p_index){
//index 0번 속성에만 값이 있어야 함
this[0] = this[p_index]; //남겨야 되는 걸 0번으로 옮김!
for(var i=1; i<this.length; i++){
delete this[i];
}
// if(i != p_index){ //자기 자신(this)만 남겨놓고 지우기
// delete this[i]; //속성 지우기
// }
// if(i==p_index){
// this[0] = p_index;
// }
// for(var i=0; i<this.length; i++){
// }
this.length=1; // 1개만 return 한다.
return this; // 메소드 체이닝을 위함
}
$.fn.each = function(p_fn){
for(var i=0; i<this.length; i++){
p_fn(i,this[i]);
// p_fn(index, element)
}
return this; //메소드 체이닝을 위함!
}
//자바스크립트에서는 overloading이 없음
$.fn.html = function(p_arg){
if(typeof(p_arg)=="undefined"){// 매개변수 type을 확인해야 함
return this[0].innerHTML; // 선택된 것 중 첫번째 innerHTML return
};
if(typeof(p_arg)=="string"){// 매개변수 type을 확인해야 함
for(var i=0; i<this.length; i++){
this[i].innerHTML = p_arg;
}
return this; // 메소드 체인닝
};
if(typeof(p_arg)=="function"){// 매개변수 type을 확인해야 함
for(var i=0; i<this.length; i++){
this[i].innerHTML = p_arg.call(this[i],i,this[i].innerHTML); //item각각을 불러올 수 있다.
}
return this; // 메소드 체인닝
};
}
// alert($(".roze").html()); //공백 - undefined
// $(".roze").html("<h3>안녕</h3>"); //문자열
$(".roze").html(function(p_inx,p_curHTML){
console.log(this);
if(p_inx==0){
return "<h1>퍼미션 투 댄스</h1>";
}
return p_curHTML;
}); // 콜백함수를 넘겼을 때
// $(".roze").each(function(p_index, p_item){
// // console.log(p_index,p_item);
// //들어있는 값을 바꾸기
// //1. index번호로
// // if(p_index==0){
// // p_item.innerHTML="<h1>메롱</h1>";
// // }
// //2. 값으로
// if(p_item.innerHTML=="444"){
// p_item.innerHTML="<h1>메롱</h1>";
// }
// }).each(function(p_inx,p_im){
// if(p_inx==1){
// p_im.innerHTML = "<h2>메소드 체이닝</h2>";
// }
// }).eq(0)[0].innerHTML="<h1>명절에 왜 이렇게 어려운 걸...</h1>";
// var v_obj = {}
// v_obj.aaa = "aaa";
// v_obj.bbb = "bbb";
// console.log(v_obj);
// delete v_obj.bbb; // 속성을 지울 때 delete를 사용
// console.log(v_obj);
//jQuery는 메세드 체이닝(여러개를 연속해서 쓰는 것)을 지원하지만, 우리가 만든 jQuery예제는 제공안함.
// console.log($(".roze").each(1).eq(0));
// console.log($(".roze").eq(1));
// console.log($(".roze").eq(2));
// var v_aaa = new MyDOM(".roze1");
var v_aaa = $("#id_jyj");
// console.log(v_aaa[0].value); // 눈으로 확인
</script>
포커스.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
width:50vw;
height: 50vh;
background-color: lightpink;
}
</style>
<body>
<!--
tabindex="0" focus를 받을 수 있게 해줌
탭의 순서
tabindex="-1" 직접 마우스로 focus를 주지 않으면 focus가 안감
그외는 순서대로 입력작업이 많은 프로그램에 사용
-->
<input type="text" tabindex="1" name="" value="흥"><br>
<input type="text" tabindex="-1" name="" value="ㅇ"><br>
<input type="text" tabindex="5" name="" value="ㄴ"><br>
<input type="text" tabindex="2" name="" value="빨리"><br>
<input type="text" tabindex="4" name="" value="끝내"><br>
<div class="wrapper" tabindex="0" contenteditable="">이것은 내용</div>
<script>
var v_wrapper = document.querySelector(".wrapper");
/*
v_wrapper.addEventListener("keydown", function(){
alert(event.keyCode);
});
*/
</script>
<!-- div는 포커스를 못받는다. 그래서 tabindex로 받아줘야한다.-->
</body>
</html>