本文將手把手逐漸實現(xiàn)一個簡化版的 JQuery。
先來自己動手簡化選擇器
base 是一個對象，擁有兩個方法，方法名為 $价淌、$$申眼，功能分別為通過 id 和 class 來獲取元素。
var base = {
$:function(id){
return document.getElementById(id);
},
$$:function(className){
return document.getElementsByClassName(className);
}
}
//使用
base.$("id"); //返回相應(yīng)的元素對象
base.$$("class"); //返回相應(yīng)的元素對象集合
進(jìn)階蝉衣，向JQuery靠攏
聲明一個全局方法 $括尸，用于返回一個 base 對象。
var $ = function(){
return new Base();
}
function Base(){
this.$ = function(id){
return document.getElementById(id);
};
this.$$ = function(className){
return document.getElementsByClassName(className);
};
}
//使用
$().$("id"); //返回相應(yīng)的元素對象
$().$$("class"); //返回相應(yīng)的元素對象集合
加上css方法
增加 css 方法病毡，就可以通過 el.css().css() 鏈?zhǔn)秸{(diào)用的形式給元素增加樣式濒翻。
var $ = function(){
return new Base();
}
function Base(){
this.elements = [] //創(chuàng)建一個數(shù)組，來保存獲取的節(jié)點和節(jié)點數(shù)組
this.$ = function(id){
//因為每一次使用$都會新建對象啦膜，所以不需要清空有送，不會異常
this.elements.push(document.getElementById(id));
return this; //一定要返回對象，不然無法進(jìn)行連綴
};
this.$$ = function(className){
var clss = document.getElementsByClassName(className);
for(var i = 0 ;i < clss.length; i++){
this.elements.push(clss[i]);
}
return this;
};
this.css = function(attr,val){
for(var i = 0;i < this.elements.length; i++){
this.elements[i].style[attr] = val;
}
return this;
}
}
//使用
$().$("id").css("color","white").css("background","black"); //返回相應(yīng)的元素對象
$().$$("class").css("color","red").css("border","1px dotted black"); //返回相應(yīng)的元素對象集合
加上eq方法
用于遍歷元素僧家，添加一個 current 變量即可
var $ = function(){
return new Base();
}
function Base(){
this.elements = []; //創(chuàng)建一個數(shù)組雀摘，來保存獲取的節(jié)點和節(jié)點數(shù)組
this.current = -1; //用于遍歷
this.$ = function(id){
//因為每一次使用$都會新建對象，所以不需要清空八拱，不會異常
this.elements.push(document.getElementById(id));
return this; //一定要返回對象阵赠，不然無法進(jìn)行連綴
};
this.$$ = function(className){
var clss = document.getElementsByClassName(className);
for(var i = 0 ;i < clss.length; i++){
this.elements.push(clss[i]);
}
return this;
};
this.eq = function(index){
this.current = index;
return this;
}
this.css = function(attr,val){
if(this.current != -1)this.elements[this.current].style[attr] = val;
else{
for(var i = 0;i < this.elements.length; i++){
this.elements[i].style[attr] = val;
}
}
return this;
}
}
//使用
$().$("id").css("color","white").css("background","black"); //返回相應(yīng)的元素對象
$().$$("class").eq(1).css("color","red").css("border","1px dotted black"); //返回相應(yīng)的元素對象集合
通過$("str")來獲取元素
進(jìn)一步封裝 $ 函數(shù)，從而使得調(diào)用方法對標(biāo) JQuery肌稻。
$('#id').css().css()
$('.class').eq(2).css().css()
var $ = function(str){
var base = new Base();
if(str[0] == "#"){
base.$(str.substr(1,str.length - 1));
}
else if(str[0] == '.'){
base.$$(str.substr(1,str.length - 1));
}
else{
//TagName
}
return base;
}
function Base(){
this.elements = []; //創(chuàng)建一個數(shù)組清蚀，來保存獲取的節(jié)點和節(jié)點數(shù)組
this.current = -1; //用于遍歷
this.$ = function(id){
//因為每一次使用$都會新建對象，所以不需要清空爹谭，不會異常
this.elements.push(document.getElementById(id));
return this; //一定要返回對象枷邪，不然無法進(jìn)行連綴
};
this.$$ = function(className){
var clss = document.getElementsByClassName(className);
for(var i = 0 ;i < clss.length; i++){
this.elements.push(clss[i]);
}
return this;
};
this.eq = function(index){
this.current = index;
return this;
}
this.css = function(attr,val){
if(this.current != -1)this.elements[this.current].style[attr] = val;
else{
for(var i = 0;i < this.elements.length; i++){
this.elements[i].style[attr] = val;
}
}
return this;
}
}
//使用
$("#id").css("color","white").css("background","black"); //返回相應(yīng)的元素對象
$(".class").eq(1).css("color","red").css("border","1px dotted black"); //返回相應(yīng)的元素對象集合
