实现 each

177 阅读1分钟
  • 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
}

image.png

可以在div里面接收一个一个函数 image.png image.png

  • 实现 parent