Jquery编写自己的插件

编写自己的插件

首先我们需要搭建一个插件框架如下：

(function（$）{})(jQuery)

然后利用Jquery里的extend编写自己所需要用的插件：

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：
1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

$.extend( [deep ], target, object1 [, objectN ] )

deep    可选。 Boolean类型 指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。target  Object类型 目标对象，其他对象的成员属性将被附加到该对象上。object1 可选。 Object类型 第一个被合并的对象。objectN 可选。 Object类型 第N个被合并的对象。

下例是一个带关闭按钮的提示框

/** *  * @authors wdl ([e-mail]) * @date    2017-07-26 10:04:44 * @version $Id$ */(function ($) {  $.extend({        autohideTips: function(text,delay) {            $('body').append('<div class="tipBox"><div class="autohideTips"><a href="#" class="closeTip">×</a>'+text+'<div></div>');            setTimeout(function(){                $('.autohideTips').hide();            }, delay)             $(".closeTip").on("click", function () {                $('.autohideTips').hide();            });        },    })})(jQuery); 

@charset "UTF-8";/** *  * @authors Your Name ([e-mail]) * @date    2017-07-26 10:08:49 * @version $Id$ */html, body, div, ul, li, p, h1, h2, h3, h4, h5, h6, span {    margin: 0px;    padding: 0px;}ul li {    list-style: none;}.tipBox{    position: absolute;    min-width: 200px;    top: 80px;    right:5%;}.autohideTips {    border-radius: 4px;    font-size: 16px;    padding: 12px 16px;    border: 1px solid #ccc;    color: #8a6d3b;    background-color: #fcf8e3;    border-color: #faebcc;}.autohideTips a:hover{    text-decoration: none;}.closeTip{    float: right;    font-size: 21px;    font-weight: bold;    line-height: 1;    color: #000;    text-shadow: 0 1px 0 #fff;    filter: alpha(opacity=20);    opacity: .2;    text-decoration: none;} @media screen and (max-width: 500px) {.autohideTips {    font-size: 14px;}   }

调用方法：
只需在你需要的地方写入类似

$.autohideTips('已保存',4000);

即可。

是不是很简单，快去编辑自己的插件吧