Jquery插件学习

发布时间:2017-5-24 12:36:41 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Jquery插件学习 ",主要涉及到Jquery插件学习 方面的内容,对于Jquery插件学习 感兴趣的同学可以参考一下。

前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用,

本人就感觉很好奇他们是怎么做到的呢,于是自己也开始想学习封装一下,才用了Jquery插件的学习,

在学习Jquery的开发时候网上也看过了很多人写过例子但是都是很简单的,没有完整的从写插件方法到调用插件,有的要不就是很深的于是自己写一下自己的学的东西方便以后学习,和分享给和我一样在学习Jquery插件的朋友,废话不多说先上代码

(function ($) {
//带有参数的插件
$.fn.myPlugins = function(options){
var defaults = {
'color':'red',//对外提供了Color参数
'fontSize':'12px',//对外提供了字体大小参数
'backgroundColor':'red',//对外提供了背景参数
'borderRadius':'12px'//对外提供了圆角边框参数
};
var opts = $.extend({},defaults,options); //将一个空对象做为第一个参数
this.css({
'color':opts.color,
'font-size':opts.fontSize,
'background-color':opts.backgroundColor,
'border-radius':opts.borderRadius
});
return this;
};
})(jQuery);

以上是jquery插件代码只要复制到你项目中就可以使用

下面是页面代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>jquery插件学习</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="MyPlugin.js"></script>
<script type="text/javascript" src="MySelf.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$("p").myPlugins({
color:'blue',//这里是调用参数的地方
fontSize:'23px'
});
});
</script>
</head>

<body>
<p>第一天学习插件</p>
</body>

</html>

未经过本人的同意请勿转载,如果要转载请添加上本人的博客地址谢谢:https://i.cnblogs.com/EditPosts.aspx?opt=1

上一篇:Jquery中each的三种遍历方法
下一篇:C#怎么遍历一个对象里面的全部属性?

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

腹肌贴健身器材智能腹部训练健腹器肌