A simple example of the extended interface of jquery

As a lightweight JS framework, jquery has its unique advantages. A lot of web programmers are bored with it. In this framework, in addition to the rich client processing capabilities, animation features. It also provides a very customizable extension interface to facilitate more people to develop and expand jquery. Show this interface in a simple example. I think this is enough to make a lot of people understand the way. The following example refers to the API from jquery.

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　});

The example is used to add a new function in jquery, which is a static function.

The call is as follows:

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

The same is true if the function extension functions for a component are also simple. For example, you want to extend the function of the textbox so that it is highlighted when the focus is obtained, and the highlight is canceled when the focus is lost. Of course, the effect of highlighting can be implemented using CSS, so you can invoke the name of a color as a parameter. The code is as follows:

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

The call is as follows:

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