What do you know about jQuery plug-ins? Want to develop your own plug-ins? Come in!

First, understand the differences between two concepts: jquery (function () {}) and (function () {} (jQuery); jQuery (function () {}); and docunemt ). ready (function () {}); it means to execute ready () method 2 after DOM loading. (funtion () {}( jQuery );

First, understand two concepts
Differences between jquery (function () {}) and (function () {} (jQuery)
JQuery (function (){});
Write All
JQuery (docunemt). ready (function (){
});
It means to execute the ready () method after DOM loading.
2.
(Funtion (){
} (JQuery );
The actual execution of the () (para) anonymous method only passes the jQuery object.
Conclusion: jQuery (funtion () {}); is used to store the code of the DOM object. When the code is executed, the DOM object already exists.
It cannot be used to store development plug-in code. Because jQuery objects are not passed, jQuery. methodye is used externally.
The method cannot be called.
(Funtion (){
} (JQuery); used to store the code of the Development plug-in. The Code DOM does not necessarily exist during execution. Please be careful when executing the DOM operation code directly.

Second: the difference between $. extend and $. fn. extend
$. Extend (object); adds a new method to the class to extend the jQuery class itself.
$. Fn. extend (object); add a method to the jQuery object.
You must be clear about the differences between the two: Class extension and class instance extension!
Put a thing that is easy to understand:
JQuery. fn = jQuery. prototype = {
Init: function (selector, context ){//....
//......
};
Understand? Oh ~ So it turns out!
Let's take a test first: extend a method for the jquery class
$. Extend ({
Hialert: function (e) {alert (e );}
})
Call: $. hialert ('Hello alert ');
If you want to extend the instance type, you need to write the following code:
$. Fn. extend ({
Hialert: function (e) {alert (e );}
});
Call: $ (node). hialert () ;==> a class must be instantiated!
The following example shows how to set a style for a label that can be called an element node.
Before writing the plug-in, you must import the jquery library!
Plug-ins
(Function ($ ){
$. Fn. setFont = function (options ){
Var data = {
Color: "red ",
FontSize: "15px ",
FontWeight: "normal ",
FontFamiay: ""
}
Var ds = $. extend (data, options );
((This).css (ds );
}
}) (JQuery );
Body content

Sssss

Click
Call
$ ("# Btn"). click (function (){
$ ("# Show"). setFont ({color: "blue", fontSize: '30px '});
});
I will simulate the Writing Method of a jqueryplug-in. I do not recommend that you use this configuration as a metadata node. It would be better to use the built-in metadata (node object metadata .css ({}) method!

The development of this basic jquery plug-in is over ~~
Learn together! Make progress together!

From battlefield diaries _ LAMP brothers