1.需要掌握的知识点

　　1）(function($){...}(jQuery)):实际上就是匿名函数并且函数用（）阔起来，形成闭包，外界对其内部函数没有影响

　　　　$(function(){…});   jQuery(function($) {…});  $(document).ready(function(){…})用法都是一样的，我们自定义插件时需要用到

　　2）$.extend()，$.fn.extend()区别

　　　　最主要的特征：$.extend()是扩展的是Jquery类的静态成员

　　　　　　　　　　　$.fn.extend()扩展的是Jquery类实例化对象成员

2.自定义控件分类：带参插件；不带参插件

　　1）不带参插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>不带参数的jquery插件开发</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        (function($){

            $.fn.extend({

                myPlugName:function(){

                    $(this).click(function(){

                        alert($(this).val());

                    });

                }

            });

        })(jQuery);

    </script>

</head>

<body>

    <input type="button" value="点击我" id="btn" />

</body>

    <script type="text/javascript">

          $("#btn").myPlugName();

    </script>

</html
方式一：
(function($){

     $.fn.extend({

         myPlugName:function(){<!--myPlugName你的插件的名字，根据自己的情况来命名-->

             //dosomethings

         });

     }

     });

})(jQuery);
方式二：
(function($){

     $.fn.myPlugName=function(){<!--myPlugName你的插件的名字，根据自己的情况来命名;$.fn.名字是$的原型添加属性或者方法-->
　　　　//dosomethings
　　　　}

})(jQuery);
$.fn.extend是实例的扩展；$.extend是类的扩展

　　2）带参插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        (function($){

            $.fn.hilight=function(options){

                var defaults={

                    foreground:'red',

                    background:'yellow'

                };

                var opts = $.extend(defaults,options);

                $(this).css("background-color",opts.background);

                $(this).css("color",opts.foreground);

            };

        })(jQuery);

    </script>

</head>

<body>

    <div id="myDiv">This is a Params JQuery!</div>

</body>

<script type="text/javascript">

    $("#myDiv").hilight({foreground:'blue'});

</script>

</html>
方式一：
(function($){

            $.fn.hilight=function(options){

                var defaults={

                    foreground:'red',

                    background:'yellow'

                };

                var opts = $.extend(defaults,options);//将defaults与options结合在一起放到$类中作为其成员变量再被赋值给opts在这个区域内做相应操作

                //dosomethings

            };

        })(jQuery);
方式二：
(function($){
　　　　　　　$.fn.hilight=function(options){
　　　　　　　　　　var defaults={
　　　　　　　　　　　　foregroup:'red',
　　　　　　　　　　　　backgroup:'yellow'
　　　　　　　　　　}
　　　　　　　　};
　　　　　　　　//这里还要将参数放到$中
　　　　　　　　var opts=$.extends(defaults,options)
　　　　　　　　//dosomethings
　　　　})(jQuery);

jquery开发js插件的更多相关文章

  1. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  2. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  3. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  4. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  5. 异步上传图片，光用jquery不行，得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  6. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  7. ajax请求执行完成后再执行其他操作（jQuery.page.js插件使用为例）

    就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...

  8. jquery.validate.js插件的使用方法

    近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...

  9. jQuery通过jquery.form.js插件使用AJAX提交Form表单

    我简单使用了一下,jQuery Form插件有一下优点:  1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可. ...

随机推荐

  1. APP https抓包

    一.软件准备 charles 安卓模拟器(windows系统用逍遥模拟器,mac os 用夜神安卓模拟器) Xposed的apk安装包(安装到模拟器上),地址:http://repo.xposed.i ...

  2. python正则表达式练习

    正则表达式修饰符 - 可选标志 正则表达式可以包含一些可选标志修饰符来控制匹配的模式.修饰符被指定为一个可选的标志.多个标志可以通过按位 OR(|) 它们来指定.如 re.I | re.M 被设置成 ...

  3. iptables 概念 1

    [ 实战笔记 -- iptables 概念 1 ] 一. 防火墙相关概念 # 从逻辑上讲,防火墙可以分为主机防火墙和网络防火墙. 1> 主机防火墙: 针对于单个主机进行防护 2> 网络防火 ...

  4. Ninject学习笔记<三>

    ASP.NET MVC学前篇之Ninject的初步了解 1.介绍 废话几句,Ninject是一种轻量级的.基础.NET的一个开源IoC框架,在对于MVC框架的学习中会用到IoC框架的,因为这种IoC开 ...

  5. EasyGBS国标流媒体视频平台接入海康、大华、宇视的摄像机、硬盘录像机NVR、国标下级平台的方案

    在上一篇<EasyNVR和EasyDSS云平台联手都不能解决的事情,只有国标GB28181能解决了>我们大致介绍了国标GB/T28181的使用场景,而且初步介绍了EasyGBS国标视频平台 ...

  6. idea 右下角不显示git分支

    开发工程中遇到idea右下角不显示git分支问题: 解决方案:查找资料说是需要打开VCS->Enable version control. 但是Enable version control 已经 ...

  7. MongoDB实践-自定义ASP.NET Session Store

    Session由来 由于HTTP协议是无状态的,客户端与服务器端进行“请求-响应”操作后,建立的连接就释放了,服务器端根本不知道刚才是哪个客户端访问的.但是有些场景是需要知道客户端的状态的,最典型的就 ...

  8. pycharm如何自定义模板?

    按照上图箭头方向设置即可.

  9. The C Programming Language Second Edition

    %12d  at least #include <stdio.h> main() { ,sum=,w=; ; ; w<=end; w++ ) { sum+=w; // for(wb= ...

  10. sparse matrix

    w https://en.wikipedia.org/wiki/Sparse_matrix 稀疏矩阵存储格式总结+存储效率对比:COO,CSR,DIA,ELL,HYB - Bin的专栏 - 博客园ht ...