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 api1 = jQuery('.test')
api1.addClass('blue')
const api2 = api1.find('.child').addClass('red')
api1.addClass('green')
//不返回元素们，返回一个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 (selectorOrArray) {
let elements
if (typeof selectorOrArray === 'string') {
elements = document.querySelectorAll(selectorOrArray)
} else if (selectorOrArray instanceof Array) {
elements = selectorOrArray
}
//(selector)指的是接收一个选择器
//window.jQuery()是我们提供的全局函数
// console.log('你好jquery')
//然后我们要找到对应的元素（找到所有的元素）
//api 可以操作 elements
//return 一个对象， 不 return elements
return {
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
return jQuery(array)
},
//闭包：函数访问外部的变量 例子：（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++){
const element = elements[i]
element.classList.add(className)
}
//或者是
// for(let i=0;i<elements.length;i++){
// const elements = elements[i]
// elements.classList.add(className)
// }
return this//也可以 return api
}
}
return this//这里是不可以return this 这个this是window
}
