• 简单实现编写自己的jQuery插件


    用了这长时间的jQuery,一直也没怎么写过jQuery插件,今天简单实现俩个插件,已巩固下基础知识。

    这里只阐述如何编写自己的插件,至于要实现什么功能,要因人而异了...好了,下面开始...

    jQuery插件主要分为三种

    1、封装对象方法的插件

    2、封装全局函数的插件

    3、扩展选择器的插件

    这里只编写前俩种,即比较常见的..

    大多数插件都是已这种形式编写的:

      (function ($) {  

    /*  这里放置代码 */

     })(jQuery);

    这样的好处是函数内部依然可以使用$作为jQuery的别名,而不影响到其他库使用$

    jQuery提供了俩个扩展用于编写插件

    $.fn.extend({});用于扩展第一种

    $.extend({});用于扩展第二种

    以下为实现效果截图和代码

    <!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><title></title>

    <style type="text/css">

     li  { border: 1px solid #000; cursor: pointer; 200px; display: block; }   

    </style> 

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>   

    <script type="text/javascript">
            (function ($) {      

        $.fn.extend({    

          "chgSC": function (options) {               

                options = $.extend({ FontSize: "100px", Color: "red" }, options);   //这里用了$.extend方法,扩展一个对象

                               return this.hover(function () {   //return为了保持jQuery的链式操作

                       $(this).css({ "fontSize": options.FontSize, "color": options.Color });

                }, function () {               

                                  $(this).css({ "fontSize": "", "color": "" });  

                });               

                              }           

                    });


                $.extend({  

            "urlParam": function () {                 

                var pageUrl = location.search;               

                    if (pageUrl != "")     

                                 return pageUrl.slice(1);         

                        else                     

                             return "没有参数";  

                }  

            });


            })(jQuery);


            $(function () {           

        $("li").chgSC({ FontSize: "130px" });     

             alert($.urlParam());     

            });
        </script>

    </head>

    <body>   

    <ul>       

    <li>1</li>     

    <li>2</li>     

    <li>3</li>   

    <li>4</li>       

    <li>5</li> 

    </ul>

    </body>

    </html>

  • 相关阅读:
    cvpr热词云
    第八周总结
    从小工到专家阅读笔记01
    【Spring实战4】10--搭建SpringMVC环境
    【Spring实战4】09---构建Spring web
    【Spring实战4】08---面向切面AOP
    读书
    【Spring实战4】07---Bean的作用域
    【Spring实战4】06---装配Bean(xml)
    【Spring实战4】05---装配Bean(Java)
  • 原文地址:https://www.cnblogs.com/ygm125/p/2021575.html
Copyright © 2020-2023  润新知