模仿实现jQuery中的选择器

最新推荐文章于 2022-03-10 15:53:20 发布

MiemieWan

最新推荐文章于 2022-03-10 15:53:20 发布

阅读量238

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/MiemieWan/article/details/100089659

版权

js基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>0</div>
	<div>0</div>
	<div>0</div>
	<p class="text">cxczc</p>

<script type="text/javascript">
	/* 模仿实现jQuery中的选择器 */
	(function(global) {
		function Library(selector) {
			return new Fn(selector);
		}
		// 避免直接在共用类上操作prototype，需创建新类Fn
		function Fn(selector) {
			var elements = document.querySelectorAll(selector);
			// this设置为类数组
			for(var i = 0; i < elements.length; i++) {
				this[i] = elements[i];
			}
			this.length = elements.length;
		}
		Fn.prototype = {
			// Fn.prototype写成对象形式，constructor默认为Object,需重新设置
			constructor: Fn,
			css(name, value) {
			// console.log(this.length);
				for(var i = 0; i < this.length; i++) {
					var el = this[i];
					// console.log(el)
					el.style[name] = value;
				}
			},
			height() {
				console.log(12)
			}
		}
		console.log(Fn.prototype.constructor)
		window._$ = window.Library = Library;

	})(window)

	_$('div').css('color','red')
	_$('.text').css('color','red')
	_$('.text').height()

	console.log(_$('div').constructor)

</script>
</body>
</html>