js 编写简单插件

dtt3401885

浏览: 17870 次

最近访客更多访客>>

zxsy007x

jiuyuesun

lizhao1226

pipi517

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (23)

社区版块

存档分类

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>111111</title>
<script type="text/javascript"
	src="${resource(dir:'development-bundle',file:'jquery.js')}"></script>


<!-- view_source_begin -->
</head>
<body>
	<input type='button' name="11111" value="123123" onclick="onaaa()">
	<div id="gongg">
		<font color="#DBEAF9">asdasdasdasd</font>
	</div>
</body>
<script type="text/javascript">
jQuery.aabb =function () {//定义一个简单插件 插件少量时可用，怕重复插件名称
		
		 alert('This is a test. This is only a test.aabb');
		
		 };
 jQuery.myPlugin = {//定义两种个简单插件 插件大量时可用，不怕重复插件名称  -------//jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
		 foo: function () {
		 alert('This is a test. This is only a test.');
		 }, bar: function (param) {
		 alert('This function takes a parameter, which is "' + param + '".');
		 }
		 };
 (function ($) {//插件要放在里边
	 $.fn.extend({
	 pluginName: function (opt, callback) {
	 // Our plugin implementation code goes here.
	 }
	 })
	 })(jQuery);
 $.fn.hilight = function() {//定义一个jquery方法 可以调用的方法 直接用--------//jQuery.fn.extend(object);给jQuery对象添加方法。 
	 alert($(this).find("font").attr("color"))//$(this)= 该对象
	 	 if($(this).find("font").attr("color")=='#DBEAF9'){
		 $(this).find("font").attr("color","red")
		 }else if($(this).find("font").attr("color")=='red'){
			 $(this).find("font").attr("color","#DBEAF9")
	 }

	};

	 $.fn.peihefristchajian = function(psm) {//定义一个jquery传参方法 可以调用的方法 直接用--------//jQuery.fn.extend(object);给jQuery对象添加方法。 
		
		 $(this).find("font").attr("color",psm)
		};
	$.fn.fristchajian=function(paramss){
      var opt={//自己定义一个集合，当调用该方法时候，可以传入该类的数据，把默认的覆盖掉
       size:'4px',
       color:'#003CFF',
       neirong:'第一个插件'
    	      }
      var opts=$.extend(opt,paramss)//把所有参数 集合起来 自己定义与传参，把所有参数放在opts 对象内 ，一下方法可以直接调用opts
      // $("#gongg").peihefristchajian(opts.color)
      $(this).find("font").attr("color",opts.color)
      $(this).find("font").text(opts.neirong)
		}
function onaaa(){
	 $.aabb();
	 $.myPlugin.foo();
	 jQuery.myPlugin.bar('12312asd');
	 $("#gongg").hilight()
	 $("#gongg").fristchajian()
	 $("#gongg").fristchajian({
		  size:'4px',
	       color:'#0080C9',
	       neirong:'第2222个插件'

     })
	  
}
 </script>
</html>

Query为开发插件提拱了两个方法，分别是：

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

extend(result,item1,item2…..)

这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这

样就会破坏result的结构。

extend({},item1,item2,……)

用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。

示例：

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果：

Result={name:”Momo”,age:23,sex:”gril”};

extend(bool,{},item1,item2….)

Extend方法还有带bool型参数的重载。

bool型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：

示例：

var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

结果：

Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明：

以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。

当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。

分享到：

java ftp 上传文件 | grails 统一认证加单点登录

2016-01-11 16:56
浏览 572
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论