You may not need jquery!. Developing with native JavaScript

Some methods of jquery to native JS/JQ turn js/jquery and Js.

Many JavaScript developers, including me, like jQueryvery Much. Because it's simple because it has a lot of plug-ins to use, and like other great tools, jQuery makes it easier for developers to develop websites and web Applications.

On the other hand, however, as the underlying framework for front-end development,jQuery contains a number of compatibility codes and extensions, many of which may not be available throughout your project. In fact, if you are only for modern browsers, a lot of features using native JavaScript can be implemented, even the slow-down version of IE browser, compatibility is very easy to handle.

Let's take a look at this in the Internet Explorer environment if you use native JavaScript code to implement functionality in JQuery. If you plan to develop a small infrastructure yourself, you can take a good look at the implementation of the Code.

Ajax Post

Jquery:

$.ajax ({  type: ' POST ',  url: '/my/url ',  data:data});

Ie8+:

var request = new XMLHttpRequest (), request.open (' POST ', '/my/url ', true); request.send (data);

Ajax Get

Jquery:

$.ajax ({  type: ' GET ',  url: '/my/url ',  success:function (resp) {  },  error:function () {  }});

Ie8+:

Request = new XMLHttpRequest (), request.open (' GET ', '/my/url ', true); request.onreadystatechange = function () {  if ( This.readystate = = = 4) {    if (this.status >= && this.status < +) {      //success!      RESP = this.responsetext;    } else {      //Error:(    }  }}request.send (); request = null;

Loading JSON

Jquery:

$.getjson ('/my/url ', function (data) {});

Ie8+:

Request = new XMLHttpRequest (), request.open (' GET ', '/my/url ', true); request.onreadystatechange = function () {  if ( This.readystate = = = 4) {    if (this.status >= && this.status < +) {      //success!      data = Json.parse (this.responsetext);    } else {      //Error:(    }  }}request.send (); request = null;

Fade in effect

Jquery:

$ (el). fadeIn ();

Ie8+:

function FadeIn (el) {  var opacity = 0;  el.style.opacity = 0;  El.style.filter = ";  var last = +new Date ();  var tick = function () {    opacity + = (new Date ()-last)/;    el.style.opacity = opacity;    El.style.filter = ' Alpha (opacity= ' + (+ * opacity) | + ') ';    last = +new Date ();    If (opacity < 1) {      (window.requestanimationframe && requestanimationframe (tick)) | | setTimeout (tick, 16 );    }  };  Tick ();} FadeIn (el);

Show and Hide

Jquery:

$ (el). Show (); $ (el). Hide ();

Ie8+:

El.style.display = '; El.style.display = ' None ';

Add Class

Jquery:

$ (el). addclass (className);

Ie8+:

If (el.classlist)  el.classList.add (className), Else  el.classname + = "+ className;

Inserting HTML

Jquery:

$ (el). before (htmlstring); $ (parent). append (el); $ (el). after (htmlstring);

Ie8+:

el.insertadjacenthtml (' beforebegin ', htmlstring);p arent.appendchild (el); el.insertadjacenthtml (' afterend ', htmlstring);

Get child nodes

Jquery:

$ (el). Children ();

Ie8+:

var children = [];for (var i=el.children.length; i--;) {  //Skip comment nodes on IE8  if (el.children[i].nodetype!) = 8)    children.unshift (el.children[i]);}

Loop node

Jquery:

$ (selector). each (function (i, el) {});

Ie8+:

function foreachelement (selector, Fn) {  var elements = Document.queryselectorall (selector);  for (var i = 0; i < elements.length; i++)    fn (elements[i], i);} Foreachelement (selector, function (el, i) {});

Emptying nodes

Jquery:

$ (el). Empty ();

Ie8+:

While (el.firstchild)  El.removechild (el.firstchild)

Filter nodes

Jquery:

$ (selector). Filter (filterfn);

Ie8+:

function filter (selector, Filterfn) {  var elements = Document.queryselectorall (selector);  var out = [];  for (var i = elements.length; i--;) {    if (FILTERFN (elements[i]))      out.unshift (elements[i]);  }  Return out;} Filter (selector, filterfn);

Find element

Jquery:

$ (el). Find (selector); $ ('. my #awesome selector ');

Ie8+:

El.queryselectorall (selector);d ocument.queryselectorall ('. my #awesome selector ');

Get properties, html, or text

Jquery:

$ (el). attr (' tabindex '); $ (el). HTML (); $ (' <div> '). append ($ (el). clone ()). HTML (); $ (el). Text ();

Ie8+:

El.getattribute (' tabindex '); el.innerHTMLel.outerHTMLel.textContent | | El.innertext

Determine if a CSS class is included

Jquery:

$ (el). Hasclass (className);

Ie8+:

If (el.classlist)  el.classList.contains (className), else  new RegExp (' (^|) ' + className + ' (|$) ', ' GI '). test ( el.classname);

Selector match

Jquery:

$ (el). is ('. my-class ');

Ie8+:

var matches = function (el, Selector) {  var _matches = (el.matches | | el.matchesselector | | el.msmatchesselector | | el. Mozmatchesselector | | El.webkitmatchesselector | | el.omatchesselector);  If (_matches) {    return _matches.call (el, selector);  } else {    var nodes = El.parentNode.querySelectorAll ( selector);    for (var i = nodes.length; i--;)      if (nodes[i] = = = El) {        return true;    }    Return false;} Matches (el, '. My-class ');

Previous node

Jquery:

$ (el). Prev ();

Ie8+:

Prevsibling can include text nodesfunction previouselementsibling (el) {do  {el = el.previoussibling;} while (el && el.nodetype!== 1);  Return el;} el.previouselementsibling | | Previouselementsibling (el);

The latter node

Jquery:

$ (el). Next ();

Ie8+:

NextSibling can include text nodesfunction nextelementsibling (el) {do  {el = el.nextsibling;} while (el &&am P el.nodetype!== 1);  Return el;} el.nextelementsibling | | Nextelementsibling (el);

External height

Jquery:

$ (el). outerheight ()

Ie8+:

function Outerheight (el, includemargin) {  var height = el.offsetheight;  If (includemargin) {    var style = El.currentstyle | | getComputedStyle (el);    Height + = parseint (style.margintop) + parseint (style.marginbottom);  }   Return height;} Outerheight (el, true);

External width

Jquery:

$ (el). outerwidth ()

Ie8+:

function Outerwidth (el, includemargin) {  var height = el.offsetwidth;  If (includemargin) {    var style = El.currentstyle | | getComputedStyle (el);    Height + = parseint (style.marginleft) + parseint (style.marginright);  }   Return height;} Outerwidth (el, true);

Determines whether an array

Jquery:

$.isarray (arr);

Ie8+:

IsArray = Array.isarray | | function (arr) {  return Object.prototype.toString.call (arr) = = ' [Object Array] ';} IsArray (arr);

Array conversions

Jquery:

$.map (array, function (value, Index) {})

Ie8+:

function map (arr, Fn) {  var results = []  for (var i = 0; i < arr.length; i++)    results.push (fn (arr[i], i)) 
   return results}map (array, function (value, Index) {})

There are a lot of similar, you can refer to here: http://youmightnotneedjquery.com/.

Source: http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

You may not need jquery!. Developing with native JavaScript