Jquery plug-in learning example 1 plug-in production instructions and tableUI optimization

Jquery plug-in learning example 1 plug-in production instructions and tableUI optimization_jquery

WBOY

Release： 2016-05-16 18:30:44

Original

1011 people have browsed it

1. Let’s start with the jQuery production method. jQuery provides two methods for developing extensions, namely:
jQuery.extend(object); To extend the jQuery class itself, add new methods to the class.
jQuery.fn.extend(object); Add methods to jQuery objects.
1.1, jQuery.fn.extend(object):
You can refer to the jquery reference manual for examples:

Copy code The code is as follows:

 
$.fn.extend({ 
check: function() { 
return this.each(function() { this.checked = true; }); 
}, 
uncheck: function() { 
return this.each(function() { this.checked = false; }); 
} 
}); 

Use:

Copy code The code is as follows:

 
$(" input[type=checkbox]").check(); 
$("input[type=radio]").uncheck(); 

1.2, jQueryjQuery.extend(object)
Extend the jQuery object itself. Used to add new functions to the jQuery namespace.
jQuery code:

Copy code The code is as follows:

 
$.extend({ 
min: function(a, b) { return a < b ? a : b; }, 
max: function(a, b) { return a > b ? a : b; } 
} ; >$.min(2,3); // => 2 
$.max(4,5); // => 5 

2. TableUI specific plug-in examples The code is as follows:

Copy code

The code is as follows:

 
/* 
* tableUI 0.2 

* Let’s not write about the copyright, haha
* Date: 4/1/2010
* Using tableUI can easily display the table prompts for user experience. The first function provided is the color alternation of odd and even rows, which will be highlighted when the mouse is moved up

* Version 0.2 has made some optimizations for the "Political Commissar" based on 25 tips. For learning purposes, please correct me. */ (function($) { $.fn.tableUI = function(options) { //Default parametersvar defaults = { evenRowClass: "evenRow" ,

oddRowClass: "oddRow",

activeRowClass: "activeRow" 
}; 
//Override the default value with the passed parameters 
options = $.extend(defaults, options); 
//Table object
var thisTable = $(this); 
//Add odd and even row colors
thisTable.find("tr:even").addClass(options.evenRowClass); 
thisTable.find("tr:odd").addClass(options.oddRowClass); 
//Bind mouse movement events, it is not necessary to bind events to each row. 
thisTable.live("mouseover", function(e) { 
//Get the parent tr of the target object pointed by the mouse 
$(e.target).parent().addClass(options.activeRowClass); 
//Prevent event bubbling
return false; 
}).live("mouseout", function(e) { 
$(e.target).parent().removeClass(options.activeRowClass); 
return false; 
}); 
}; 
})(jQuery); 