前端开发也工作了一段时间，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插件学习的更多相关文章

  1. jquery插件学习之元素顶部悬浮

    jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  2. jQuery插件学习(一)

    由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...

  3. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  4. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  5. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  6. [置顶] JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

  7. jquery 插件学习

    练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...

  8. jQuery插件学习基础

    1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...

  9. jQuery插件学习之选项卡Tab

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...

随机推荐

  1. 静态文件服务器(The static file servers)

    大部分的网站都会提供一些在通常操作下不会发生改变的资源给浏览器.显示网站外观的图片和CSS文件,在浏览器中运行的JavaScript代码,没有动态组件的HTML文件就是这种资源中的代表,统称为静态文件 ...

  2. Codeforces 367

    A. Sereja and Algorithm 水题不解释. B. Sereja ans Anagrams 模p同余的为一组,随便搞. C. Sereja and the Arrangement of ...

  3. hibernate和mybatis

    本来是个菜鸟程序员,现在大学还没毕业. 最近一直在想一个问题,到底是hibernate好还是mybatis好.我总觉得 hibernate好用之极,在大学里做过的小项目都是用的hibernate,只要 ...

  4. Elasticsearch集群搭建

    现有两部机器:192.168.31.86,192.168.31.87   参考以往博文对Elasticsearch进行配置完成:http://www.cnblogs.com/zhongshengzhe ...

  5. linux信号量超过系统限制

    部署一台新服务器,信号量报错,观察也没有key冲突,错误分析及解决如下: 创建一个不存在的信号量集返回参数错误的报错,因为信号量集的信号量数量超过了系统限制. 系统默认 /home/poc#ipcs ...

  6. 数据库连接字符串ConnectionString 中的关键字值释义

    ConnectionString 类似于 OLE DB 连接字符串,但并不相同.与 OLE DB 或 ADO不同,如果“Persist Security Info ”值设置为false(默认值),则返 ...

  7. Oracle超出最大连接数问题及解决

    用过Oracle的应该都熟悉如何查看和设置Oracle数据库的最大连接数.这里就再啰嗦一遍. 查看当前的连接数,可以用select count(*) from v$process;设置的最大连接数(默 ...

  8. java对象转JSON JS取JSON数据

    JsonConfig config = new JsonConfig(); config.setJsonPropertyFilter(new PropertyFilter() { @Override ...

  9. pod install warning

    warning: Insecure world writable dir /usr/local/bin in PATH, mode 040777 解决方法: sudo chmod 775 /usr/l ...

  10. 【转】adns解析库——域名解析实例（C++、linux）

    转自:http://blog.csdn.net/fty8788/article/details/7480334 adns是一个开源的dns解析库 官方文档:http://www.chiark.gree ...