jquery Custom Plugins

I. Understanding of jquery

From the "Hung View" program to see a sentence, "The truth of Things only one, but everything has a lot of different sides, for example, in the museum to see an exhibit, you in different light, different conditions to see, see the exhibits will also have a difference." Sometimes, instead of looking at the side, you can get more details, more different features. "

The official definition from jquery is: "jquery is a fast, small, and Feature-rich JavaScript library." --It's a fast, light, full-featured JavaScript library. This is the truth of juerqy.

I understand jquery from the concept of class, and think of jquery as a huge, powerful class. This is a side. Although JavaScript does not have the concept of class, it can be understood in terms of class.

Class naturally has its properties and methods, such as a person is a class, it has a name, age, Height and other properties, there are eating, walking and other methods. The same is true of jquery, which also has properties and methods, it has $.type properties, has a $.attr ("") method, and so on.

With $ ("div") you can get an instance of a class, and you can manipulate all the properties and methods of jquery. Such as:$("div").blur( function () { alert("Hello World!"); } );是一个绑定事件。

Ii. jquery Custom Plugins

jquery implements functionality faster with a small amount of code, which is much faster than native DOM operations. Although jquery has powerful properties and methods, it is impossible to fully meet the needs of every developer. With this in mind, jquery provides a developer's interface to customize jquery to improve the flexibility and personalization of jquery.

jquery implements custom plug-ins in two ways: (1) $.extend ({abc:function () {}}) and (2) $.fn.extend (Abc:function () {}); The first is called a class-level custom function, and the second is called an object-level function.

　

---------------------------------------------------------------------------------------------------------

First type: Class-level custom functions

(1) Define the JS process:

This is a function that implements the SUM function of two numbers. Class-level functions, which are inserted directly into the jquery kernel and run in the end, with semicolons to avoid errors during compression.

  $.extend ({// class-level with extend () method, inserted directly into the jquery kernel        "addnum":function (P1,P2) {// referenced directly with $.addnum (P1,P2);            P1 = (P1 = = undefined)? 0 : p1;             = (P2 = = undefined)? 0 : p2;             var intresutlt = parseint (p1) +parseint (p2);             return intresutlt;        }    });　　

(2) Calling method

This method can be called directly starting with $.

$.addnum;//The result is 3.

---------------------------------------------------------------------------------------------------------

Second type: Object-level custom functions

Requires that a specific object be specified when applied. Similar to $ ("#div"). Focuscolor.

(1) Define the JS process:

The following is a custom JS function, is to achieve the mouse hover, change the background, move away, restore the original background, such a function.

$.fn.extend ({"Focuscolor":function(li_col) {varDef_col = "#eee";//The default gets the focus color to gray            varLst_col = "#fff";//default missing focus color is whiteLi_col = (Li_col = = undefined)?Def_col:li_col; $( This). Find ("Li"). each (function(){//Traverse Li$( This). MouseOver (function(){//Mouse Move-in events$( This). CSS ("Background-color", Li_col); }). mouseout (function(){//Mouse Out Event$( This). CSS ("Background-color", Lst_col);            });            }); return$( This);//returns the JQuery object, keeping the chain-action        } });

(2) Call procedure:

You need to specify a specific Application object. For example, an element that is applied on an ID of my_div can be applied like this: $ ("#my_div"). Focuscolor ("red");//fill in a red color for the background.

Example two:

Jquery.fn.setapdiv=function () {
Apdiv floating Layer Display position centering control
var wheight=$ (window). Height ();
var wwidth=$ (window). width ();
var apheight=wheight-$ ("#apDiv"). Height ();
var apwidth=wwidth-$ ("#apDiv"). width ();
$ ("#apDiv"). CSS ("top", APHEIGHT/2);
$ ("#apDiv"). CSS ("left", APWIDTH/2);
}

Call Method: $ ("#apDiv"). Setapdiv ();

--------------------------------------------------------------------------------------------------------------- --

On the development of both of the points:

1, follow the strict naming norms. Format such as:jquery.[ plug-in name ].js 's rules. Example:jQuery.focusColor.js

2. The object-level plug-in is attached to the Jquery.fn Principal object, and the category plugin is attached to the jquery object.

3. Must end with a semicolon

4. Access elements with This.each

5, the inside of the plug-in is the object that jquery gets, not the traditional meaning of the object reference.

6, object level, extended with $.fn.extend () method, and category level is extended with $.extend () method.

jquery Custom Plugins