基于js的jquery开发本质

最新推荐文章于 2020-11-16 21:24:47 发布

woaijianjiandandande

最新推荐文章于 2020-11-16 21:24:47 发布

阅读量884

点赞数 1

分类专栏： jQuery JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/woaijianjiandandande/article/details/54882348

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

var $dn = dnQuery = (function(root){
	var _proxy = function(selector){
		return root.document.querySelectorAll(selector);
	}
	var $ = function(selector,parent){
		return _proxy(selector);
	};
	$.extend = function(target){
		for (var i = 1; i < arguments.length; i++) {
			for(var prop in arguments[i]){
				target[prop] = arguments[i][prop];
			}
		}
		return target;
	}

	var __PROTO__ = {
		each : function(callback){
			for (var i = 0; i < this.length; i++) {
				callback&&callback.call(this[i],i,this[i]);
			}
		},
		get : function(index){
			return this[index];
		},
		find : function(selector){
			return $(selector);
		},
		html : function(html){
			this.each(function(index,object){
				object.innerHTML = html;
			});
			return this;
		},
		addClass : function(clazz){
			this.each(function(index,object){
				object.className = clazz;
			});
			return this;
		},
		removeClass : function(){
			this.each(function(index,object){
				object.className = "";
			});
			return this;
		}
	};

	//[native code] prototype 是 const
	$.fn = $.extend(NodeList.prototype,__PROTO__);
	//创建了一个闭包空间
	return $;
}(window));

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.class1{
			font-size:22px;
		}
		.class2{
			font-family: Arial,"Microsoft Yahei";
		}
	</style>
</head>
<body>
	<div class="myTest">this is div1
		<p></p>
	</div>
	<div class="myTest">this is div2</div>
	<script src="assets/plug-in/dnJquery/dn-jquery.1.0.0.js"></script>
	<script>
		//var $test = $dn(".myTest");
		// $dn.fn.find = function(){
		// 	console.log("this is find");
		// }
		// console.log($test.length);
		// console.log($test[0]);
		// console.log($test.get(1));
		// $test.addClass().removeClass().find();
		//$test.addClass("class1 class2").find("p").html("<a href='#'>新增的超链接</a>");
		
		//var $body = $(document.body);
		console.log($.fn);
	</script>
</body>
</html>

woaijianjiandandande

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于js的jquery开发本质

var $dn = dnQuery = (function(root){ var _proxy = function(selector){ return root.document.querySelectorAll(selector); } var $ = function(selector,parent){ return _proxy(selector); }; $.exten
复制链接

扫一扫

专栏目录