jQuery 插件学习笔记

最新推荐文章于 2022-09-23 13:42:20 发布

原创最新推荐文章于 2022-09-23 13:42:20 发布 · 417 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jquery插件 #扩展

web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了jQuery插件的基础知识，包括插件的分类、基本要点及使用闭包的技巧。通过实例展示了轮播图插件的实现过程，并讲解了如何利用jQuery.extend()方法设置插件的默认参数。

jQuery 插件学习笔记

标签（空格分隔）： jquery 学习笔记插件

jQuery 插件也称为扩展（Extension），jQuery的易扩展性，有许多经过无数人检验和完善的优秀插件，可以帮助用户开发，节约项目成本。

jQuery插件网站汇总：

jQuery特效库：优秀的插件库，不过是收费的
jQuery之家：免费的插件下载
jQuery官方：官网下载，不支持中文

如何使用插件

首先链接合适版本的jQuery版本和需要插件js文件

下面通过一个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/nivo-slider.css"/>
        <script src="js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.nivo.slider.pack.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
                *{
                margin: 0;
                padding: 0;
                list-style: none;
                border: 0;
            }
            #slider{/*图片的尺寸*/
                width: 938px; 
                height: 408px;
                margin:50px auto;
                position: relative;
                overflow: hidden;
            }
            #slider p img{
                display: block;
                width: 938px; 
                height: 408px;
                position: absolute;
                left: 0;
                top: 0;
            }
            .nivo-controlNav {/*隐藏123轮播按钮*/
                position: absolute;
                right: 30px;
                top: 30px;
                width: 20px;
                height: 20px;


            }
            .nivo-controlNav a{
                background: rgba(0,0,0,0.5);
                width: 20px;
                height: 20px;
                font-size: 10px;
                margin-bottom: 10px;
                text-align: center;
                line-height: 20px;
                border-radius: 50%;
                color: white;
                display: block;
            }
            .nivo-controlNav a.active{background: rgba(239,6,6,0.5);}
            .nivo-directionNav a{/*隐藏左右按钮里面的文字*/
                border:0px currentColor;
                width:22px;
                height:24px;
                text-indent:-9999px;
            }
        </style>
    </head>
    <body>
        <div id="slider">
            <p><a href="javascript:"><img title="#htmlcaption1" src="img/images/slider1.jpg"/></a></p>
            <p><a href="javascript:"><img title="#htmlcaption2" src="img/images/slider2.jpg"/></a></p>
            <p><a href="javascript:"><img title="#htmlcaption3" src="img/images/slider3.jpg"/></a></p>
            <p><a href="javascript:"><img title="#htmlcaption4" src="img/images/slider4.jpg"/></a></p>
        </div>
        <div id="htmlcaption1" class="nivo-html-caption">
                <p>插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习教程 </p>
            </div>

            <div id="htmlcaption2" class="nivo-html-caption">
                <p>插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习教程 </p>
            </div>

            <div id="htmlcaption3" class="nivo-html-caption">
                <p>插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习教程 </p>
            </div>

            <div id="htmlcaption4" class="nivo-html-caption">
                <p>插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习插件的学习教程 </p>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('#slider').nivoSlider({
                    effect: 'fade', //百叶窗效果
                    slices: 30, //图片被切割成30片
                    animSpeed: 500, //图片切换时间为0.5秒
                    pauseTime: 5000, //图片延时5秒，就是有5秒时间看图，一般设置5-7秒比较合适
                    controlNav: true, //是否需要外部按钮控制方向，这里我就不要了false
                    //directionNavHide: false,//是否需要鼠标移入显示左右按钮，false一开始就出现按钮    
                    startSlide: 0, //从第一个图开始轮播
                    directionNav: true, //是否使用左右按钮
                    captionOpacity: 0.5,

                    afterLoad: function(){
                        jQuery(".nivo-caption").animate({
                            top: "330"
                        }, {
                            easing: "easeOutBack",
                            duration: 10
                        })
                    },
                    beforeChange: function() { //图片切换前，nivo-caption放在上面-300px位置
                        jQuery(".nivo-caption").animate({
                            top: "500"
                        }, {
                            easing: "easeInBack",//弹力动画效果
                            duration: 10//掉下来的速度是500毫秒
                        })
                    },
                    afterChange: function() {//图片加载后，nivo-caption运动到60px，就像从上面掉下来一样
                        jQuery(".nivo-caption").animate({
                            top: "330"
                        }, {
                            easing: "easeOutBack",
                            duration: 500
                        })
                    }
                });
            });

        </script>
    </body>
