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. A guide to analyzing Python performance

    来源:http://www.huyng.com/posts/python-performance-analysis/ While it's not always the case that every ...

  2. android Service 保持不被杀死

    Android开发的过程中,每次调用startService(Intent)的时候,都会调用该Service对象的onStartCommand(Intent,int,int)方法,然后在onStart ...

  3. Android无线测试之—UiAutomator UiDevice API介绍八

    获取包名.开启通知栏.快速设置.获取布局文件的方法 一.包名.通知栏.快速设置.布局文件等相关知识: 1)包名:标示应用的符号,每个应用的名字 2)通知栏:从主界面的顶端向下拉,就可以打开通知栏 3) ...

  4. ios中的coredata

    本文转载至 http://blog.csdn.net/chen505358119/article/details/9334831 分类: ios2013-07-15 18:12 12449人阅读 评论 ...

  5. python 基础 10.0 nosql 简介--redis 连接池及管道

    一. NOSQL 数据库简介 NoSQL 泛指非关系型的数据库.非关系型数据库与关系型数据库的差别 非关系型数据库的优势: 1.性能NOSQL 是基于键值对的,可以想象成表中的主键和值的对应关系,而且 ...

  6. Python 文件操作、异常

    windows默认是gbk编码,又称cp936,汉字占2个字节. utf-8被称为万国码,这个编码下,汉字占3个字节. ASCII也是一种编码. 一.文件操作 最基本的文件打开: f = open(& ...

  7. idea 不能编译生成class文件

    问题:开发工程中将idea中编译输出目录 out 删掉.发现再次编译不能生成class文件 解决方案:settings -> compiler 勾选自动编译选项

  8. 2015-03-06——ajax基础

    IE6  必须使用Microsoft.XMLHTTP ActiveX组件来实例化一个对象 IE7已实现了XMLHttpRequest对象 var request = new ActiveXObject ...

  9. 解决后台无法进入提示DedeCMS Error: (PHP 5.3 and above) Please set 'request_order' ini value

    最近小美眉的网站被盯上了,被添加了非常多的dubo页面,删除了5w多个文件,但还是不停的增加,因为网站权重还可以,很多都被收录了,结果可想而知,ytkah帮她迁移,在迁移网站时遇到了一些问题,后台登录 ...

  10. gradle build 找不到tools.jar 解决方法

    import javax.tools.ToolProvider compile(files(((URLClassLoader) ToolProvider.getSystemToolClassLoade ...