自己写个API搞懂jQuery
首先让我们来封装两个函数
- function getSibiling(node){} 同时获取一个节点的哥哥和弟弟
- function addClass(node,classes){} 为一个节点同时添加多个class
function getSibiling(node){
var number =node.parentNode.children
console.log(number)
var arrey ={length:0}
for(let i=0;
i第二个函数
function addClass(node,classes){
for(let key in classes){
var value = https://www.it610.com/article/classes[key]
console.log(value)
var method =value?'add':'remove'
node.classList[method](key)
}
}
命名空间（让别人知道这是我写的库）
window.yydom={}yydom.getSibiling =function getSibiling(node){
var number =node.parentNode.children
var arrey ={length:0}
for(let i=0;
i但是这样感觉还是有些麻烦，怎么才能
item3.getSibiling() item3.addClass()这样直接调用呢？方法一：改原型
Node.prototype.addClass = function addclass(classes){
for(let key in classes){
var value = https://www.it610.com/article/classes[key]
var method =value?'add':'remove'
this.classList[method](key)
}
}
item1.addClass({a:true,b:false,c:true})Node.prototype.getSibiling = function(){
var number =this.parentNode.childrenvar arrey ={length:0}
for(let i=0;
i
文章图片
k5tD9s.png
方法二：重新写一个node2(无侵入)
window.Node2 = function(node){
return{
//getSibling:function(){}
addClass:function(classes){
for(let key in classes){
var value = https://www.it610.com/article/classes[key]
console.log(value)
var method =value?'add':'remove'
node.classList[method](key)
}
}
}
}
var node2 = Node2(item2)
node2.addClass({a:true,b:false,c:true})
Node2就相当于是jQuery,只不过jQuery要更复杂一些，它还可以通过选择器来操作节点
window.Node2 = function(nodeOrSelector){
let node
if(typeof nodeOrSelector === 'string'){
node = document.querySelector(nodeOrSelector)
}else{
node = nodeOrSelecter
}
return{// 返回一个方法对象，里面有两个方法一个getSibling一个addClass
getSibling:function(){
var number =node.parentNode.childrenvar arrey ={length:0}
for(let i=0;
ili:nth-child(3)")
node2.addClass({red:true,b:false,c:true})
console.log(node2.getSibling())
首先先判断nodeOrSelector是选择器还是节点，然后操作dom找到这些节点，node保存这些节点，return返回一个对象
所以JQuery的实质是一个构造函数，接受一个可能是节点的参数，然后返回一个方法对象去操作这个节点
那么如果我想同时操作6个li呢？并且在这6个li上同时添加一个blue类
window.Node2 = function(nodeOrSelector){
let nodes={}
if(typeof nodeOrSelector === "string"){
let temp = document.querySelectorAll(nodeOrSelector)for(let i=0;
i {
for(let i=0;
ili')
node2.addClass(['blue'])
添加一个jQuery的api，获取文本.text()，当有参数时，就用这个text覆盖原先个text,当不给参数时认为获取元素的text文本
nodes.text=function(text){
if(text === undefined){
var texts = []
for(let i=0;
i【自己写个API搞懂jQuery】jQuery就是把node2换成jQuery，然后window.$=jQuery
window.jQuery = function(nodeOrSelector){
let nodes={}
if(typeof nodeOrSelector === "string"){
let temp = document.querySelectorAll(nodeOrSelector)for(let i=0;
i {
for(let i=0;
i 推荐阅读
- 尽力
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 别怪生活，自己作的！
- 2020-04-07vue中Axios的封装和API接口的管理
- 放下心中的偶像包袱吧
- 靈魂裡有香氣的人
- 改变自己，先从自我反思开始
- 失踪的钢笔
- 原生家庭之痛与超越
- 一个懂得和他自己灵魂沟通的人，这个人一定是正直善良的人