js實現jQuery的簡單方法和鏈式操作

本文js實現了下面jquery的幾種方法，我將它分為8個小目標

1. 實現$(".box1").click( )方法

首先，我們定第乙個小目標，就是如何一步一步去實現下方jquery**的功能。

複製**

這裡說一下哈，不會jquery的小夥伴也別慌，只要你有一點點js基礎，花個10分鐘到 jquery教程簡單了解一下即可。

$(".box1").click(()=>)
複製**

好了，言歸正傳，我們來分析上面jquery的**。

第乙個小目標就是自己封裝js來實現上面**的功能。我們分三步走戰略來實現。

js實現 $(".box1")

實現 $(".box1").click()

實現 $(".box1").click( ( ) => )

第一步就是先用js實現 $(".box1")，對吧

// 實現$(".box1")
class jquery 
}function $(arg) 
// 實現$(".box1")
let res = $(".box1");
console.log(res);
複製**

這樣是不是就通過構建()方法並返回jquery例項，實現了(".box1")呢。

那好，接下來我們進行第二步就是實現 $(".box1").click()。相信大家也看出來了，就是在jquery類中多了乙個click方法。

// 實現$(".box1").click()
class jquery 
click() 
}function $(arg) 
// 實現$(".box1").click()
let res = $(".box1").click();
console.log(res);
複製**

接下來，我們進行第三步就是實現 $(".box1").click( ( ) => )。

// 實現$(".box1").click(() => )
class jquery 
click(fn) 
}function $(arg) 
//實現$(".box1").click(() => )
$(".box1").click(() => );
複製**

到此為止，我們實現了第乙個小目標，大家是不是覺得簡單呢，ok，接下來我們繼續第二個小目標。

2. 實現$("div").click( )方法

第二個小目標也不難，就是考慮有多個div元素需要繫結click事件，我們用selectselectorall來獲取元素的話，如何處理，其實也挺簡單，就是在click方法中多出乙個迴圈，去獲取nodelist中的值。我直接上**了，大家試一試就知道啦。

複製**

好了，完成兩個小目標了，相信你已經有成就感了。

3. 考慮$( )中引數的三種情況

接下來第三個小目標我們來考慮一下$( )中引數不同的情況，我先將三種情況列出來。（可能還有其他情況，這裡就不說了）

1.情況一：就是$( )引數為字串

$(".box1")
複製**

2.情況二：就是$( )引數為函式的情況。

//引數為函式
$(function() )
複製**

3.情況三：就是$( )引數為nodelist物件或selectselect獲得的節點

// 情況三
$(document.queryselectorall("div")).click(()=>)
$(document.queryselector("div")).click(()=>)
複製**

接下來第三個小目標是手寫函式來實現三種情況。首先我們增加addeles方法，修改上面的click方法

addeles(eles)
this.length = eles.length;
}// 實現$(".box1").click(() => ) 
click(fn) 
}複製**

接下來實現三種不同引數的處理方法

constructor(arg) else if(typeof arg === 'function') else else }}
複製**

4. 實現jq中的on方法

接下來實現第四個小目標實現jq的on方法

// on方法
on(eventname, fn) }}
複製**

再測試下ok不

// on方法
$("div").on("mouseover mousedown",function())
複製**

5. 實現鏈式操作

接下來實現第五個小目標實現jq的鏈式操作

劃重點，在on和click中新增return this即可實現鏈式

//鏈式操作
//劃重點，在on和click中新增return this即可實現鏈式
// click方法
click(fn) 
return this; 
// console.log(this); 
}// on方法
on(eventname, fn) 
}return this;
}複製**

6. 實現jq中的eq方法

接下來實現第六個小目標實現jq中的eq方法

//eq方法
eq(index) 
複製**

執行函式

自動建立乙個空物件

將空物件的原型指向建構函式的prototype屬性

將空物件和函式內部this繫結

如果renturn後跟著物件，返回這個物件。沒跟的話就自動返回this物件

7. 實現jq中的end方法

實現第七個小目標實現jq中的end方法。要實現這個功能，除了新增end( )方法，我們還得在建構函式上實現，constructor新增引數root，新增屬性prevobject，並在eq方法這種新增引數this。

constructor(arg, root) else 
//eq方法
eq(index) 
//end方法
end() 
複製**

8. 實現jq中的css方法

在jq中css可以獲採樣式，設定乙個樣式或多個樣式

// 情況一 :獲採樣式  （只去獲取第乙個元素）
let res = $("div").css("background");
console.log(res);
// 情況二 （設定樣式）
$("div").css("background","yellow");
// // 情況三 （設定多個樣式）
$("div").css();
複製**

接下來實現css方法

//css方法
css(...args) else }}
}else 
}} //css方法
css(...args) else }}
}else }}
複製**

增加cssnumber方法來確定不用加px的屬性名

//css方法用
$.cssnumber = 
複製**

最後獻上完整**，如果大哥們覺的不錯，給個贊唄

點選

js實現jQuery的簡單方法和鏈式操作

實現 SOA 安全的簡單方法

定位的系統實現簡單方法

通過簡單方法實現spring boot web專案

js實現jQuery的簡單方法和鏈式操作

實現 SOA 安全的簡單方法

定位的系統實現簡單方法

通過簡單方法實現spring boot web專案

相關推薦