實現一個 jQuery 的 API

最終效果，實現如下api調用：

var $div = $(div)$div.addClass(red) // 可將所有 div 的 class 添加一個 red$div.setText(hi) // 可將所有 div 的 textContent 變為 hi

要實現上述功能，需要先製作一個jQuery的API庫。

window.jQuery ={}

jQuery中要有兩個方法addClass和setText

addClass : function(){},setText :function(){}

接下來就是寫出這兩個方法了，如下

nodes.addClass = function(classes){ for (let i=0; i<nodes.length; i++){ nodes[i].classList.add(classes) } } //nodes是一個數組，給這個數組中所有元素加上classes類 nodes.setText = function(text) { for(let i=0;i<nodes.length;i++){ nodes[i].textContent =text } }//nodes是一個數組，將這個數組中所有元素的內容替換成text

nodes數組要如何獲取呢？取決於目標元素是一個還是多個，所以我們可以做一個判斷，若目標元素是字元串，則nodes返回的是符合要求的標籤組成的數組，如果是節點，為保持統一我們也將它處理成數組，因此有了如下的判斷：

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和setText的nodes。

再用window.$來表示jQuery就大功告成了，最後代碼：

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.$ = jQueryvar $div = $(div)$div.addClass(red) // 可將所有 div 的 class 添加一個 red$div.setText(hi) // 可將所有 div 的 textContent 變為 hi

推薦閱讀：