前端开发也工作了一段时间，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. 简易版CSS3 Tab菜单 实用的Tab切换

    今天我们要来分享一款非常简易而又实用的CSS3 Tab菜单,Tab菜单没有非常华丽的动画,但是代码非常简洁易懂,也可以在大部分场合使用,因此也非常实用,如果你需要加入动画效果,也可以自己方便地修改这款 ...

  2. JDBC学习笔记(1)——JDBC概述

    JDBC JDBC API是一个Java API,可以访问任何类型表列数据,特别是存储在关系数据库中的数据.JDBC代表Java数据库连接. JDBC库中所包含的API任务通常与数据库使用: 连接到数 ...

  3. Xcode 4 插件制作入门

    转自:http://www.onevcat.com/2013/02/xcode-plugin/ 2014.5.4更新 对于 Xcode 5,本文有些地方显得过时了.Xcode 5 现在已经全面转向了 ...

  4. ecstore 后台登陆跳转到 api失败，中心请求网店API失败

    解决过程没有具体参与,官方解决后回复的邮件,可以参考一下: 后台登陆错误图:   商派解决方法邮件:   特别注意:这个错误提示有时候也跟ecstore的nginx服务器伪静态有关,具体参考: htt ...

  5. ds18b20里的 温度值正负判断 为什么要判断大于6348 ，为什么取这个值？

    http://zhidao.baidu.com/question/576118682.html?quesup2&oldq=1

  6. aspose.cell制作excel常见写法

    //设置Excel的基本格式信息 Workbook workbook = new Workbook(); Worksheet worksheet = workbook.Worksheets[]; St ...

  7. POJ 3672 Long Distance Racing (模拟)

    题意:给定一串字符,u表示是上坡,d表示下坡,f表示平坦的,每个有不同的花费时间,问你从开始走,最远能走到. 析:直接模拟就好了,没什么可说的,就是记下时间时要记双倍的,因为要返回来的. 代码如下: ...

  8. Unity3D之Mecanim动画系统学习笔记（八）：Animator Layers（动画分层）

    解决什么问题? 动画分层可以用来解决什么样的问题呢?试想一下如果你要开发一款第三人称的射击游戏,那么肯定是希望身体的动画分为上下两部分,上方根据瞄准的位置和是否射击进行动画播放,下方根据移动播放动画. ...

  9. 编码规范系列（一）：Eclipse Code Templates设置

    从工作开始,经历了几个项目的开发,现在的项目一般都是一个团队共同开发,而每个人都有自己的编码习惯,为了统一格式,项目组在项目开发之前都会制定一系列的规范.俗话说约定优于配置,但是在执行过程中往往发现效 ...

  10. hibernate一些坑记录集

    1:对比原生sql查询和 hql查询 返回结果的类型 count: sql: select count(0) from xxx where .... 返回 BigInteger hql: select ...