I'm not here to argue. The original API and function library are very different, it is difficult to develop the magic of these things. But I want to talk about whether it's really necessary to load jquery if it's only for the use of a selector ($) or something like that.
Suppose we are not to simplify, everyone uses jsomething because it supports IE, animation processing and selector functions.
native equivalent
Select element
- Jquery
- var els = $ ('. El ');
- Native
- var els = Document.queryselectorall ('. El ');
- Shorthand
- var $ = function (EL) {
- Return Document.queryselectorall (EL);
- }
- var els = $ ('. El ');
- Or use regex-based micro-selector Lib
- Http://jsperf.com/micro-selector-libraries
Creating elements
- Jquery
- var newel = $ (' <div/> ');
- Native
- var newel = document.createelement (' div ');
- ADD Event Listener
- Jquery
- $ ('. El '). On (' event ', function () {
- });
- Native
- [].foreach.call (Document.queryselectorall ('. El '), function (EL) {
- El.addeventlistener (' event ', function () {
- }, False);
- });
Set/get Property
- Jquery
- $ ('. El '). Filter (': a '). attr (' key ', ' value ');
- $ ('. El '). Filter (': a '). attr (' key ');
- Native
- Document.queryselector ('. El '). setattribute (' key ', ' value ');
- Document.queryselector ('. El '). getattribute (' key ');
- Add/remove/toggle class
- Jquery
- $ ('. El '). addclass (' class ');
- $ ('. El '). Removeclass (' class ');
- $ ('. El '). Toggleclass (' class ');
- Native
- Document.queryselector ('. El '). Classlist.add (' class ');
- Document.queryselector ('. El '). Classlist.remove (' class ');
- Document.queryselector ('. El '). Classlist.toggle (' class ');
Additional
- Jquery
- $ ('. El '). Append ($ (' <div/> '));
- Native
- Document.queryselector ('. El '). AppendChild (document.createelement (' div '));
Cloning
- Jquery
- var Clonedel = $ ('. El '). Clone ();
- Native
- var Clonedel = Document.queryselector ('. El '). CloneNode (True);
Removed from
- Jquery
- $ ('. El '). Remove ();
- Native
- Remove ('. El ');
- function Remove (EL) {
- var toremove = Document.queryselector (EL);
- ToRemove.parentNode.removeChild (Toremove);
- }
Parent element
- //JQuery
- $ ('. El '). Parent ();
-
- //Native
- document.queryselector ('. El '). parentnode;
- prev/next Element
- //JQuery
- $ ('. El '). Prev ();
- $ ('. El '). Next ();
-
- //Native
- document.queryselector ('. El '). previouselementsibling;
- document.queryselector ('. El '). nextelementsibling;
- XHR aka ajax
- //JQuery
- $.get (' url ', function (data) {
-
- });
- $.post (' url ', {data:data}, function (data) {
-
- });
-
- //Native
-
- //Get
- var xhr = new XMLHttpRequest ();
-
- xhr.open (' get ', url);
- Xhr.onreadystatechange = function (data) {
-
-
- xhr.send ();
-
- //Post
- var xhr = new XMLHttpRequest ()
- &NBSP;
- xhr.open (' POST ', url);
- Xhr.onreadystatechange = function (data) {
-
-
- xhr.send ({data:data});
Of course you can also use libraries, see here-a lightweight library can find some libraries to deal with specific tasks, but first make sure you don't get the job done without this library, otherwise-use native JavaScript.