JQuery的扩展接口简单示例

  JQuery作为一个轻量级的JS框架,有着它独到的优势。很多web程序员都乐此不疲。在这个框架中,除了拥有丰富的客户端处理功能、动画功能外。它更是提供了很自定义扩展接口,方便更多的人来开发扩展JQuery。把这个接口用一个简单的例子演示一下。我想,这足以让许多人了解其中之道了。以下示例引用自JQuery的API。

 

 1  $.extend({
 2      max:  function (a, b) {
 3           return  a  >  b  ?  a : b;
 4      },
 5      min:  function (a, b) {
 6           return  a >  b  ?  b : a;
 7      },
 8      avg:  function (a, b) {
 9           return  a  /  b;
10      }
11  });

 

 

  该示例用以在JQuery中增加新函数,该函数是静态函数。

  调用如下:

 

jQuery.min( 2 , 3 );  //  => 2
jQuery.max( 4 , 5 );  //  => 5

 

  如果针对组件的功能扩展函数,同样也是很简单。比如,你想要扩展TextBox的功能,使到它在获取焦点时,高亮显示;失去焦点时,则取消高亮。当然,高亮的效果可以使用CSS来实现,因此,你可以用一个颜色的名称作为参数进行调用。代码如下:

 

 

 

$.fn.hightlight  =   function (colorName) {
    
this .mouseover( function () {
        $(
this ).css( ' background-color ' , colorName);    // this对是对组件自身的引用
    });
    
this .mouseout( function () {
        $(
this ).css( ' background-color ' '' );
    });
}
调用如下:

 

$( function () {
    $(
' #test ' ).hightlight( ' red ' );
});

 

你可能感兴趣的:(jquery)