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. Swift学习笔记（一）：No such module 'Cocoa'

    在xcode中创建一个Playground文件, 进行导包操作 ,import Cocoa 却提示No such module 'Cocoa' 原因是该Playground文件的platform 设置 ...

  2. node.js调用函数

    首先EditPlus编辑器,打开新建的文本文档,另存为副本 调用函数分为调用本地函数,和其他文件的函数 1.调用本地函数 var http = require('http'); http.create ...

  3. android菜鸟学习笔记28----Android中的Service生命周期及本地和远程服务绑定的实现

    Service是Android中长期在后台运行的没有界面的组件,使用服务的优势在于:能够提高进程的优先级,系统不容易回收掉进程,即便回收了,内存充足的时候,会把进程重新创建. 1.服务的简单使用示例: ...

  4. FW 配置一个私有的Docker仓库

    思维 66 3月1日 发布 建分支 0 分支 收藏 0 收藏 我们在本地开发时,如果内网能部署一台Docker服务器,无疑会极大的方便镜像的分享发布,有些私有镜像就是可以直接放到内网服务器上,省去了不 ...

  5. 任务05—学习 MARKDOWN 语言

    我的简历地址: https://github.com/jinxiaohang/MyResume/blob/master/ForJavaJob.md 本任务主要目的掌握markdown. 1.首先是工具 ...

  6. [IOI2018]狼人

    [IOI2018]狼人 luogu UOJ 对人形和狼形分别建克鲁斯卡尔重构树 每次询问就是对于两棵树dfs序的一个二维数点,主席树维护 #include<bits/stdc++.h> u ...

  7. ThinkPHP的create方法的一系列操作

    1.数据操作状态 create方法的第二个参数可以指定数据的操作状态,默认是自动判断的(写入[Model:MODEL_INSERT或者1].更新[Model:MODEL_UPDATE或者2].也可以自 ...

  8. centos7 yum安装MongoDB

    centos7 yum安装MongoDB   原文博客地址http://xgs888.top/post/view?id=64 centos7 yum安装mongodb: 1:创建仓库 vi /etc/ ...

  9. Java基础—Java运行原理

    Java程序运行原理 在Java中引入了虚拟机(JVM,Java Virtual Machine)的概念,即在机器和编译程序之间加入了一层抽象的虚拟的机器.虚拟机在任何平台上都提供给编译程序一个的共同 ...

  10. solr-6.4.2安装+分词器配置

    一.solr安装 solr下载地址:http://archive.apache.org/dist/lucene/solr/6.4.2/ 1.解压solr软件包:tar xf solr-6.4.2.tg ...