簡單實現jQuery的一個API
阿新 • • 發佈：2018-11-01
先拋JS程式碼：
window.jquery = function (NodeOrSelector){
let nodes = {} ;
if (typeof NodeOrSelector === 'string'){
let temp = document.querySelectorAll(NodeOrSelector)
for (let i=0;i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length;
}else if(NodeOrSelector instanceof Node){
nodes = {
0:NodeOrSelector,
length:1}
}
nodes.addClass = function(classes){
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.add(classes)
}
}
nodes.setText = function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text;
}
}
return nodes;
}
window.$ = jquery;
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 新增一個 red
$div.setText('hi') // 可將所有 div 的 textContent 變為 hi
程式碼實現兩個功能，1.給標籤新增一個class屬性，2.更改標籤裡面的文字；
程式碼分析：
1.在window上生成一個jQuery的名稱空間
2. 根據判斷傳入的值的型別用不同的方法把獲取到的元素放入偽陣列nodes；
3.給nodes新增addClass屬性，這個屬性的功能是用for迴圈把獲取到的所有元素上新增統一的class屬性；// 或者傳入陣列用classes.forEach(function(){})來指定新增class；
4.setText屬性，傳入一個字串等，讓獲取元素的textContent改成傳入的文字，同樣用for迴圈來實現；// 加不同文字方法同上
5.在window上生成一個$來代表jQuery，方便操作和使用，這樣我們就做出了“jQuery的兩個功能”。