</html>

以上代码实现了带有翻页效果的轮播图效果；

了解插件的使用，现在如何学会使用？
首先我个人觉得需要从了解如何编写插件开始。
下面通过几个部分：

插件的分类

1.封装对象方法的插件：
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。
2.封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。
3.选择器插件
个别情况下，会需要用到选择器插件

插件的基本要点

jQuery插件的文件名命名推荐为jquery.[插件名].js。
所有的对象都应当附加到jQuery.fn对象上。
可以通过this.each来遍历所有元素。
所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。
插件应该返回一个jQuery对象，以保证插件的可链式操作，除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。
避免在插件内部使用 $作为jQuery对象的别名，而应使用完整的jQuery来表示。也可以利用闭包的技巧来回避，使插件内部继续使用$ 作为jQuery的别名。

插件中的闭包

闭包：允许使用内部函数（即函数定义和函数表达式位于另一个函数的函数体内），而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部包含它们的外部函数之外被调用时，就会形成闭包。
利用闭包的特性，即可以避免内部临时变量影响全局空间，又可以在插件内部继续使用$作为jQuery的别名。
首先定义一个匿名函数function（），然后用括号括起来，通过（）运算符来执行，可以传递参数进去，供内部参数使用。

//为了更好的兼容性，开始前有个分号
；（function（$）{ $作为匿名函数的形参
    这里置放代码，可以使用$作为jQuery的缩写别名
}）（jQuery）；将jQuery作为实参传递给匿名函数

上段代码是一种常见的jQuery插件的结构。
接下来通过一段代码来简单介绍闭包的概念：

;(function($){
    //这里编写插件的代码，可以继续使用$作为jQuery的别名
    //定义一个局部变量foo，仅函数内部可以访问，外部无法访问
    var foo;
    var bar=function(){
        在函数内部的函数都可以访问foo，即便是在匿名函数的外部调用bar（）的时候，也可以在bar()的内部访问到foo，但在匿名函数的外部直接访问foo就做不到的
    }
})

所以对于插件的制作来说，只需要知道所有插件的代码必须放置在下面的代码内就可以了

；（function（$）｛
    //此处编写JQuery插件代码
｝）（jQuery）；

另外jQuery提供了两个用于扩展jQuery功能的方法：
这两个方法都接受一个参数，类型为Object。
jQuery.fn.extend()用于封装对象方法的插件。
jQuery.extend()用于其他方法的扩展，除了用于扩展JQuery对象之外，还有一个功能，就是用于扩展已有的Object对象。

代码如下：

jQuery.extend(target,obj1,….[objN])

用于一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。
jQuery.extend()方法经常被用于设置插件的一系列默认参数，如下面的代码：

    function foo(options){
        options=jQuery.extend({
            name:'bar',
            length:5,
            dataType:'xml'   /*默认参数*/
        },options);          /*options 为传递的参数*/
    }

如果用户调用foo()方法的时候，在传递的参数options对象中设置了相应的值，那么设置的值，否则使用默认值。代码如下：

    foo({name : 'a', length ： '4' ,dataType : 'json'});
    foo({name : 'a', length ： '4'});
    foo({name : 'a'});
    foo();

通过使用jQuery.extend()方法，可以很方便的用传入的参数来覆盖默认值。