首页 > Web开发 > 详细

jQuery核心技术-----------------------------------------------------()

时间:2016-12-06 14:32:20      阅读:169      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="author" content="daiqingyun">
		<title>JQuery的无new创建以及链式调用</title>
	</head>

	<body>
		<div class="demo">
			<span>哈哈</span>
		</div>
		<div class="demo">哈哈哈</div>
		<button type="button" name="button" id="btn">点击</button>
		<script type="text/javascript">
			(function(window, undefined) {
				var jQuery = function(selector, context) {
						//返回一个__proto__指向jQuery.fn.init.prototype的实例。
						return new jQuery.fn.init(selector, context);
					}
					//隐藏prototype
				jQuery.fn = jQuery.prototype = {
						init: function(selector, context) {
							var nodeList = document.querySelectorAll(selector);
							this.length = nodeList.length;
							for(var i = 0; i < this.length; i++) {
								this[i] = nodeList[i];
							}
							return this;
						},
						//遍历器
						each: function(fn) {
							var length = this.length;
							for(var i = 0; i < length; i++) {
								fn.call(this[i], i, this[i]);
							}
							return this;
						},
						hide: function() {
							this.each(function() {
								this.style.display = ‘none‘;
							});
							return this;
						},
						red: function() {
							this.each(function() {
								this.style.backgroundColor = "red";
							});
							return this;
						},
						font: function() {
							this.each(function() {
								this.style.color = "white";
							});
							return this;
						}
					}
					//将实例的__proto__指向jQuery.prototype
				jQuery.fn.init.prototype = jQuery.prototype;
				window.$ = jQuery;
			})(window);
			$(‘#btn‘)[0].onclick = function() {
				$(‘div‘).red().font();
			}
		</script>
	</body>

</html>

  

jQuery核心技术-----------------------------------------------------()

原文:http://www.cnblogs.com/libin-1/p/6137189.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!