手写jQuery

window.jQuery = function (selectorOrArray) {//selectorOrArray是接受的选择器或者数组
    let elements
    if(typeof selectorOrArray === 'string'){
        elements = document.querySelectorAll(selectorOrArray)
    }else if(selectorOrArray instanceof Array){
        elements = selectorOrArray
    }
    
    //api可以
    // const api = {//声明的是一个对象
    //       //闭包:函数访问外部变量
    //     addClass: function(className){//可以简写成addClass(className),所谓键值对
    //         for(let i=0;i<elements.length;i++){
    //             elements[i].classList.add(className)
    //         }   
    //         //return api 
    //         return this  //一个函数的第一个参数就是函数前面的那个东西,也是this
    //     }
    // }
    // return api


    //上面内容表示如下代码逻辑
    return {//声明的是一个对象
        oldApi: selectorOrArray.oldApi,
        addClass(className) {
            for (let i = 0; i < elements.length; i++) {
                elements[i].classList.add(className)
            }
            //return api 
            return this  //一个函数的第一个参数就是函数前面的那个东西,也是this
        },
        //find是找到#xxx里的.red元素
        find(selector) {
            let array = []
            for (let i = 0; i < elements.length; i++) {
                const elements2 = Array.from(elements[i].querySelectorAll(selector)) 
                array = array.concat(elements2)
            }
            // const newApi = jQuery(array)
            // return newApi     //返回新的对象,防止污染之前的对象
            array.oldApi = this
            return jQuery(array)
        },

        //结束对当前选择器的操作,返回上一个选择器
        end(){
            return this.oldApi
        },

        //用于遍历当前elements中的所有元素
        each(fn){
            for(let i = 0; i < elements.length; i++){
                fn.call(null,elements[i],i)
            }
            return this
        },
        //获取爸爸
        parent(){
            const array = []
            this.each((node)=>{
                //indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
                if(array.indexOf(node.parentNode) === -1){
                    array.push(node.parentNode)
                }
            })
            return jQuery(array)
        },

        //获取儿子
        children(){
            const array = []
            this.each((node)=>{
                if(array.indexOf(node.parentNode) === -1){
                    //将node.children中的每一项分别作为第0项,第1项。。。。
                    array.push(...node.children)
                }
            })
            return jQuery(array)
        },
        //打印出当前的elements
        print(){
            console.log(elements)
        }
    }
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值