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()