jQuery 插件-(初体验一)

1.jquery有2个扩展方法:

  • jquery.fn.extend=jquery.prototype.extend
  • jquery.extend

(两者的区别放在后面文章说)

2.具体实例结构:

//创建及时作用域
(function ($) {

    // 通过字面量创造一个对象,存储我们需要的共有方法
    var methods = {
        inint: function (options) {

            //返回“this”(函数each()的返回值也是this),以便进行链式调用。
            return this.each(function () {

                // 为每个独立的元素创建一个jQuery对象
                var $this = $(this);

                //设置默认值
                var defaults = {
                    proName: 'zqz'

                };

                if (typeof (options) == 'undefined') {
                    settings = $.extend({}, defaults);
                } else {
                    var settings = {
                        proName: options.proName,
                        Events: handlers.zqzClick($this, options)
                    };
                    settings = $.extend({}, defaults, settings);
                }

            })
        }
    };

    //事件
        var handlers = {
            zqzClick: function ($this, options) {
                $this.bind('click', options.zqzClick);
            }
        };

   //向jQuery中被保护的“fn”命名空间中添加你的插件代码,用“zqz”作为插件的函数名称
        $.fn.zqz = function () {

            // 检验方法是否存在
            var method = arguments[0];

        if (methods[method]) {
            method = methods[method];

            arguments = Array.prototype.slice.call(arguments, 1);

            // 如果方法不存在,检验对象是否为一个对象(JSON对象)或者method方法没有被传入
        } else if (typeof (method) == 'object' || !method) {
            method = methods.inint;
        } else {
            $.error('asdasd');

            return this;
        }
        return method.apply(this, arguments);
    }

})(jQuery)

//调用
$(function () {
        //$('#blanckjh').zqz();
           $('#blanckjh').zqz({
            'proName': 'wdx',
             'zqzClick': function () {
                alert("zqz");
            }

        });
    })

3.插件中涉及到的一些概念与注意事项放在后面文章说

转载:http://www.cnblogs.com/zqzjs/p/4638375.html

时间: 2024-08-02 17:17:39

jQuery 插件-(初体验一)的相关文章

php+jquery+ajax初体验

这个一个简单的php与ajax案例 仅供新手学习 附上效果图 jquery ajax代码  $(function(){   $("#send").click(function(){    var cont = $("input").serialize();    $.ajax({     url:'aseoe.php',     type:'post',     dataType:'json',     data:cont,     success:function

360浏览器站长工具插件初体验

360浏览器推出了站长工具插件,为广大站长提供了seo优化操作工具,我们一起来体验一下. 1. 先看看360站长工具插件的真容 2. 目前360站长工具插件只有5个功能:网站信息,关键词查询,安全检测,whois查询,备案查询   3. 先看网站信息功能,以我习惯用的 chinaZ站长工具进行一下对比,输入网站www.***.com 进行查看,我们发现360站长工具插件实现的查询与chinaZ站长工具大致类似,结果有些误差,在雅虎反链处,360查出386条,而chinaZ站长工具查出346条.

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuery UI   5.jQuery Cookie   6.遮罩层插件:thickbox   7.编写jQuery插件 <1>编写插件的目的:给已经有的一些列方法或函数做一个封装,一遍在其他地方使用,方便后期维护和提高开发效率.   <2>三种类型的插件 a:封装对象方法的插件 jQuery

分享20个提升网站界面体验的jQuery插件_jquery

jQuery到目前为止还是非常流行,很多用户喜欢使用jQuery插件加进自己的网站上提升界面及交互性能,这是好的,但我发现很多网站使用的插件还是比较旧,而这点就不太好了,是应该要换换"新款"啦! 随便Web技术不停的进步,很多新鲜.创新并且实用的jQuery插件已经开发出来,大家应该多点关注这方面的资讯. 今天为大家整理20个提升网站界面的体验的jQuery插件,这些都是比较"新款"的代码,喜欢的请用到你的网站项目上吧! Card 友好的信用卡表单插件,模拟真实的信

2012年开发人员的16款新鲜的jquery插件体验分享_jquery

jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML.jQuery的格式设计帮助你获得一个文件,选择DOM元素,动画,处理事件,并开发Ajax程序设计人员能够根据需要创建一些高级别的jquery插件.使用这些插件方法可以创建高效强大的网页和Web程序.  保持学习最新的jQuery插件有时似乎是一个完整的工作.每隔一天,我们似乎可以发现一些新的东西,尖端的东西,有时我们发现的东西,是真正的创新和必要的对于我们的工作来说.下面是从2012年开始的新的和令人兴奋

小弟初写jquery插件,路遇难题,请大侠们搭把手啊

问题描述 小弟初写jquery插件,路遇难题,请大侠们搭把手啊 小弟想写个图片上传插件,才写了点,但测试发现了问题.不同的元素调用插件只有一个有效果,不知咋回事啊. $(function(){ $("#t1").LAYIMGUpload({ 'inputFileName':'orgLogo' }); $("#t2").LAYIMGUpload({ 'inputFileName':'orgLogo1' }); $("#t3").LAYIMGUplo

聊一聊jQuery插件uploadify使用方法_jquery

说说自己使用uploadify的一波三折的曲折过程:  之所以要选择uploadify,是源于自己先前使用过jQuery官网的上传文件插件,比较难用(页面写的代码比较多,IE下后台回传需要配置格式[不清楚其他上传插件是否也是这样]),而且一直有IE9上传不成功的问题,到我离开上家公司的时候也一直没有解决这个问题(可能是本人比较low的原因吧).所以在使用插件之前先调研了一下.uploadify提供两个版本,flash的uploadify和html5的uploadFive.文档还是比较齐全的,网上

分享平时整理收集的11款jQuery插件,很好很强大

☆ ☆ ☆ ☆ ☆ jQuery表单验证插件 jQuery表单验证插件是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性,使用量也是最多的一种表单验证方法.经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评. jQuery-File-Upload插件 jQuery- File-Upload插件支持多文件上传,拖拽文件上传,进度条,预览图片.视频和音频. 支持跨域上传,分块上传和可恢复的文件上传和客户端图像调整.可以在支持标准HTM

jQuery插件集合:帮助你打造不同的网页特效

文章简介:年终总结]2012年开发人员应该尝试的16款新鲜的jQuery插件. jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML.jQuery的格式设计帮助你获得一个文件,选择DOM元素,动画,处理事件,并开发Ajax程序设计人员能够根据需要创建一些高级别的jquery插件.使用这些插件方法可以创建高效强大的网页和Web程序. 保持学习最新的jQuery插件有时似乎是一个完整的工作.每隔一天,我们似乎可以发现一些新的东西,尖端的东西,有时我们发现的东西,

jQuery插件资源:WEBJX收集自适应jQuery插件

文章简介:帮助你构建自适应布局的15款优秀 jQuery 插件. 自适应设计(Responsive Layouts)是时下网页设计领域最热门的话题之一,自适应设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.下面是收集的15款优秀的自适应 jQuery 插件,希望这些插件能够帮助到您. 01. Slides Slides 是一款优秀的幻灯片插件,能够帮助开发者制作出优雅的幻灯片效果. 02. FlexSlider 另一款优秀的幻自适应幻灯片插件,支