jquery复习之路---常用插件

插件是以jquery的核心代码为基础,编写出符合一定规范的应用程序,并将程序进行打包,调用时,仅需要打包含该打包的js文件即可。
插件的调用:第一步在页面中导入包含插件的js文件(放在jq库文件之后);
自定义插件
封装jq插件分三种：1，封装方法插件;2，封装函数插件； 3，选择器插件(基本不用);

一，封装方法插件，开发插件的首选

封装一个方法插件实际是一个对象插件, 该类插件首先通过jQuery选择器获取对象，并为对象添加方法，然后将方法进行打包,封装成一个插件这种插件极易调，也很方便的使用jQuery中的选择器，因此成为开发插件的首选；
$(selector).方法插件();

二，封装函数插件

封装函数插件是一个类级别的插件,该插件的特点是能直接使用jQuery添加静态方法，并可以将函数置于jQuery命名空间中，如$.trim()和$.ajax()全局性的函数都是以内部插件的形式插入jQuery内核中;

三，插件的封装原则

jquery插件命名必须以jQuery.[插件名].js原则，以区分其他js文件，
1：如果是对象级别的插件，所有的方法必须依附于jquery.fn对象主体；
2：如果是类级别的插件，所有的方法都应依附于jquery对象;
在插件的内部，this代表的是jquery选择器所获取的对象，而非传统意义上的对象的引用；在插件内部的代码中可以使用this.each()遍历所有的元素；无论是对象级别的插件还是类级别的插件结尾处都应以:分号结束，否则在文件压缩时有错；在编写jquery插件代码中，使用jQuery不去使用$；
在编写对象插件时，使用jQuery.fn.extend()方法进行功能扩展；
在编写类级别插件，使用jQuery.extend()方法进行扩展；

四，对象级别插件的开发
1, 功能描述：在列表<ul>元素中,鼠标在表项li元素移动时,可以自定义其获取焦点（focus）时的背景颜色，即设置表项li元素选中时的背景颜色。
2,框架搭建：新建一个js文件,命名为jquery.lifocuscolor.js;并在文件中使用$.fn.extend()完成框架的搭建;

;(function(jQuery){
        jQuery.fn.extend({

          "liFocusColor":function(param_value){

              //各种默认属性或者参数的设置
              var def_color = "#ccc";//默认获取焦点的颜色;
              var lst_color = "#fff";//默认丢失焦点的颜色;
               //如果设置的颜色不为空,则使用设置颜色,否则使用默认颜色
              param_value = (param_value == undefined) ? def_color : param_value;
              //遍历列表项<li>中的全部元素
              jQuery(this).find("li").each(function(){

                  //插件实现的代码
                   jQuery(this).on("mouseover",function(){
                     //获取鼠标焦点事件
                        jQuery(this).css("background-color",param_color)
                           })

                  jQuery(this).on('mouseout',function(){
                      //失去鼠标焦点事件
                         jQuery(this).css("background-color",lst_color) 
                         })

                    })
                  return jQuery(this);//返回jQuery对象,保持链式操作;
              }   
         })
})(jQuery);

插件的调用

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.12.2.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.liFocusColor.js"></script>
$("#ul").liFocusColor();//调用自定义的插件
//$("#ul").liFocusColor("red");传递一个颜色参数

五，类级别插件的开发
1，功能描述：新增两个类级别的全局函数,分别用于计算两个数之和与两个数只差,并将结果返回调用的页面中;
2，框架搭建：新建一个js文件,命名为jquery.twoaddresult.js，并在文件中使用$.extend()方法完成框架的搭建;

;(function(jQuery){
       $.extend({
      "twoAddResult":function(){
        "addNum":function(pram_value1,pram_value2){
         //插件实现的代码
            //参数没有就默认为0
            pram_value1 = (pram_value1==undefined)? 0 : pram_value1;
            pram_value2 = (pram_value2==undefined)? 0 : pram_value2;
            var result = parseFloat(pram_value1)+parseFloat(pram_value2);
            return result;
        },
        "subNum":function(pram_value1,pram_value2){
            //参数没有就默认为0
            pram_value1 = (pram_value1==undefined)? 0 : pram_value1;
            pram_value2 = (pram_value2==undefined)? 0 : pram_value2;
            var result = parseFloat(pram_value1)-parseFloat(pram_value2);
            return result;
        }               
                    }
           })
})(jQuery);

插件的调用

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.12.2.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.twoAddResult.js"></script>
var addResult = $.addNum($("input[name='text1']").val(), $("input[name='text2']").val() );
var subResult = $.subNum($("input[name='text3']").val(),
$("input[name='text4']").val() );