老师对与教铺中Jquery插件的内容

这个教辅的内容是本课程的拓展内容，是关于插件编写的，首先，假设我们有html结构如下：

<ul id="catagory">
    <li><a href="#">首页</a></li>
    <li><a href="#">免费课</a></li>
    <li><a href="#">职业路径</a></li>
    <li><a href="#">实战</a></li>
</ul>

假设我们要实现当光标移动到a标签上时，a标签向右移动一段距离，离开时a恢复位置，实现方法如下：

$(document).ready(function() {
    $("#catagory a").hover(function() {
        $(this).animate({ paddingLeft: "50px" }, { queue: false, duration: 500 });
    }, function() {
        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
    });});

现在，将这个方法进行扩展，写成jQuery插件的形式，以后也能在别的项目中使用，并且可以方便的更改一些属性值，来看看jQuery插件的写法：

1、首先要了解jQuery插件的结构

 $.fn.extend方法编写插件，应该是一个比较好的结构：

//为避免冲突，将我们的方法用一个匿名方法包裹起来
(function($) {
    //扩展这个方法到jquery
    $.fn.extend({
        //插件名字
        pluginname: function() {
            //遍历匹配元素的集合
            return this.each(function() {
                //在这里编写相应代码进行处理 
            });
        }
    });

 //传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"      
})(jQuery);

2、接下来，给插件中加入一些可以改变的属性，这样使用这个插件的人可以根据自己的需要来做一些更改，同时，提供相应的默认值：

(function($){  
  
    $.fn.extend({   
          
	//将可选择的变量传递给方法
        pluginname: function(options) {  
  
  
            //设置默认值并用逗号隔开
            var defaults = {  
                padding: 20,  
                mouseOverColor : '#000000',  
                mouseOutColor : '#ffffff'  
            }  
                  
            var options =  $.extend(defaults, options);  
  
            return this.each(function() {  
                var o = options;  
                  
                //这里编写相应代码 
                //可以像下边这样获取变量值 
                alert(o.padding);  
              
            });  
        }  
    });  
})(jQuery);

3、实现jQuery插件

(function ($) {
    $.fn.extend({
        //插件名称 - paddingList
        paddingList: function (options) {

            //参数和默认值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };

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

            return this.each(function () {
                var o = options;

                //将元素集合赋给变量 本例中是 ul对象 
                var obj = $(this);

                //得到ul中的a对象
                var items = $("li a", obj);

                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到动画队列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });

                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });

            });
        }
    });
})(jQuery);

4、使用插件

//使用插件
$(document).ready(function() {
    $("#catagory").paddingList({ 
    animatePadding: 30, 
    hoverColor: "Red" 
    });
});

jQuery插件的教辅主要是帮助大家拓展如何自己编写插件，jQuery 的插件开发模式主要有三种：

① 通过$.extend()来扩展jQuery

② 通过$.fn向jQuery添加新的方法

③ 通过$.widget()应用jQuery UI 的部件工厂方式创建

常用的是通过$.extend()来扩展jQuery这种方法。

希望可以帮到你！

这个文档的全部内容，辛苦老师了~可能它很简单，我确实想正确的了解一下，毕竟自己想可能会出错