jquery Plugin Learning Notes

in the recent study of jquery plugins, The purpose of the plug-in is to provide a package of existing methods or functions that can be reused in other places to facilitate later maintenance.

In addition to providing a simple and efficient way to manage elements and scripts, jquery also provides an exception to the mechanism of adding its own methods and additional functionality to the core modules. With this mechanism, jquery agrees that we create our own plugins to improve our efficiency in the development process.

Although in the jquery namespace, we prohibit the use of a large number of JavaScript function names and variable names. However, it is still inevitable that some function or variable names will conflict with other jquery plugins. So we are used to encapsulating some methods into a namespace that we define ourselves.

The first Demo sample:

1. plugin file myfirstplugin.js

Note: Use $.extend () to combine the default values with the values that the user passed in, This way, the user's own defined values are overwritten by the default user values. Assuming that the user does not define a value, it is defined by the system itself.

This.each (function () {This adds a return to the front. This enables us to chain-Operate .

(function ($) {$.fn.texthover = function (options) {var defaultval = {Text: ' Mouse hover event ', F        Orecolor: ' Red ', BackColor: ' #B9FDD8 '};        Default value var obj = $.extend (defaultval, Options);  Return This.each (function () {var selobject = $ (this);  Gets the current object var oldtext = Selobject.text (); Gets the current object's text var oldbgcolor = selobject.css ("Background-color"); Gets the background color of the current object var oldcolor = selobject.css ("color"); Gets the color of the current object's font selobject.hover (function () {selobject.text (obj).  Text); The assignment is Selobject.css ("Background-color", obj.                BackColor); SELOBJECT.CSS ("Color", obj.)             ForeColor);                }, Function () {selobject.text (OldText);                Selobject.css ("Background-color", Oldbgcolor);            SELOBJECT.CSS ("Color", oldcolor);        }            );    }); }}) (JQuery);

2. Foreground HTML code

<form id= "Form1" action= "#" >        <div id= "Div1" style= "width:400px; height:150px; Background-color: #B9FDD8;" >            Hello world</div>        <br/>        <div id= "Div2" class= "Textbar" style= "width:200px; height: 150px; Background-color: #F0FBFF; float:left; border:1px solid Gray; >            haha  I am the second DIV        </div>        <div id= "Div3" class= "Textbar" style= "width:200px; height:150px; Background-color: #EDEAFF; float:left; border:1px solid Gray; margin-left:2px; " >            haha  I'm a third DIV        </div></form>

3.JS Code

3.1 Importing jquery library files

<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>    <!-- jquery files must be placed in front of your own definition plugin! Prevent yourself from defining plug-ins referencing objects times wrong. -

<script src= "Myscripts/myfirstplugin.js" type= "Text/javascript" ></script>

3.2 JS Code

<script type= "Text/javascript" >        $ (function () {            $ (' #div1 '). Texthover ({                text: ' Mouse hovers above the first DIV ... ',                ForeColor: ' Yellow ',                BackColor: ' Red '            });            $ (' #div2 '). Texthover ({Text: ' I'm a second DIV ... '});            $ ("#div3"). Texthover ({Text: ' I'm a third DIV.
。。
'} '). css ("Background-color", "#B1B0FE");  change its color when first loaded        });</script>

OK, here, a simple plugin is finished.

jquery Plugin Learning Notes