zoukankan      html  css  js  c++  java
  • jquery插件

    1创建jQuery插件,基本的格式是上面这段代码:

    (function ($)
    {
    //add code here
    })(jQuery) 

    我们怎么理解?
    第一步:function ($){}定义了一个匿名的函数,有一个参数,$是参数名,和其他的参数名没什么区别。
    第二步:(function ($){})(jQuery)
    我 们要执行一个匿名函数的时候,通常用var func = function ($) { },然后func(参数)这样的形式。这里func就是一个Function对象。但更简洁的(function ($) {}),这时用括号,也同样返回括号的内容,也是一个function对象。我们再执行就可以了:(function ($) {})(jQuery)
    第三步:这时我们实际上是执行上面定义的匿名函数,执行的时候为该匿名函数提供一个参数值:jQuery。
    第四步:所以最终上面的表达等价于:
    var func = function($) { };
    func(jQuery);
    即定义匿名函数,并以jQuery为参数执行一次。

    这里的作用是什么呢?
    1、解决$符号冲突问题
    jQuery中我们用$来代替jQuery,这是为了简化写法。但$这个符号有时候会冲突。
    在上面匿名函数的代码中,我们可以习惯性的用$来写,但执行的时候会用jQuery来代替,这就避免了变量的冲突。
    2、解决闭包问题:
    一般直接写在脚本里的函数,执行后其中未销毁的变量是继续存在,并能够正常访问的。这个和我们一向理解的函数私有变量是不符的。
    但我们用这种方式,将需要的所有函数都包在这个匿名函数里,则其中的局部变量,在外部将不能访问,变相的起到了创建私有的局部变量的作用。只有this.开头的那些成员,才是插件外部可以访问的。

    原文:http://www.poluoluo.com/jzxy/201110/145334.html

    2

    jQuery如此流行,各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!

    嗨,美女,这是我写的一个jQuery插件!

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好。而前端开发过程中,JavaScript技能又是必 不可少的。所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:“嗨,美女,用这个吧。这是我写的一个 jQuery插件。”我想基本上你的人生大事就能很快解决。

    先想好做个什么功能

    这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些。不要想一口就吃个胖子,咱也吃不了。咱还是 捡个瘦的下手吧。但是,这个功能也不能太无聊,如果无聊到几乎没用处,就算做好了也是扔到马桶里,不会持续更新,也便不会持续进步了。

    我最终选择的是:美化表格,让表格的奇偶行颜色不同,然后鼠标移到某行上,某行可以高亮显示。功能简单又实用,不错,不错。呵呵~~

    不急着写,先想想实现原理

    还不急,先想想实现原理。必要的时候,先写出简单的实现的原型。

    我的这个美化表格的例子,实现原理倒是简单,无非就是找到表格的奇偶行,然后添加不同的class,活动行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再去掉这个class即可。

    一个通用的框架

    在动手写自己的jQuery插件之前,自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行,那咱也把这框架照搬过来吧。

    (function($){
        $.fn.yourName = function(options){
            //各种属性、参数
            }
            var options = $.extend(defaults, options);
            this.each(function(){
            //插件实现代码
            });
        };
    })(jQuery);

    有了这个,咱就可以往里面套东西了。

    名号、参数和属性

    好不容易开始闯荡江湖了,一定要有一个响亮的名号才行,这样走在江湖上,才能够屌,够威风。不信,你听听人家“中国牙防组”!所以,咱这里一定要起个响亮的名号,一定要简单、明了、够权威。所以,决定了,就叫做“tableUI”了!

    参数和属性也很简单,无非就是三个class的名称。就叫做:evenRowClass、oddRowClass和activeRowClass吧。

    所以,上面的框架,咱就把上半身给填上了。

    (function($){
        $.fn.tableUI = function(options){
            var defaults = {
                evenRowClass:"evenRow",
                oddRowClass:"oddRow",
                activeRowClass:"activeRow"            
            }
            var options = $.extend(defaults, options);
            this.each(function(){
                //实现代码
            });
        };
    })(jQuery);

    这里重点说一下这一句:

    var options = $.extend(defaults, options);

    看上去很屌的一句,其实就是合并多个对象为一个。这里就是,如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。想进一步了解的朋友,可以参考jquery的官方文档: http://api.jquery.com/jQuery.extend/

    开始下半身吧

    ok,上半身填补完了,咱就可以填补下半身吧。无非就是找到基数行和偶数行(感谢jQuery提供了类似tr:even这种写法,使其及其简单),然后添加上相应的class。然后再给所有的tr,绑定mouseover和mouseout事件即可。下半身代码如下:

    (function($){
        $.fn.tableUI = function(options){
            var defaults = {
                evenRowClass:"evenRow",
                oddRowClass:"oddRow",
                activeRowClass:"activeRow"            
            }
            var options = $.extend(defaults, options);
            this.each(function(){
                var thisTable=$(this);
                //添加奇偶行颜色
                $(thisTable).find("tr:even").addClass(options.evenRowClass);
                $(thisTable).find("tr:odd").addClass(options.oddRowClass);
                //添加活动行颜色
                $(thisTable).find("tr").bind("mouseover",function(){
                    $(this).addClass(options.activeRowClass);
                });
                $(thisTable).find("tr").bind("mouseout",function(){
                    $(this).removeClass(options.activeRowClass);
                });
            });
        };
    })(jQuery);

    最重要的一步!

    也许有些朋友觉得这样就算是完成了。但是切切相反,我们还有最重要的一步没有完成,那就是一定要在插件上方,写上插件的名称、版本号、完成日期、作者,作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。

    /*
     * tableUI 0.1
     * Copyright (c) 2009 JustinYoung  http://justinyoung.cnblogs.com/
     * Date: 2010-03-30
     * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
     */
    (function($){
        $.fn.tableUI = function(options){
            var defaults = {
                evenRowClass:"evenRow",
                oddRowClass:"oddRow",
                activeRowClass:"activeRow"            
            }
            var options = $.extend(defaults, options);
            this.each(function(){
                var thisTable=$(this);
                //添加奇偶行颜色
                $(thisTable).find("tr:even").addClass(options.evenRowClass);
                $(thisTable).find("tr:odd").addClass(options.oddRowClass);
                //添加活动行颜色
                $(thisTable).find("tr").bind("mouseover",function(){
                    $(this).addClass(options.activeRowClass);
                });
                $(thisTable).find("tr").bind("mouseout",function(){
                    $(this).removeClass(options.activeRowClass);
                });
            });
        };
    })(jQuery);

    原文:http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html

  • 相关阅读:
    PAT A1094 The Largest Generation (25 分)——树的bfs遍历
    PAT A1055 The World's Richest (25 分)——排序
    PAT A1052 Linked List Sorting (25 分)——链表,排序
    PAT A1076 Forwards on Weibo (30 分)——图的bfs
    辅导员
    辅导员面试
    C程序设计
    Excel VBA 基本概念
    Excel函数
    导入excel表的数据到数据库ssh
  • 原文地址:https://www.cnblogs.com/wang7/p/2826068.html
Copyright © 2011-2022 走看看