jQuery扩展与插件--附源码分析

  扩展与插件

  1. 编写JQuery插件

  

<script>

$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。

    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

$("p").print();
</script>

  2. 定义作用域

  定义一个JQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

 

(function(a,b){return a+b})(3,5)

       (function ($) { })(jQuery);
//相当于
        var fn = function ($) { };
        fn(jQuery);

  3. 默认参数

  定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。

 

/step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: ‘prevBtn‘,
        prevText: ‘Previous‘,
        nextId: ‘nextBtn‘,
        nextText: ‘Next‘
        //……
    };
    //step06-a 在插件里定义方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性,默认属性
        var options = $.extend(defaults, options);
        //step4 支持JQuery选择器
        //step5 支持链式调用
        return this.each(function () {
            //step06-b 在插件里定义方法
            showLink(this);
        });
    }
})(jQuery);

希望上边的基础知识能够帮到大家,在这里同样也为大家提供一些jQuery的资料,属于练手

Jquery走马灯效果
http://www.makeru.com.cn/live/1396_721.html?s=45051
jquery中的插件机制
http://www.makeru.com.cn/live/1396_473.html?s=45051
jQuery插件扩展,插件疯转原理
http://www.makeru.com.cn/live/1396_473.html?s=45051

jQuery搭建crm管理系统
http://www.makeru.com.cn/live/1396_1067.html?s=45051

jQuery系列(第一讲)3D轮播切换特效
http://www.makeru.com.cn/live/1396_943.html?s=45051
jQuery系列(第二讲)js实现随机PK小游戏
http://www.makeru.com.cn/live/1396_955.html?s=45051
jQuery系列(第三讲)百度换肤术
http://www.makeru.com.cn/live/1396_958.html?s=45051
jQuery系列(第四讲)JS实现轻便计算制作
http://www.makeru.com.cn/live/1396_959.html?s=45051

原文地址:https://www.cnblogs.com/QianD/p/11282982.html

时间: 2024-08-28 10:13:39

jQuery扩展与插件--附源码分析的相关文章

Java设计模式-代理模式之动态代理(附源码分析)

Java设计模式-代理模式之动态代理(附源码分析) 动态代理概念及类图 上一篇中介绍了静态代理,动态代理跟静态代理一个最大的区别就是:动态代理是在运行时刻动态的创建出代理类及其对象.上篇中的静态代理是在编译的时候就确定了代理类具体类型,如果有多个类需要代理,那么就得创建多个.还有一点,如果Subject中新增了一个方法,那么对应的实现接口的类中也要相应的实习该方法,不符合设计模式原则. 动态代理的做法:在运行时刻,可以动态创建出一个实现了多个接口的代理类.每个代理类的对象都会关联一个表示内部处理

百度广告 高亮 Chrome插件(附源码)

一前言 百度最近是上了舆论头条了,相信中过百度毒的人对百度都反感.百度自己挖了这么多坑,终究还是要自己来填.国内网民使且最频繁的搜过 还是以百度为主,而百度依靠这种市场占有率靠他的广告竞价排名大发横财,却把很多急需帮助的人推进了火坑. 这一点在医疗方面是最突出的. 其次基本的用户体验也是被丢弃,比如 大家搜 "软件培训"  第一页 光广告就占去了一半以上......    真心不能忍!而且标识为广告 就靠着右下角一个小小的 推广 字段,连软件行业内的人都有可能不知道是广告,更别说普通用

JQuery对象操作支持链式法则源码分析

JQuery链式法则 何为链式法则?先给出非链式写法的例子 //非链式写法 $("div").css("width", 45px); $("div").css("height", 45px); 再给出链式写法的例子 //链式写法 $("div").css("width", 45px).css("height", 45px); JQuery实现元素的定位与操作,如果每一

用GO语言开发editplus编辑器插件(附源码)

我要开发的插件功能极为简单,就是对用户选中的内容进行base64编码或解密工作. 其中所涉及的技术部分主要是GO语言程序开发和editplus插件配置的部分,首先我们来看一下GO语言代码的写法,如下: package main import ("encoding/base64""fmt""os") const (version string = "1.0") func main() {num := len(os.Args)if

CNI portmap插件实现源码分析

DNAT创建的iptables规则如下:(重写目的IP和端口) PREROUTING, OUTPUT: --dst-type local -j CNI-HOSTPORT_DNAT  // PREROUTING和OUTPUT链中目的地址类型为local的跳转至CNI-HOSTPORT-DNAT进行处理 CNI-HOSTPORT-DNAT: -j CNI-DN-abcd123 // 进入相应容器的chain进行处理 CNI-DN-abcd123: -p tcp --dport 8080 -j DNA

jQuery 2.1.4版本的源码分析

jquery中获取元素的源码分析 jQuery.each({// 获取当前元素的父级元素 parent: function(elem) { var parent = elem.parentNode;//nodeType为11的节点类型是DocumentFragment return parent && parent.nodeType !== 11 ? parent : null; },//获取所有的 父节点 这涉及到 dir 方法 parents: function(elem) { ret

Unity时钟定时器插件——Vision Timer源码分析之二

Unity时钟定时器插件--Vision Timer源码分析之二 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 前面的已经介绍了vp_Timer(点击前往查看),vp_TimeUtility相对简单很多,vp_TimeUtility定义了个表示时间的结构Units: C#代码   /// <summary> /// represents a time measured in standard units /// </summar

jQuery1.9.1源码分析--数据缓存Data模块

阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(elem, name, data)源码分析 internalRemoveData方法源码分析 internalData方法的源码分析 jQuery.fn.extend({data: function( key, value ) {}})源码分析 jQuery.extend({removeData: function( elem, name ) {}})源码分

jQuery-1.9.1源码分析系列完毕目录整理

jQuery 1.9.1源码分析已经完毕.目录如下 jQuery-1.9.1源码分析系列(一)整体架构 jQuery-1.9.1源码分析系列(一)整体架构续 jQuery-1.9.1源码分析系列(二)jQuery选择器 jQuery-1.9.1源码分析系列(二)jQuery选择器续1 jQuery-1.9.1源码分析系列(二)jQuery选择器续2——筛选 jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——词法解析 jQuery-1.9.1源码分析系列(三) Sizzle选择