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. JDK之ThreadLocal分析

    ThreadLocal是在是Thread的一个局部变量,今天我来分析了一下这个类 先看ThreadLocal的set方法 public void set(T value) { Thread t = T ...

  2. selenium的元素定位-iframe

    # name = top-frame # 如果iframe有name属性 或 id属性则 可以直接在frame种填写 # 如果没有name和id属性 frame() 可以接受elementOBj el ...

  3. Splay_Tree 模板（区间修改，旋转操作）

    1.旋转操作 #define MAXN 100100 bool Add[MAXN];//延迟标记 struct Splay_Tree { int cnt, rt;//cnt为节点数,rt == roo ...

  4. 【BZOJ2064】分裂 状压DP

    [BZOJ2064]分裂 Description 背景:和久必分,分久必和...题目描述:中国历史上上分分和和次数非常多..通读中国历史的WJMZBMR表示毫无压力.同时经常搞OI的他把这个变成了一个 ...

  5. K-th Number(主席树)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 59327   Accepted: 20660 Ca ...

  6. JavaScript数据结构与算法-数组练习

    一. 创建一个记录学生成绩的对象,提供一个添加成绩的方法,以及一个显示学生平均成绩的方法. // 创建一个记录学生成绩的对象 const Students = function Students () ...

  7. Django中_Meta 部分用法

    周一了,就不长篇大论了,给大家分享一个很实用的知识点,希望大家周末过得开心,愉快,诗和远方在等着你们.而我还在苦逼的撸代码,只为了应付眼前的苟且! model.UserInfo._meta.app_l ...

  8. SE80 开发对象

    偶然发现:开发对象可以自动识别对象的类别.

  9. qemu-img 的使用

    qemu-img是QEMU的磁盘管理工具,在qemu-kvm源码编译后就会默认编译好qemu-img这个二进制文件.qemu-img也是QEMU/KVM使用过程中一个比较重要的工具,本节对其用法和实践 ...

  10. Dockerfile学习（二）

    这节学习制作一个ssh镜像服务. 创建sshtest目录,进入到该目录中. 假如允许主机B上的root用户可以通过SSH登录到容器内部,那么首先要在B主机上通过ssh-keygen -t rsa命令生 ...