Home > Web Front-end > JS Tutorial > jquery plug-in development method (beginner)_jquery

jquery plug-in development method (beginner)_jquery

WBOY
Release: 2016-05-16 17:56:49
Original
1135 people have browsed it

jQuery provides two methods for developing plug-ins, namely:

jQuery.fn.extend(object);
jQuery.extend(object);

jQuery.extend(object ); To extend the jQuery class itself. Add new methods to the class.
jQuery.fn.extend(object); Add methods to jQuery objects.

What is fn. Looking at the jQuery code, it's not hard to find.

Copy code The code is as follows:

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


Original jQuery.fn = jQuery.prototype. You are definitely no stranger to prototype.

Although JavaScript does not have a clear concept of classes, it is more convenient to use classes to understand it.
jQuery is a very well-encapsulated class. For example, if we use the statement $("#btn1"), an instance of the jQuery class will be generated.

jQuery.extend(object); Add a class method to the jQuery class, which can be understood as adding a static method. For example:
Copy code The code is as follows:

$.extend({
 add: function(a,b){return a b;}
});


will add a "static method" for jQuery. , use this method,
$.add(3,4); //return 7

jQuery.fn.extend(object); To extend jQuery.prototype, you can add it to the jQuery class "Member functions". Instances of the jQuery class can use this "member function".
For example, we want to develop a plug-in to create a special edit box. When it is clicked, the content in the current edit box will be alerted. You can do this:
Java code
Copy code The code is as follows:

$.fn .extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //On the page:
$. fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //On the page:

$("#input1") is a jQuery instance. When it calls the member method alertWhileClick, it implements expansion. Each time it is clicked, it will pop up the current content in the editor.

In the real development process, of course you will not make such a novice plug-in. In fact, jQuery provides a wealth of methods for operating documents, events, CSS, Ajax, and effects. Combining these methods, you can develop Publish more Niubility plug-ins.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template