jquery选择器的实现原理

最新推荐文章于 2020-11-27 16:59:55 发布

暮志未晚NAN

最新推荐文章于 2020-11-27 16:59:55 发布

阅读量4.7k

点赞数

分类专栏： jquery 文章标签： jquery 选择器实现原理

本文链接：https://blog.csdn.net/qq_30100043/article/details/53016410

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html部分

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="js/minijquery.js"></script>
</head>
<body>
	<div class="one">1</div>
	<div class="two">2</div>
</body>
<script>
	var result = $("div");
	console.log(result);
	alert($('div').size());
</script>
</html> js

js部分

(function(){
	//暴露外部的引用
	var jQuery = window.jQuery = window.$ = function(selector){
		return new jQuery.fn.init(selector);
	}
	
	//添加原型事件
	jQuery.fn = jQuery.prototype = {
		//
		init:function(selector){
			var element = document.getElementsByTagName(selector);
			Array.prototype.push.apply(this,element);
			return this;
		},
		myjQuery:"the test one",
		length:0,
		size:function(){
			return this.length;
		}
	}
	
	//将init的原型引用成jQuery的原型
	jQuery.fn.init.prototype = jQuery.fn;
	
})();

我用我的理解解释一下，就是jquery原型里面有一个init初始化的方法，将传入的值进行解析，比如传入的id还是class还是标签名。然后通过相应的方法返回数组型对象。既可以通过对象直接调用方法，也可以使用数组的length。

暮志未晚NAN

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
jquery选择器的实现原理

html部分 Document 1 2 var result = $("div"); console.log(result); alert($('div').size()); jsjs部分(function(){ //暴露外部的引用 var jQuery = window.jQuery = window.$ = function(selector){
复制链接

扫一扫

专栏目录