<!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中的值给完全覆盖。
相关推荐
js插件的写法.编写javascript插件
编写javascript插件,来扩展已有的JavaScript功能 编写js插件,来扩展已有的js功能
在使用vs2010编写JavaScript时,缺少很多提示和纠错,通过加载这个插件可以轻松在vs2010中编写JavaScript
下载并安装Minecraft服务器后,再安装ScriptCraft插件,您就可以使用Javascript编写自己的Minecraft mod。 我创建了ScriptCraft,以使年轻的程序员更轻松地创建自己的Minecraft Mod。 Mod使用JavaScript编程语言...
JDialog是一个js编写的对话框插件。js弹出框的非常优秀解决方案,操作简单,功能丰富,性能可靠。代码逻辑写得很简单,除去注释的话应该不到500代码。 注释也是相当详细,所以也是也不错的学习组件。 包括以下组件:...
高亮显示关键字。 因为在网上搜到的类似插件,觉得不是太完美,或者说是不太符合自己想要的要求,于是自己写的一个高亮显示关键字插件,感觉还可以
eclipse编写javas代码提示工具的插件spket,安装时使用eclipse的插件安装工具,很容易安装,javascript代码提示特别好用,包括系统的方法和自己编写的方法和对象,安装完需要配置。
被 Adobe 收购的 Eclipse 下的 JavaScript 编辑工具 最先进的JavaScript编辑器之一。JSEclipse是针对Eclipse开发平台的免费插件。它支持的功能有:代码完成、大纲浏览、错误报告、代码换行,等等。
本插件使用原生javascript编写,兼容IE6及以上浏览器,兼容chrome,opera,firefox,safari等主流浏览器。 1.代码淅晰,兼容性良好。 2.使用简单,提供使用用例 3.不依赖于任何库,采用原生js编写 4.插件界面简洁清爽 ...
原生js实现简单的一款倒计时计时插件下载。基于原生JavaScript编写的一款通用倒计时计时插件,精确到毫秒,简单实用。
我整理的EditPlus的JSLint插件及配置方说明,以fresher(李振文)的wsh版本稍作修改而成。 网上的用fulljslint.js进行配置的文章基本是错误的。
完全用javascript编写的绘制图表程序,没有采用额外的插件,可以绘制柱状图,折线图,饼状图等,适用于绘制简单图形。
JS、HTML编写的天气查询预报,用于网页开发,通过网络气象接口获取天气情况返回json数据,对json数据处理成自己想要的效果,可查询到城市三级级联天气,到县级天气。资料源于网络。
js编写的省份 城市选择器 选择省份 会出现相应的该省份下面的各个城市…
NULL 博文链接:https://nomandia.iteye.com/blog/1167630
该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。
CSS插件工具箱--使用JavaScript和HTML5编写的100个CSS动态网站插件CSS插件工具箱--使用JavaScript和HTML5编写的100个CSS动态网站插件
jseclipse插件,eclipse的插件,编写js的利器,由官网已停止维护,由此无法直接在线安装
使用该插件可以在使用js向后端提交数据时进行csrf校验
可实现前端html和js代码国际化的小插件,可以使html和js文件中的文字转移到配置文件中编写,实现国际化