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

Source: Internet
Author: User
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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.