JQuery plugin learning notes

Recently, I have been studying jQuery plug-ins. The purpose of writing plug-ins is to encapsulate a series of existing methods or functions so that they can be reused elsewhere for later maintenance.

In addition to providing a simple and effective way to manage elements and scripts, JQuery also provides an exceptional mechanism: to add its own methods and additional functions to the core module. With this mechanism, Jquery allows us to create our own plug-ins, improving our development efficiency.

Although a large number of javaScript function names and variable names are not allowed in the jQuery namespace. But it is still inevitable that some functions or variables will conflict with other jQuery plug-ins, so we are used to encapsulating some methods into another custom namespace.

Example 1:

1. Plug-in file MyFirstPlugin. js

Note: use $. extend () to combine the default value with the value passed in by the user. In this way, the user-defined value overwrites the default value. If the user does not define the value, it is customized by the system.

This. each (function () {adds a return before this. In this way, our chained operations are implemented.

(Function ($) {$. fn. textHover = function (options) {var defaultVal = {Text: 'hover event', ForeColor: 'red', BackColor: '# B9FDD8 '}; // default value var obj = $. extend (defaultVal, options); return this. each (function () {var selObject = $ (this); // obtain the current object var oldText = selObject. text (); // obtain the Text var oldBgColor = selObject.css ("background-color") of the current object; // obtain the background color var oldColor = selObject.css ("color") of the current object "); // obtain the color of the current object's font selObject. hover (function () {selObject. text (obj. text); // assign 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. Front-end 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 am the third DIV </div> </form>

3. JS Code

3.1 import jQuery library files

<Script src = "Scripts/jquery-1.4.1.min.js" type = "text/javascript"> </script> <! -- The jQuery file must be placed before the custom plug-in! Prevents errors from being reported when the custom plug-in references an object. -->

<script src="MyScripts/MyFirstPlugin.js" type="text/javascript"></script>

3.2 JS Code

<Script type = "text/javascript"> $ (function () {$ ('# div1'). textHover ({Text: 'hover the cursor over the first DIV... ', ForeColor: 'yellow', BackColor: 'red'}); $ (' # div2 '). textHover ({Text:' I am the second DIV... '}); $ ("# Div3"). textHover ({Text:' I am the third DIV... & Apos; CSS (& apos; background-color & apos;, & apos; # B1B0FE & apos;); // change the color when loading for the first time}. </script>

OK. Here, a simple plug-in is complete.