Using native JavaScript

If you only need to target modern browsers, many features can be implemented using native JavaScript.

DOM Selectors

// JQuery var ele = $ ("#id. Class");

// native JavaScript var ele = Document.queryselectorall ("#id. Class");

// or native JavaScript var ele1 = document.getElementById ("id"); var ele = Ele1.getelementsbyclassname ("Ele1");

DOM operations

Create elements

// JQuery var newel = $ (' <div/> ');

// native JavaScript var newel = document.createelement (' div ');

Append

// jQuery# ("#container"). Append ("<span>content</span>");

// native JavaScript var span = document.createelement ("span"); Span.appendchild (document.createTextNode ("content" ) );d Ocument.getelementbyid ("container"). AppendChild (span);

// or native JavaScript, JQuery uses the native InnerHTML methoddocument.getElementById ("container"). InnerHTML + = "<span>content</span>";

Remove all child nodes

// jQuery$ ("container"). empty ();

// The native equivalent using InnerHTML null;

// or native JavaScript using removechild var c = document.getElementById ("container");  while (c.lastchild) C.removechild (c.lastchild);

Remove the whole Elemet from the DOM

// jQuery$ ("#container"). Remove ();

// native JavaScript var c = document.getElementById ("container"); C.parentnode.removechild (c);

Clone the whole element from the DOM

// Jquey var cloneel = $ ("#container"). Clone ();

// native Javasript var cloneel = document.getElementById ("container"). CloneNode (true);

Parent

// jQuery$ (' #el '). parent ();

// ntive javascriptdocument.getElementById (' El '). parentnode;

Prev/next element

// jQuery$ ("#el"). Prev (); $ ("#el"). Next ();

// native JavaScriptdocument.getElementById ("El"). Previouselementsibling;document.getelementbyid ( "El"). nexelementsibling;

CSS manipulation

Class manipulation

// jQuery$ ("#ele"). AddClass ("MyClass");
$ ("#ele"). Removeclass ("MyClass");
$ ("#ele"). Toggleclass ("MyClass");

//native JavaScriptfunctionaddclasses (node, CLA) {if(!node.length) node =[node];  for(varn=0,m=node.length;n<m;n++){    if("+node[n].classname+"). IndexOf ("" +cla+ "") <0) {Node[n].classname+= " "+CLA; }  }}functionremoveclass (node, CLA) {if(!node.length) node =[node];  for(varn=0,m=node.length;n<m;n++){    if("+node[n].classname+"). IndexOf ("" +cla+ ") >= 0) {Node[n].classname= ("+node[n].classname+"). Replace ("+cla+" "," "). Replace (/^[\s\ufeff\xa0]+|[ \s\ufeff\xa0]+$/g, "" ); }  } }//remove MyClass to all nodesRemoveclass (Document.queryselectorall ("P"), "MyClass");functionToggleclass (node, CLA) {if(!node.length) node =[node];  for(varn=0,m=node.length;n<m;n++){    if("+node[n].classname+"). IndexOf ("" +cla+ ") >= 0) {Node[n].classname= ("+node[n].classname+"). Replace ("+cla+" "," "). Replace (/^[\s\ufeff\xa0]+|[ \s\ufeff\xa0]+$/g, "" ); }Else{node[n].classname+= " "+CLA; }  }}//Toggle MyClass to all nodesToggleclass (Document.queryselectorall ("P"), "MyClass");

// or native JavaScript using classlistdocument.getElementById ("Ele"). Classlist.add ("MyClass");
document.getElementById ("Ele"). Classlist.remove ("MyClass");
document.getElementById ("Ele"). Classlist.toggle ("MyClass");

Style manipulation

// jQuery$ ("#ele"). css ({  "#c00"})

// native JavaScript var ele = document.getElementById ("ele"= "#c00";

Set/get attribute

// jQuery$ (' #ele '). attr (' key ', ' value '); $ (' #ele '). attr (' key ');

// native JavaScriptdocument.getElementById ("Ele"). SetAttribute (' key ', ' value '); document.getElementById ("Ele"). GetAttribute ("key");

Event handling

Document ready

// jQuery$ (start)

// native JavaScriptdocument.addeventlistener ("domcontentloaded", start);

Foreach

// jQuery$ ("P"). each (function(i) {  console.log (this);});

// native JavaScript [].foreach.call (document.getElementsByTagName ("P"),function(obj,i) {consol.log ("index" +i+ ":" +obj)})

Events

// jQuery$ ('. El '). On (' event ', Functio () {});

// Native JavaScript function (EL) {  el.addeventlistener (function() {  false);});

Ajax

// JQuery function (data) {}); $.post (function(data) {}) ;

//native JavaScript//GetvarXHR =NewXMLHttpRequest (); Xhr.open (' GET ', url,true); Xhr.onreadystatechange=function() {}xhr.send ();//PostvarXHR =NewXMLHttpRequest (); Xhr.open (' POST ', url,true); Xhr.onreadystatechange=function() {}xhr.send ({data:data});

Related articles:

Native JavaScript equivalents of JQuery methods:the DOM and Forms

Native JavaScript equivalents of JQuery methods:events, Ajax and Utilities

Using native JavaScript