Simple Example of jquery extension Interface

Jquery, as a lightweight JS framework, has its unique advantages. Many web programmers are happy. In addition to rich client processing and animation functions. It also provides custom extension interfaces for more people to develop extension jquery. Use a simple example to demonstrate this interface. I think this is enough for many people to understand the path. The following example references jquery APIs.

 

1 $. Extend ({
2 max: function (a, B ){
3 return A> B? A: B;
4 },
5 min: function (a, B ){
6 Return A> B? B:;
7 },
8 AVG: function (a, B ){
9 return A/B;
10}
11 });

 

 

This example adds a new function to jquery, which is a static function.

The call is as follows:

 

Jquery. Min (2, 3); // => 2
Jquery. Max (4, 5); // => 5

 

It is also very easy to extend functions for components. For example, you want to extend the textbox function so that it can be highlighted when the focus is obtained. If the focus is lost, the highlight is canceled. Of course, the highlighted effect can be implemented using CSS. Therefore, you can use a color name as a parameter. The Code is as follows:

 

 

 

$. FN. hightlight = function (colorname ){
This. Mouseover (function (){
Watermark (this).css ('background-color', colorname); // This pair is a reference to the component itself
});
This. mouseout (function (){
Watermark (this).css ('background-color ','');
});
}

The call is as follows:

 

$ (Function (){
$ ('# Test'). hightlight ('red ');
});