Article From:https://www.cnblogs.com/QYou/p/9967678.html

 

 

jQueryThere are two ways to develop plug-ins: 1.

jQuery.fn.extend();Or $.fn.extend

jQuery.extend();Or $.extend

jQuery.fn ($.fn)

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//….
//……
};

The original jQuery. FN = jQuery. prototype. It’s certainly not new to prototype. ·

Although JavaScript does not have a clear concept of classes, it is more convenient to understand them with classes.

jQueryIt’s a very well-encapsulated class, such as when we use the statement $(“#btn1”) to generate an instance of a jQuery class.

jQuery.extend(object)

Adding class methods to jQuery classes can be understood as adding static methods. Such as:

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

jQuery.extend([deep], target, object1, [objectN])  

Return value: Object

Summary

Extend an object with one or more other objects and return the extended object.

target,[object1],[objectN]  Object,Object,Object

target:An object, if the attached object is passed to this method, will receive new attributes, and if it is the only parameter, it will extend jQuery’s namespace.

object1:Objects to be merged into the first object.

objectN:Objects to be merged into the first object.

[deep],target,object1,[objectN]  Object,Object,Object,Object

deep:If set to true, merge recursively.

target:Object to be modified.

object1:Objects to be merged into the first object.

objectN:Objects to be merged into the first object.

Example: Merge settings and options, modify and return settings.

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar",age:"22" };
jQuery.extend(settings, options); 
console.log(settings);//{validate: true, limit: 5, name: "bar", age: "22"}

Example: Merge defaults and options without modifying defaults.

var empty={};
var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar",age:"22" };
jQuery.extend(empty,defaults, options); 
console.log(empty);//{validate: true, limit: 5, name: "bar", age: "22"}
console.log(defaults);//{validate: false, limit: 5, name: "foo"}
console.log(options);//{validate: true, name: "bar", age: "22"}

jQuery.fn.extend(object);

Expanding jQuery. prototype.To add “member functions” to the jQuery class. An instance of the jQuery class can use this “member function”.·

For example, we need to develop a plug-in to make a special edit box, when it is clicked, alert the contents of the current edit box. You can do this:

$.fn.extend({        
    alertWhileClick:function() {            
		$(this).click(function(){                 
			alert($(this).text());           
		});           
    },
    check: function() {
		return $(this).each(function() {
			this.checked = true;
		
		});
    },
    uncheck: function() {
		return $(this).each(function() {
			this.checked = false;
		});
    }     
});     
				
				
$("#testA a").alertWhileClick();
$( "input[type='checkbox']" ).check();

$(“#testA a”) For a jQuery instance, when it calls the member method alertWhileClick, it implements an extension, which pops up the content in the current edit each time it is clicked. ·

jQuery.extend() Calls do not extend methods to instances of objects, and methods that reference them need to be implemented through jQuery classes, such as jQuery. init (), while calls to jQuery. fn. extend () extend methods to prototypes of objects.So it’s important that when you instantiate a jQuery object, it has these methods, which are reflected everywhere in jQuery. JS

jQuery.fn.extend = jQuery.prototype.extend

You can extend an object to jQuery’s prototype, which is the plug-in mechanism. ·

(function($) {
    $.fn.tooltip = function(options) {};
    //Equivalent to VaRTooltip = {Function (options) {}}$. fn. extend (tooltip) = $prototype. eXtend (tooltip) =$. fn. tooltip(jQuery);

  

Leave a Reply

Your email address will not be published. Required fields are marked *