jQuery는 코드에 for문이 많다

alert($("input").attr("type"));
alert($("input").attr("id"));
alert($("input").attr("value"));
alert($("input").attr("name"));
//for문이 총 8번이나 돌아야함

var $var1 = $("input"); //jQuery객체를 가리키는 변수임을 $로 표시
//요즘은 javascript와 jQuery(브라우저 호환성 부분)를 섞어서 씀 ->
alert(var1.attr("type"));
alert(var1.attr("id"));
alert(var1.attr("value"));
alert(var1.attr("name"));
//객체를 변수에 담아서 사용해야 전력낭비를 줄일 수 있다.
//jQuery 사용시 2번이상 사용되는 jQuery객체(요소를 가지는 컨테이너)는 변수를 받는다.

//javascript객체를 jQuery객체로 바꿀 때
//Dom element를 $()로 묶어주면 바로 jQuery객체로 사용할 수 있음.
//jQuery는 사양길에 접어들었음. 프론트 프레임워크(vanila, vue, react, angular)
var v_txt = document.querySelectorAll("#text");
$(v_txt).html();

$를 통해 자바스크립트 객체 가져오기

//즉각실행함수
(function(){
    var $ = function(p_selector){
        return new Hr(p_selector);         // 요기서 쌩성해서 돌려줌
    }

    var Hr=function(p_selector){
				this.prev = p_selector; // 넘어온 선택자를 저장해둠(선택자만)
        var elems = document.querySelectorAll(p_selector);
        //선택된 것들을 생성되는 객체의 속성으로 옮겨담기, 그래야 가지고 다니니깡
        this.length = elems.length; 
        for(var i=0; i<this.length; i++){
            this[i] = elems[i];
        }
        return this;  // 명시적 표현 (이 function은 생성자로 사용되고 있음)
    }
    // Hr.prototype  요놈을 밖에서 접근할수 있게 해줘야 모두가 편해짐

    window.$=$;  // 전역변수 테코닉 활용 전역과 지역을 참조로 연껼
    $.fn= Hr.prototype;  // 전역변수 $의 fn 속성명으로 Hr.prototype에 접근할 수 있음
})();

$.eq()

//jQuery에서 요렇게 메소드를 추가하는 것을 Plugin을 개발한다라고 과장해서 부름
$.fn.eq = function(p_index){
    return this[p_index];
}

alert($("div").eq(1));

//메소드 체이닝을 사용하려면
$.fn.eq = function(p_index){
    this[0] = this[p_index]; // 선택된걸 0번으로 옮기고

    for(var i = 1; i < this.length; i++){
        delete this[i]; // 나머진 지워버림
    }
    this.length = 1; // 선택된게 1개밖에 없으니 강제로 1
    return this;// 메소드 체이닝
}
alert($("div").eq(1).html());

$.on()

//읽기가 아니면 for문 들어감
$.fn.on = function(p_eventName,p_callback){
    for(var i=0;i<this.length; i++){
        this[i].addEventListener(p_eventName,p_callback);
    }
    return this; //메소드 체이닝
}

$("div").on("click",function(){
	alert(this.innerHTML);
});

$.end()

$.fn.end = function(){//최초 선택자로 돌아가는 메소드
    return $(this.prev); // 새로 생성해서 리턴해줌
}

$.html()

// html 메소드 만들기 : 읽기, 전부쓰기, 일부쓰기 (보통 요따위 패턴으로 구성)
$.fn.html = function(p_arg){  // innerHTML 속성을 편하게 다루는 메소드
    if(!p_arg){  // 매개변수가 값이 넘어오지 않았을 때
        return this[0].innerHTML;   // 읽기는 무조건 첫번째 요소(element)의 값
    }

    if(typeof(p_arg) == "string"){  // 매개변수로 문자열이 넘어 왔을 때
        for(var i=0; i<this.length; i++){
            this[i].innerHTML = p_arg;      
        }
        return this; //메소드에 사용된 객체를 리턴해주면 메소드 체이닝을 사용할 수 있음
    }
    
    //jQuery의 콜백부분은 거의 대부분 요따구로 되어있음(Good Idea but Performance Problem)
    if(typeof(p_arg) == "function"){ 
        for(var i=0; i<this.length; i++){
            this[i].innerHTML = p_arg.call(this[i],i,this[i].innerHTML); // 인덱스와 원래가지고 있는 innerHTML을 넘김
        } // call, apply, bind : this를 내 맘대로 컨트롤
        return this;
    }
}

$.attr()

var attr = "name";
alert(document.querySelector("#id_txt").name);
alert(document.querySelector("#id_txt")[attr]); // 배열식 접근법
// 배열식 접근법을 사용하면 변수명으로 해당 속성을 접근할 수 있다.

// attr 메소드 만들기
$.fn.attr = function(p_attr, p_opt){
    //읽기
    if(typeof(p_attr) == "string" && typeof(p_opt) == "undefined"){
        return this[0][p_attr];//배열식 접근법
    }

    // || 하고 && 잘 쓰는 법 : ||는 앞에 true일 가능성이 높은것, &&는 앞에 false일 가능성이 높은것
    //전부 쓰기
    if(typeof(p_attr) == "string" && p_opt){ // p_opt의 값이 있다면
        for(var i=0; i<this.length; i++){
            this[i][p_attr] = p_opt; // 속성과 벨류 세팅
        }
        return this; // 메소드 체이닝
    }

    //골라서(조건부) 쓰기
    if(typeof(p_attr) == "string" && typeof(p_opt) == "function"){ // p_opt의 값이 있다면
        for(var i=0; i<this.length; i++){
            this[i][p_attr] = p_opt,call(this[i],i, this[i][p_attr]);
        }
        return this; // 메소드 체이닝
    }
}

//call back 함수
$("input").attr("type", function(p_index, p_val){
    if(p_index == 1){  
        return "checkbox";
    }
    return p_val; // 원래대로
})

$.val()

//value 속성을 제어하는 val()메소드
$.fn.val = function(p_arg){
    if(!p_arg){  // 매개변수가 값이 넘어오지 않았을 때
        return this[0].value;   // 읽기는 무조건 첫번째 요소(element)의 값
    }

    if(typeof(p_arg) == "string"){  // 매개변수로 문자열이 넘어 왔을 때
        for(var i=0; i<this.length; i++){
            this[i].value = p_arg;      
        }
        return this; //메소드에 사용된 객체를 리턴해주면 메소드 체이닝을 사용할 수 있음
    }

    //jQuery의 콜백부분은 거의 대부분 요따구로 되어있음(Good Idea but Performance Problem)
    if(typeof(p_arg) == "function"){ 
        for(var i=0; i<this.length; i++){
            this[i].value = p_arg.call(this[i],i,this[i].value); // 인덱스와 원래가지고 있는 innerHTML을 넘김
        } // call, apply, bind : this를 내 맘대로 컨트롤
        return this;
    }
}

$.css()