JQuery plug-in development excellent tutorial (bringing jQuery to a higher level) _ jquery-js tutorial

This jQuery plug-in development tutorial is the most detailed one I have ever seen. Every explanation is very good. It is really a good reference for anyone who wants to enhance the plug-in, liu woyong's blog is the most successful part of jQuery. I think its scalability attracts many developers to develop plug-ins for it, thus establishing an ecosystem. This is like a big company competing to be a platform. Apple, Microsoft, Google, and other giants all have their own platforms and ecosystems.

Learning to use jQuery is not difficult, because it is easy to learn, and I believe that you will certainly use or be familiar with many of its plug-ins after getting started with jQuery. Writing a plug-in is a good choice if you want to increase your capabilities.

This tutorial may not be the best, but it must be the most meticulous.

JQuery plug-in Development Mode

In the software development process, a certain design pattern is required to guide the development. With the pattern, we can better organize our code, we also learned a lot of good practices from the models summarized by our predecessors.

According to the description of jQuery advanced programming, there are three main jQuery plug-in development methods:

Use $. extend () to extend jQuery
Add a new method to jQuery through $. fn
Use $. widget () to apply jQuery UI's component factory method to create
We usually use the second method for Simple plug-in development, which is relative to the third method. The third method is used to develop more advanced jQuery components. The components developed in this mode have many built-in jQuery features, such as the automatic saving of the status information of the plug-in, A variety of frequently used plug-ins are very considerate. I will not elaborate on them here.

The first method is too simple. It only adds a static method to the jQuery namespace or understood as jQuery. So we call $. the extend () function is directly called using the $ symbol ($. myfunction () without selecting the DOM element ($ ('# example '). myfunction ()). See the following example.

$. Extend ({sayHello: function (name) {console. log ('hello, '+ (name? Name: 'dude') + '! ') ;}}) $. SayHello (); // call $. sayHello ('wayou'); // call with Parameters

Running result:

In the code above, a sayHello function is added to jQuery through $. extend () and then called directly through $. Now you can think that we have completed a simple jQuery plug-in.

As you can see, this method is convenient to define some auxiliary methods. For example, a custom console outputs information in a specific format. Once defined, jQuery can call it wherever necessary in the program.

$. Extend ({log: function (message) {var now = new Date (), y = now. getFullYear (), m = now. getMonth () + 1 ,//! In JavaScript, the monthly value starts from 0. d = now. getDate (), h = now. getHours (), min = now. getMinutes (), s = now. getSeconds (), time = y + '/' + m + '/' + d + ''+ h + ':' + min + ':' + s; console. log (time + 'my App: '+ message) ;}}) $. log ('initializing... '); // call

However, this method cannot take advantage of jQuery's powerful selector. To process DOM elements and apply the plug-in to the selected elements, you still need to use the second development method. Most of the plug-ins you see or use are developed in this way.

Plug-in development

Next we will look at the second method of jQuery plug-in development.

Basic Method

Let's take a look at its basic format:

$.fn.pluginName = function() {  //your code goes here}

Basically, you can add a method to $. fn. The name is our plug-in name. Then our plug-in code is expanded in this method.

For example, if we convert the color of all links on the page to red, we can write this plug-in as follows:

$. Fn. myPlugin = function () {// here, this refers to the element selected by jQuery // example: $ ('A '), then this = $ ('A') this.css ('color', 'red ');}

Within the function defined by the plug-in name, this refers to the elements selected by the jQuery selector when we call the plug-in. this is generally a set of jQuery types. For example, $ ('A') returns the set of all a tags on the page, and the set is already of the jQuery packaging type, that is, when you operate on it, you can directly call other jQuery methods without using the dollar symbol to wrap it.

Therefore, in the above plug-in code, we call jQuery's css () method on this, which is equivalent to calling 'a'{.css ().

It is important to understand the meaning of this in this place. In this way, you can understand why the jQuery method can be commercially used. In other places, this is called only when jQuery is repackaged. Beginners are easily confused by the value of this, but it is not difficult to understand it.

Now we can go to the page and try our code. put several links on the page. after calling the plug-in, the link font turns red.

 
 

  
  
My weibo
  
  
Http://www.cnblogs.com/Wayou/> my blog
  
  
My little station
 
 
This is the p tag, not the tag, and I will not be affected.