You can also encapsulate jquery and write your own jquery

Now large and large projects are developed with jquery, jquery is very useful, you might as well write your own jquery, understand the principles of the internal implementation of jquery. As in the previous essay, the object-oriented approach is used to encapsulate its own JS library.

1. Like jquery, the jquery $ () method inside. Can pass four different parameters such as:

$ ("") A string

There are three situations in the form of strings: $ ("#id"), $ (". Class"), $ ("P");

$ (function () {}), functions,

There's only one case, window.onload.

$ (this), object

function XQuery (Varg) {

This.elements = [];//is used to save the selected array.

Switch (typeof Varg) {case "function": bindevent (Window, "load", Varg); 　　Break Case "string": Switch (Varg.charat (0)) {case "#"://id Selector

var obj = document.getElementById (varg.substring (1)); 　　　　This.elements.push (obj); 　　　　Break Case ".":/ 　　　　/class Selector this.elements = Getelementsbyclassname (document,varg.substring (1)); 　　　　Break 　　　　default://Tag Selector this.elements = document.getElementsByTagName (Varg); 　　Break 　　} break; 　　Case "Object": This.elements.push (Varg); 　　Break }

}

Write a $ method similar to jquery

function $ (Varg) {

return new XQuery (Varg);

}

Here's how to add a variety of methods to an XQuery object using the prototype method:

Xquery.prototype = {

Click:function (FN) {

var i = 0;

for (i=0;i<this.elements.length;i++) {

Bindevent (This.elements[i], "click", FN);

}

i = null;//through the scope of JS we know that at this time I also have value, i = this.elements.length;, so we need to manually release I;

In order to implement the chain operation of jquery, we need to return the current object

return this;

},

Hover:function (fnover,fnout) {

var i = 0;

for (i = 0; i < this.elements.length; i++) {

if (fnover) {bindevent (this.elements[i], "mouseover", fnover); 　　　　　　} if (fnout) {bindevent (this.elements[i], "mouseout", fnout); } 　　　　}

return this; },

Css:function (Attr,value) {

if (arguments.length = = 2) {//Pass two parameters, set the style

for (var i = 0;i < this.elements.length;i++) {this.elements[i].style[attr] = value; }

} else{//pass in a parameter. In two cases, one is a string, one is a JSON form if (typeof attr = = "string") {return GetStyle (this.elemen TS[0],ATTR)} else{//passed in as JSON for (var i = 0;i < this.elements.length;i++) {fo 　　　　　　　　　　　　R (Var a in attr) {This.elements[i].style[a] = Attr[a]; 　　　　　　　　}} return this; 　　}}}, Extend:function (NAME,FN) {//xquery plugin extension xquery.prototype[name] = fn; },//.... Well, write so much, the other way to achieve the same,};

The traditional JS page can only have one window.onload = function () {};

The way you want multiple words to be bound with events.

function bindevent (obj, Ev, FN) {if (Obj.addeventlistener) {obj.addeventlistener (EV, function (e) {if (!fn.call (o 　　　　　　　　BJ)) {//When the method has a return value. 　　e.cancelbubble = true;//block Bubble e.preventdefault ();//block Default Event}}, False); 　　　　} else{//the low version of IE with the attchevent;    Obj.attachevent (' On ' +ev, function () {if (!fn.call (obj)) {event.cancelbubble = true;//prevents bubbling return false; Block default Event}}}}

Gets the style function GetStyle (obj,attr) {if (Obj.currentstyle) {return obj.currentstyle[attr];　 　} else{return getComputedStyle (Obj,false) [attr]; } }

Summary: XQuery only implements a very small part of the jquery function, in order to encourage themselves in the use of other people's framework at the same time, to understand the basic principle, can not do fool-style development.

You can also encapsulate jquery and write your own jquery