- 1.实现each 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 x = jQuery('.test')
.find('.child')
x.each((div) => console.log(div))
//
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 {
oldApi: selectorOrArray.oldApi, //放在数组身上
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 //this就是api
return jQuery(array)
},
each(fn) {
for (let i = 0; i < elements.length; i++) {
fn.call(null, elements[i], i)
}
return this
},
end() {
return this.oldApi //this是新的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++) {
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
}
可以在div里面接收一个一个函数
- 实现 parent