Native JS implements common jquery functionality

The native selector takes full advantage of bind (this) binding

<div id= "box" >      <ul>        <li >111  </li>        <li class= "Lione" >2222</li >        <li class= "Lione" >3333</li>     </ul>        </div><div id= "Box2" >  <p > I am aaaa</p>     <p> I am bbbb</p>     </div>

　　

The implementation of the selector var element = Document.queryselector (' selectors '); var elementlist = Document.queryselectorall (' selectors '); var $=query = document.querySelector.bind (document), var queryall = Document.querySelectorAll.bind (document), Var Fromid = Document.getElementById.bind (document), var fromclass = Document.getElementsByClassName.bind (document), Var Fromtag = Document.getElementsByTagName.bind (document);//Call Var box=$ (' #box '); var lioneall=queryall (' Li '); var lione= $ ('. Lione '); Console.log (box.innerhtml);  Console.log (lioneall[2].innerhtml);//333box.addeventlistener (' Click ', Function () {console.log (' click Lione ' +lione.innerhtml);  

　

implementation of native offset

var myoffest=function (obj) {var top=0,left=0;if (obj) {while (obj.offsetparent) {      top + = obj.offsettop;      Left + = Obj.offsetleft;      obj = obj.offsetparent;   } }  return{  top:top,  left:left  }}

　　

var jqtop=jquery (' #box2 '). Offset (). Top;console.log (' jQuery offsetTop  value ' +jqtop);  JQuery offsetTop  value 274var Jstop=document.getelementbyid ("Box2"); Console.log (' js offsetTop  value ' +myoffest ( jstop). top); JS OffsetTop  Value 274

　

implementation of using array foreach

var unboundforeach = Array.prototype.foreach,foreach = Function.prototype.call.bind (Unboundforeach);

<div id= "Box3" >   <p class= "klasses" >one</p>   <p class= "klasses" >two</p>   <p class= "klasses" >three</p></div><script>var Unboundforeach = Array.prototype.forEach, ForEach = Function.prototype.call.bind (Unboundforeach); var Box3=document.getelementbyid ("Box3"), Var klasses=document.queryselectorall ('. klasses ') ForEach (klasses, Function (EL) {    el.addeventlistener (' click ', function () {alert (' Tap my serial number ' +this.innerhtml);   Click on my serial Number one}); </script>

Get Document Height

Gets the document full height var getscrollheight=function () {     return Math.max (Document.body.scrollHeight, Document.documentElement.scrollHeight); } console.log (' JQuery document height ' +jquery (documents). Height ());  jquery Document Height 1739console.log (' JS document height ' +getscrollheight ()); JS Document Height 1739

Style Actions

//JQuery$ ('. El '). addclass (' class ')); $('. El '). Removeclass (' class ')); $('. El '). Toggleclass (' class ')); //Native MethodsDocument.queryselector ('. El '). Classlist.add (' class ')); Document.queryselector ('. El '). Classlist.remove (' class ')); Document.queryselector ('. El '). Classlist.toggle (' class '));//Native method extensions add multipleDOMTokenList.prototype.adds =function(tokens) {Tokens.split (""). ForEach (function(token) { This. Add (token); }.bind ( This)); return  This;};//adds add multipleDocument.queryselector (". El"). Classlist.adds ("Child1 child2 child3");

Get Jsonp

 var getjsonp=function (url,callback) {var cn = "Callback" + (+new Date ()), S = document.createelement ("script"), head= do Cument.head | |    document.getElementsByTagName (' head ') [0];    S.type = "Text/javascript"; s.charset = "UTF-8";  S.SRC = URL+CN;      var sp=head.appendchild (s);  Head.insertbefore (S,head.firstchild);       SetTimeout (function () {//Use timer to become asynchronous WINDOW[CN] = function (data) {try {s.onload = S.onreadystatechange = function () {  var that=this; if ((!that.readystate | | that.readystate = = = "Loaded" | | that.readystate = = = "complete") {Callback && callback (    data);    Handle memory leak in IE s.onload = S.onreadystatechange = null;   if (head && s.parentnode) {//sp.parentnode.removechild (SP);    The heaviest destruction of Head.removechild (s);     }    }                        };  } catch (e) {}finally {window[cn]=null; }              }; },0);};/ /document.addeventlistener (' click ', Function () {GETJSONP ("https://api.github.com/repos/HubSpot/pace?callback=",function (JSON) {alert (' success! ')   + json.data.id+ ' acquired ' +json.data.name ');   document.getElementById ("Testtext"). Innerhtml= ' callback function gets the ' +json.data.name; document.getElementById ("Testtext"). style.csstext= ' color:red;font-size:22px; border:1px solid #666 '});

。。。。 The rest is slowly added ...

Native JS implements common jquery functionality