Explain some simple features of jquery using native JavaScript _javascript tips

General Introduction

Learn the flavor and use native JavaScript to implement some of the features in jquery

Define your own library of functions Lquery

The implementation of the $ () selector

jquery is object-oriented, so write your own object-oriented, look at the basic structure

Defines the Lquery object
function Lquery (larg) {
}
function LQ (larg) {return
 new Lquery (LARG);
}
CSS () method
lQuery.prototype.css = function () {};
HTML () method
lQuery.prototype.html = function () {};

The first way to write the $ (function) in jquery

Defines the Lquery object
function Lquery (larg) {
 //the type of the parameter is determined by the TypeOf function,
 switch (typeof larg) {case
 ' function ':
  //If this notation is used, the LQ is bound to the same functions, but only once
  //window.onload = Larg;
  break;
 }
}

If you write such a function, you have a problem.

LQ (function () {
  alert (1);
 });
 LQ (function () {
  alert (2);
 });

This will only pop ' 2 ', but it will pop up in jquery, so the above method is not right, we use the form of event binding to solve this problem

Binding event Functions Function
Lqbind (OBJ,EVENTNAME,FN) {
 //Standard browser
 if (obj.addeventlistener) {
 Obj.addeventlistener (Eventname,fn,false);
 } else{
 //IE browser
 obj.attachevent (' on ' +eventname,fn);
 }

You can use this call

Switch (typeof larg) {
 case ' function ':
  //If this notation is used, the LQ is bound to the same function, but only once
  //window.onload = Larg;
  break;
  Lqbind (window, ' Load ', larg);
  break;
 

Three methods for copying the $ ('. Div '), $ (' #div '), $ (' div ') in jquery

The difference between the three methods is the difference between the first character, so we can treat it differently depending on the first character.

First to copy the $ ('. Div ')

   '. Div ' case '
  . ':
  this.elements = GetClass (document,larg.substring (1));
   Break

Since Getelementsbyclassname () is a HTML5 method, it's not compatible like IE8, so we wrote a simple GetClass method ourselves.

 Gets the Class Property
function GetClass (obj,name) {
 var arr = [];
 var elems = obj.getelementsbytagname (' * ');
 for (Var i=0;i<elems.length;i++) {
 if (elems[i].classname = = name) {
  Arr.push (elems[i])
 ;
 }
 return arr;
}

Copy-write $ (' #div ')

  Case ' # ':
   this.elements.push (document.getElementById (larg.substring (1)));
   break;
   '. Div ' case '
  . ':

Copy-write $ (' div ')

Default:
 //getElementsByTagName Returns an array of classes nodelist, in order to prevent future trouble, to convert him to a
 //array
 this.elements = ToArray ( document.getElementsByTagName (Larg));
 Break

Since getElementsByTagName returns an array of classes nodelist, in order to prevent future trouble, to convert him to an array, custom a ToArray method

Converts an array of classes into a true array
function ToArray (lickarr) {
 var arr = [];
 for (Var i=0;i<lickarr.length;i++) {
 arr.push (lickarr[i]);
 }
 return arr;
}

Method of copying $ (object)

Window document
Case ' object ':
This.elements.push (LARG);
Break

Implementation of HTML ()

The HTML () method is divided into parameters and no parameters

HTML () method
lQuery.prototype.html = function (str) {
 if (str) {//set for
 (Var i=0;i<this.elements.length; i++) {
  this.elements[i].innerhtml = str;
 }
 } else{return
 this.elements[0].innerhtml;
 }
 return this;
};

Implementation of the On () method

Using the binding functions implemented earlier can be easily implemented

LQuery.prototype.on = function (EVENTNAME,FN) {
for (Var i=0;i<this.elements.length;i++) {
Lqbind (THIS.ELEMENTS[I],EVENTNAME,FN);
}
}

Implementation of the Click () and MouseOver () method

Using the On () method makes it easy to implement

The click () method
LQuery.prototype.click = function (fn) {
 this.on (' click ', fn);
 return this;
}
MouseOver () method
lQuery.prototype.mouseover = function (fn) {
 this.on (' mouseover ', FN);
 return this;
}

Implementation of the Hide () and show () methods

Hide () method
lQuery.prototype.hide = function () {for
 (var i=0;i<this.elements.length;i++) {
 This.elements[i].style.display = ' none ';
 }
 return this;
}
Show () method
lQuery.prototype.show = function () {for
 (var i=0;i<this.elements.length;i++) {
 This.elements[i].style.display = ' block ';
 }
 return this;
}

Implementation of hover () method

 Hover () method
 lQuery.prototype.hover = function (fnover,fnout) {
 this.on (' mouseover ', fnover);
 This.on (' mouseout ', fnout);
 return this;
 }

Implementation of CSS () method

Implement $ (' div '). css (' width ') and $ (' div '). css (' width ', ' 200px ')

LQuery.prototype.css = function (attr,value) {
 if (Arguments.length = 2) {for
 (var i=0;i< this.elements.length;i++) {
  this.elements[i].attr = value;
 }
 }
 if (arguments.length = = 1) {return
 getstyle (this.elements[0],attr);
 }
}

The GetStyle () method is defined to find a style other than the inline style

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

Implementation of attr () method

With a different approach to CSS ()

attr () method
lquery.prototype.attr = function (attr,value) {
 if (arguments.length = = 2) {//set for
 var i=0; i<this.elements.length;i++) {
  this.elements[i].setattribute (attr,value);
 }
 }
 else if (arguments.length = 1) {//Get return
 This.elements[0].getattribute (attr);
 }
 return this;
};

The realization of EQ () method

Implement $ (' div '). EQ (1)

Because the EQ () method returns an object that operates on many lquery methods, the returned object must be a Lquery object

 LQUERY.PROTOTYPE.EQ = function (num) {return
  LQ (This.elements[num]);
 

The implementation of index () method

Implement $ (' div '). Index () returns the position of this element in the sibling element

LQuery.prototype.index = function () {
 var elems = This.elements[0].parentnode.children;
 for (Var i=0;i<elems.length;i++) {
  if (elems[i] = = This.elements[0]) {return
  I;}}}
 ;

Block default events and prevent event bubbling

In jquery, return false is to prevent default events and events from bubbling, so we have to modify the Lqbind function to determine whether to block the default event and prevent event bubbling by determining whether the returned value of the bound function is False

function Lqbind (OBJ,EVENTS,FN) {
  if (obj.addeventlistener) {
  Obj.addeventlistener (events,function (EV) { 
   if (fn () = = False) {
   ev.preventdefault ();
   Ev.cancelbubble = true;
   }
  },false);
  else{
  obj.attachevent (' on ' +events,function () {
   if (fn () = False) {
   window.event.cancelBubble = true;
   return false;}}
  );
  }
 

The realization of the Find () method

Copy-write $ (' div '). Find ('. Box ') and $ (' div '). Find (' #box ') method

This involves using the method of determining the first character of the find () parameter to perform different operations and the $ () method, in which the concat () method is used to connect the array, and finally a Lquery object is returned

LQuery.prototype.find = function (sel) {
  var arr = [];
  if (Sel.charat (0) = = '. ') { 
  for (Var i=0;i<this.elements.length;i++) { 
   arr = Arr.concat (GetClass (this.elements[i), sel.substring (1) ));
  }
  }
  else{for 
  (var i=0;i<this.elements.length;i++) { 
   arr = Arr.concat (ToArray (this.elements[i). getElementsByTagName (SEL)));
  }
  return LQ (arr); 
 };

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!