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