实现 find 函数index.html main.js jQuery.js实现 find 函数实现 find 函数实现

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写jquery</title>
</head>

<body>
    <div class="test">你好1
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
    </div>
    <div class="test">你好2
        <div class="child">child1</div>
        <div class="child">child2</div>

    </div>
    <div class="test">你好3
        <div class="child">child1</div>
    </div>
    <script src="jquery.js"></script>
    <script src="main.js"></script>
</body>

</html>

main.js

const x1 = jQuery('.test').find('.child')
console.log(x1)
//不返回元素们，返回一个api对象，我们可以拿到这个api
//这个api可以提供什么呢
//api.addClass('red')遍历刚才所有获取的元素率，添加.red的元素
// api.addClass('red')
// api.addClass('blue')
// api.addClass('green')//链式操作
//链式操作//你用api调用了一个函数，这个函数返回了前面那个东西，于是可以继续再后面添加，return那个对象

//因为目前的api只用了一次，所以其实可以省略
//    jQuery('.test')
//     .addClass('red')
//     .addClass('blue')//链式操作
//     .addClass('green')//链式操作

//所谓高级的代码只是把那些过程省略，删掉了无用的代码


// obj.fn(p1)//函数里的this就是obj
// obj.fn.call(obj,p1)

jQuery.js

window.jQuery = function(selector){//(selector)指的是接收一个选择器
    //window.jQuery()是我们提供的全局函数
//    console.log('你好jquery')
    const elements = document.querySelectorAll(selector)
   //然后我们要找到对应的元素（找到所有的元素）
   //api 可以操作 elements
   //return 一个对象， 不 return  elements
   const api = {
       //闭包：函数访问外部的变量  例子：（elements）就是被访问的外部的变量
       addClass(className) {  // 相当于 "addClass" :function(){console.log(elements)}
        //最新的语法ES6把function去掉  addClass() {console.log(elements)}

        //这个函数可以在elements里面添加一些东西
        //我们需要在给每个element添加一个className
         //elements是个数组，所以我们要遍历数组
           for(let i=0;i<elements.length;i++){
               elements[i].classList.add(className)
           }
        //或者是
        // for(let i=0;i<elements.length;i++){
        //     const elements = elements[i]
        //     elements.classList.add(className)
        // }
           return this//也可以 return api
       },
       find(selector){
           let array = []
           for (let i = 0; i < elements.length; i++){
               const elements2 =  Array.from( elements[i].querySelectorAll(selector))
               array = array.concat(elements2)
           }
           return array
       }
   }
   return api //这里是不可以return this 这个this是window
}