Jquery自定义插件

一、理解jquery

　　从《鸿观》节目看到一句话，”事物的真相只有一个，但每个事物都有很多不同的侧面，例如，在博物馆看一件展品的时候，你在不同的光线，不同的条件下去看，看到的展品也会有所不一样。有时候，反而从侧面去看可以得到更多细节，更多不一样的特点“。

　　从jQuery官方定义是：”jQuery is a fast, small, and feature-rich JavaScript library.“--它是一个快速、轻小、功能齐全的JavaScript 库。这是juerqy的真相。

　　我是从类的概念去理解的jQuery,把jquery看作一个很庞大的、功能很强大的类。这是一个侧面。尽管javascript没有类的概念，但是也可以类的角度去理解。

　　类就自然有它的属性和方法，比如人是一个类，它有姓名、年龄、身高等属性，也有吃饭、走路等方法。jQuery也是一样，它也具有属性和方法，它有$.type属性，有$.attr("")方法等。

　　通过$("div")就可以获得一个类的实例，就可以操作jQuery所有的属性和方法。如：$("div").blur( function () { alert("Hello World!"); } );是一个绑定事件。

二、jquery自定义的插件

　　jQuery以少量的代码更快地实现功能，比起原生的DOM操作，提高了很大的速度。尽管jQuery有着强大的属性和方法，但是也不可能完全满足每个开发者的需要。考虑到这一点，jquery就提供了开发人员自定义jquery的接口，以便提高jquery的灵活性和个性化。

　　jQuery实现自定义插件的方法有两种：（1）$.extend({abc:function(){}})  和  （2）$.fn.extend(abc:function(){});  第一种称为类级别的自定义函数，第二种称为对象级别的函数。

---------------------------------------------------------------------------------------------------------

　　第一种：类级别自定义函数

　　（1）定义js过程：

　　这是一个实现两个数之和功能的函数。类级别的函数，是直接插入到jquery内核中运行，最后加上分号避免压缩过程中出错。

  $.extend({//类别级的用extend()方法，直接插入jquery内核中
        "addNum":function(p1,p2){//引用时直接用$.addNum(p1,p2);
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResutlt = parseInt(p1)+parseInt(p2);
            return intResutlt;
        }
    });　　

（2）调用方法

　　直接是以$开头，就可以调用这个方法了。

　　$.addNum(1,2);//结果为3.

---------------------------------------------------------------------------------------------------------

　　第二种：对象级别自定义函数

　　　　　　要求在应用时，必须指定特定的对象。类似于$("#div").focusColor。

　　（1）定义js过程：

　　以下是的自定义js函数，是实现鼠标悬停时，改变底色，移开时，恢复原来底色，这样的一个功能。

$.fn.extend({
     "focusColor":function(li_col){
            var def_col = "#eee";//默认获取焦点色为灰色
            var lst_col = "#fff";//默认丢失焦点色为白色
            li_col = (li_col == undefined)?def_col:li_col;
            $(this).find("li").each(function(){//遍历li
                $(this).mouseover(function(){//鼠标移入事件
                    $(this).css("background-color",li_col);
                }).mouseout(function(){//鼠标移出事件
                    $(this).css("background-color",lst_col);
                });
            });
            return $(this);//返回jquery对象，保持链式操作
        }
 });

　　（2）调用过程：

　　需要指定特定的应用对象。例如应用在id为my_div的元素，可以这样应用：$("#my_div").focusColor("red");//填入一个红色为底色。

　　例二：

   jQuery.fn.setApDiv=function () {
        //apDiv浮动层显示位置居中控制
        var wheight=$(window).height();
        var wwidth=$(window).width();
        var apHeight=wheight-$("#apDiv").height();
        var apWidth=wwidth-$("#apDiv").width();
        $("#apDiv").css("top",apHeight/2);
        $("#apDiv").css("left",apWidth/2);
    }

调用方法：$("#apDiv").setApDiv();

-----------------------------------------------------------------------------------------------------------------

关于这两者的开发要点：

1、遵循严格的命名规范。格式如：jQuery.[插件名].js的规则。例如：jQuery.focusColor.js

2、对象级别的插件依附于jquery.fn主体对象；类别的插件依附于jquery对象。

3、必须以分号结束

4、访问元素用this.each

5、插件内部的this指代是jquery获取的对象，而不是传统意义的对象引用。

6、对象级别，用$.fn.extend()方法扩展；而类别级别的用$.extend()方法扩展。