自己實現(xiàn)一個簡單的 jQuery API
1.需求
如下的代碼結(jié)構(gòu)：
<body>
<ul>
<li>第1個</li>
<li>第2個</li>
<li>第3個</li>
<li>第4個</li>
<li>第5個</li>
</ul>
</body>
需求為：
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi
2.思路分析
思路：
- 寫一個方法 纸俭，找到這個節(jié)點
- 寫一個
addClass方法，實現(xiàn)給找到的節(jié)點 添加樣式 - 寫一個
setText方法右莱，實現(xiàn)給找到的節(jié)點 設(shè)置內(nèi)容 - 對以上方法進行封裝
3.具體方法
3.1 findNodesOrSelector 方法，找到這個節(jié)點
為了找到這個節(jié)點，傳入的參數(shù)可能是一個id即寡，也有可能是一個字符串即
ul>li>span>a等修然，所以要分情況分析
function findNodesOrSelector(nodeOrSelector){
let nodes ={}
//判斷傳進來的參數(shù)是否為 節(jié)點還是字符串
if(typeof nodeOrSelector ==='string' ){ //當傳入得到參數(shù)為字符串時
let temp = document.querySelectorAll(nodeOrSelector) //偽數(shù)組
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
} else if(nodeOrSelector instanceof Node){ //當傳入得到參數(shù)為節(jié)點時
nodes = {
0:nodeOrSelector,
length:1
}
}
return nodes
}
3.2 addClass 方法笛钝，給找到的節(jié)點 添加樣式
因為給找到的節(jié)點添加樣式，所以要傳入一個參數(shù)愕宋；
同時玻靡，對已經(jīng)找到的節(jié)點一般情況下不是只有一個，那么我們添加樣式的時候也是不止給一個節(jié)點添加樣式掏婶，因此啃奴，需要對每個節(jié)點分別添加，就要依次對節(jié)點進行遍歷雄妥。
function addClass(classes){
classes.forEach((value)=>{ //使用箭頭函數(shù)最蕾，第一個參數(shù)是this即classes
for(let i=0;i<nodes.length;i++){
nodes[i].addClassList.add(value)
}
})
}
3.3 setText 方法依溯，給找到的節(jié)點 設(shè)置內(nèi)容
和上面的方法一樣，先找到需要改變的節(jié)點瘟则，對它依次遍歷后再設(shè)置其內(nèi)容
同時黎炉，傳入一個參數(shù)，即需要改變之后的參數(shù)
function setText(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContext = text
}
}
3.4 getText 方法醋拧，獲得節(jié)點內(nèi)的文本內(nèi)容
function getText(){
var texts = []
for(let i=0;i<texts.length;i++){
texts.push(nodes[i].textContext)
}
return texts
}
}
4.拓展封裝
4.1第一次封裝：對以上方法進行封裝
window.jQuery = function(nodeOrSelector){
let nodes={}
//判斷傳進來的參數(shù)是否為 節(jié)點還是字符串
if(typeof nodeOrSelector ==='string' ){
let temp = document.querySelectorAll(nodeOrSelector) //偽數(shù)組
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
} else if(nodeOrSelector instanceof Node){ //當傳入得到參數(shù)為節(jié)點時
nodes = {
0:nodeOrSelector,
length:1
}
}
nodes.addClass = function (classes){
classes.forEach((value)=>{
for(let i=0;i < nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
nodes.getText = function(){
var texts = []
for(let i=0;i<texts.length;i++){
texts.push(nodes[i].textContext)
}
return texts
}
nodes.setText = function(text){
for(let i =0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes
}
但是通常情況下慷嗜，在jQuery中不喜歡使用get和set方法，那么丹壕，還要進行第二次封裝庆械；
即：
當我不傳參數(shù)的時候默認我是要獲取節(jié)點內(nèi)容當我傳入?yún)?shù)時，說明我要給節(jié)點設(shè)置內(nèi)容
4.2 對get和set方法進行封裝
function text(text){
if(text === undefined){
var texts = []
for(let i=0;i<texts.length;i++){
texts.push(nodes[i].textContext)
}else{
for(let i =0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
4.3 第三次封裝
window.$ = function(nodeOrSelector){
let nodes={}
//判斷傳進來的參數(shù)是否為 節(jié)點還是字符串
if(typeof nodeOrSelector ==='string' ){
let temp = document.querySelectorAll(nodeOrSelector) //偽數(shù)組
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
} else if(nodeOrSelector instanceof Node){ //類型校驗：判斷是否為節(jié)點
nodes = {
0:nodeOrSelector,
length:1
}
}
nodes.addClass = function (classes){
classes.forEach((value)=>{
for(let i=0;i < nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
return nodes
}
nodes.text = function(text){
if(text === undefined){
var texts = []
for(let i=0;i<texts.length;i++){
texts.push(nodes[i].textContext)
}
}else{
for(let i =0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
此時菌赖，我們就可以直接使用 $('xxx') 進行訪問啦...
