您的位置：首页 > Web前端 > JavaScript

js 编写简单插件

2016-01-11 16:56 591 查看

<!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中的值给完全覆盖。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航