Writing jquery Plugins-3

We know the same thing, and then we'll write our first JQ plugin.

Plug-in for encapsulating object methods

We write a plugin that sets and gets the color, we need to implement two functions

1. Set the color of the matching element

2. Gets the color of the matching element (the first of the element collection)

We use JQuery.fn.extend (), the code is as follows:

;(function ($) {    /**/}) (JQuery)

This is the outermost architecture, next;

   ;(Function ($) {        $.fn.extend ({            color:function (val) {                ///  code             }        });    }) (jQuery)

I'll add the corresponding code in there.

;(function ($) {        $.fn.extend ({            color:function (val) {                console.log (val)}                ; if (val = = undefined)                    {returnthis. css ('color') ;                }                     Else {                    returnthis. css ('color', Val);                }            }        });    }) (jQuery)

We use the JQ css () method and get the color value, the plug-in's this point is the JQ object, if the plug-in does not return a specific value or string, it should be made to be connected, to return this object directly, because the CSS () method defines the return object, directly return can;

Encapsulate our jq.color.js.

The page calls the JS

Console.log ($ ("div"). Color ());

Console.log ($ ("div"). Color ("red"));

Writing jquery Plugins-3