zoukankan      html  css  js  c++  java
  • 学习编写jQuery插件

    jquery插件基本上分为两种,一种是对象级别的插件,另一种是全局级别的插件。对象级别的插件就像是实例方法,它是属于实例对象的,而全局级别的相当于静态方法,是属于类的,调用起来自然也就不一样,对于全局级别的插件我们自然是使用jQuery来调用,比如$.NPScrollLoad(....),对象级别的插件自然是应用与jQuery对象上了,比如:$("selector").NPScrollLoad(...)。

    全局级别插件:,相当于类的静态方法:

    //用于扩展jQuery类本身,在jQuery类/命名空间上增加新函数
    //属于静态方法
    jQuery.extend({
    	"minValue":function(a,b){
    		return a<b?a:b;
    	},
    	"maxValue":function(a,b){
    		return a>b?a:b;
    	}
    });
    var a=100,b=101;
    //调用
    var min=$.minValue(a,b);
    var max=$.maxValue(a,b);
    console.log(min);
    console.log(max);

    对象级别插件:相当于对象的成员方法

    $(function(){
    $.fn.extend({
    	maxValue:function(a,b){
    		return a>b?a:b;
    	},
    	minValue:function(a,b){
    		return a<b?a:b;
    	}
    });
    var a=1,b=2;
    var max=$.fn.maxValue(a,b);
    var min=$.fn.minValue(a,b);
    
    console.log(max);
    console.log(min);
    });

    jQuery.extend有个重载版本,可用于配置参数:

    <body>
    	<p>jQuery.extend() 方法的重载版本:</p>
    	<p>
    		jQuery.extend(deep,target,object1,[objectN]);
    		// deep:是否递归合并
    		// target:待修改的对象
    		// object1-N: 待合并到第一个对象的对象
    	</p>
    	<script>
    		//合并 settings 和 options,修改并返回 settings。
    		var settings={validate:false,limit:5,name:"foo"};
    		var options={validate:true,name:"bar"};
    		jQuery.extend(settings,options);
    		// console.log(settings);
    		//合并 defaults 和 options, 不修改 defaults。
    		var empty = {}; 
    		var defaults = { validate: false, limit: 5, name: "foo" }; 
    		var options = { validate: true, name: "bar" }; 
    		var settings = jQuery.extend(empty, defaults, options);
    		console.log(settings);
    		console.log(empty);
    		console.log(defaults);
    	</script>
    </body>

    最后一个综合示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>编写jquery插件</title>
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="lib.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$("p").bold();
    			});
    		</script>
    	</head>
    	<body>
    		<p>
    			封装JQuery插件
    		</p>
    		<script>
    			//闭包限定命名空间
    			(function($){
    				//扩展jQuery对象的原型方法
    				$.fn.extend({
    					"highLight":function(options){
    						//使用jQuery.extend覆盖插件默认参数
    						var opts=$.extend({},defaults,options); 
    						//这里的this是jQuery对象
    						//return 返回传进来的对象,便于链式操作
    						return this.each(function(){
    							//遍历所有要高亮的dom
    							//获取当前dom的jQuery对象,这里的this是当前循环的dom
    							var $this=$(this);
    							//根据参数来设置dom的样式
    							$this.css({
    								backgroundColor:opts.background,
    								color:opts.foreground
    							});
    							//公共方法:格式化高亮文本
    							var markup=$this.html();
    							markup=$.fn.highLight.format(markup);
    							$this.html(markup);
    						});
    					}
    				});
    				//默认参数
    				var defaults={
    					foreground:'red',
    					background:'yellow'
    				};
    				// 公共的格式化方法,默认是加粗,用户可以通过覆盖该方法来达到不同的效果
    				$.fn.highLight.format=function(str){
    					return "<strong>"+str+"</strong>";
    				}
    				
    				//私有方法,检测参数是否合法
    				function isValid(options){
    					return !options || (options && typeof options === "object") ? true : false;
    				}
    				
    				
    				
    			})(window.jQuery);
    			
    			$.fn.highLight.format = function (txt) {
    			            return "<em>" + txt + "</em>"
    			        }
    		
    			$(function () {
    				$("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
    			});
    			
    			//调用
    			
    		</script>
    	</body>
    </html>
    

    参考:

    https://www.cnblogs.com/joey0210/p/3408349.html

    https://www.cnblogs.com/fcsh820/p/3415299.html

  • 相关阅读:
    关于Mac上的开发工具
    关于VS2008和VS2013中字体的选择
    实验四 使用ASP.NET内置对象 总结
    实验三 使用ASP.NET常用服务器控件 总结
    实验二 C#程序设计 总结
    实验一 ASP.NET应用环境配置 总结
    关于PHP.INI中的错误ERROR报告级别设置
    获取当前网址跟目录
    PHP获取站点根目录
    php 上传图片
  • 原文地址:https://www.cnblogs.com/AlexanderZhao/p/12878890.html
Copyright © 2011-2022 走看看