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

  • 相关阅读:
    数据库建表的时候报 “1215 Cannot add foreign key constraint”
    Maven项目中提示:Eclipse “cannot be resolved to a type” error
    数据表设计的几个简单原则
    使用brew安装软件
    linux如何设置用户权限
    前端页面——Cookie与Session有什么区别
    Git Push 避免用户名和密码方法
    $GLOBALS['HTTP_RAW_POST_DATA'] 和$_POST的区别
    PHP获取POST的原始数据的方法
    PHP底层的运行机制与原理
  • 原文地址:https://www.cnblogs.com/wang7/p/2826068.html
Copyright © 2011-2022 走看看