Learn more about jquery Custom plugins

Original address:jquery Custom Plugin Learning

1, the method of defining plug-ins

Object-level plug-in extension , which means adding methods to instances of the jquery class,

Call: $ (selector). function name (parameter); $ (' #id '). Myplugin (options);

Define the way:

$.fn.extend ({"Function name": Functions (custom parameters) {//write plugin Code}}); or $.fn. Function name = function (options) {//write plug-in code here}

　　

class-level approach is to extend the method of the jquery class itself, adding new methods to it,

Call: $. Function name (arguments); $.add (3,4);

$.extend ({"Function name": Functions (custom parameters) {//write plugin Code}}); or a $. Function name =function (custom parameter) {//write plug-in code here}

　　

You will find that the difference between them is just a few fn, and Jquery.fn = Jquery.prototype,javascript The object's prototype property is interpreted as returning a reference to the object type prototype.

If A.prototype = new B (), the equivalent of A.prototype is an instance of B, a can use all the methods in B.

So here we are, not just the way to extend the object, so that the object can use the method we have defined.

For prototype, you can refer to this article: JS in the prototype

So what does extend mean? In our extend there is only one parameter,

"Function Name: Functions (custom parameters) {//write plug-in code here}

　　

At this point, our function is merged into the global object of jquery, which is equivalent to extending the method of the jquery class.

Because extend has multiple parameters, extend is used to merge parameters into a new parameter, such as

var result=$.extend ({},{name: "Tom", Age:21},{name: "Jerry", Sex: "Boy"}); The result is result={name: "Jerry", Age:21,sex: "Boy"}

　　

Refer to this article for extend: Jquery.extend function

See also: jquery's Extend and fn.extend

2, example analysis, define a plug-in with parameters.

Generally we will see in a lot of places, do not JS pollution of the global environment, in fact, or you define a variable, in your reference to other people's plug-in also defined, then the conflict, which involves the JS scope of the problem, we have to "encapsulate" the scope, so we know that a function of the scope is only in a function , but the function is executed and the variable is written off.

So here we have to use the immediate execution function, with a function of our definition of plug-in code wrapped up, so that a local scope, so as not to affect the global environment, about the immediate execution of the function, you can refer to this: JS (function () {...}) () immediately execute function comprehension

So, our writing will be:

(function ($) {$.fn.extend ({functions: Functionality (options) {}});}) (JQuery);

　　

I want to customize a pop-up layer plugin, you can set the background color, width and height, not set is the default.

First, in the HTML element, I want to set the button to click,

<a id= "Dialog" > click on the pop-up layer </a><div class= "dialog" ></div>

　　

In fact, the div.dialog here can be created dynamically, there is no. Dynamic creation can be referenced by: jquery– adding elements

$ (' body '). Append ($ (' <div></div> '). AddClass (' dialog '));//questions behind

　　

CSS styles are, of course, initially hidden.

. Dialog{width:300px;height:200px;background:green;position:absolute;left:50%;top:30%;margin-left: -150px; Display:none;}

　　

The last is to define the plugin JS

(function ($) {$.fn.extend ({dialog:function (options) {//$ (' body '). Append ($ (' <div></div> '). AddClass (' Dialog ')); Here is a question, if I create the element here dynamically, why do I have to click 2 times to see the effect? Do not understand, beg to inform. var setting = $.extend ({}, {background: ' green ', width:300, height:200}, Options); return This.css ({' Width ': Setting.width, ' height ': setting.height, ' background ': Setting.background}). Show (' Slow ');}}) (JQuery);

　　

The function of return this here is to make the plug-in method we define can be chained, that is, to maintain the link.

Inside the plug-in, this refers to a jquery object, not a normal DOM object. Because the DOM object is not a CSS () method, this is the method of the jquery object, then the jquery object should not be written as $ (this)? Here we change this to $ (this) as can be used, regarding the difference between $ (this) and this, can refer to: jquery in this and $ (this) difference, but I still do not know here with this and $ (this) why is the same?

The last call to initialize is ready.

$ (' #dialog '). Click (function () {$ ('. Dialog '). dialog ({background: ' Red ', width:500,height:100});});

　　

The effect can be seen in the code demo, above the question you want to give an explanation.

Also reference: Create a custom JQuery plugin

jquery Custom Plugins

Learn more about jquery Custom plugins