Oneuijs/you-dont-need-jquery

Oneuijs/you-dont-need-jquery Https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.mdYou Don ' t need jQuery

The front-end is growing fast, and the modern browser native API is good enough. We don't need to learn more about JQuery's API in order to manipulate the DOM, Event, and so on. At the same time, due to the popularity of React, Angular, Vue and other frameworks, the direct manipulation of the DOM is no longer a good model, and jQuery usage scenarios are greatly reduced. This project summarizes most of the methods of jQuery API substitution and temporarily supports only ie10+ browsers.

Translationsquery Selector

Common class, ID, and attribute selectors can be used document.querySelector or document.querySelectorAll substituted. Difference is

• document.querySelectorReturns the first matching Element
• document.querySelectorAllReturns the NodeList of all matching Element elements. It can be [].slice.call() turned into an Array by turning it
• If no element,jquery is matched to return an empty array [] , but document.querySelector returns null , note the null pointer exception. When not found, you can also use || the set default value, such asdocument.querySelectorAll(selector) || []

Note: document.querySelector and document.querySelectorAll performance is poor . If you want to improve performance, try to use document.getElementById , document.getElementsByClassName or document.getElementsByTagName .

• 1.0 Query by Selector

  JQuery (selector);//Nativedocument.queryselectorall (selector);

• 1.1 Query by class

  JQuery ();//Nativedocument.queryselectorall ();d ocument.getelementsbyclassname ();

• 1.2 Query by ID

  JQuery ();//Nativedocument.queryselector ();d Ocument.getelementbyid ();

• 1.3 Query by attribute

  JQuery (A[target=_blank]);//Nativedocument.queryselectorall (A[target=_blank]);

• 1.4 Find sth.

  • Find nodes

    Jquery. ();//Native.queryselectorall ();

  • Find body

    JQuery ();//nativedocument.;

  • Find Attribute

    Jquery. ();//Native.getattribute ();

  • Find Data Attribute

    Jquery. ();//native//using Getattribute.getattribute (Data-foo);//can also use ' datasets ' if only need to support IE 11+.data Set[];

• 1.5 Sibling/previous/next Elements

  • Sibling elements

    Jquery.siblings ();//Native[].filter. (. Parentnode.children, function (child) {  return child  el;});

  • Previous elements

    Jquery. ();//native.previouselementsibling;

  • Next elements

    Next. ();. nextelementsibling;

• 1.6 Closest

  Closest gets the first ancestor element that matches the selector, starting at the current element along the DOM tree.

  Jquery.closest (queryString);//Nativefunction closest (, selector) {  const matchesselector  . Matches  . Webkitmatchesselector  . Mozmatchesselector  . Msmatchesselector;  while (EL) {     (matchesselector. ( El, selector)) {      return el;    }  {      El  . parentelement;    }  }  return;}

• 1.7 Parents Until

  Gets the ancestors of each currently matched set of elements, excluding the matching elements themselves.

  Jquery.parentsuntil (selector, filter);//Nativefunction Parentsuntil (, selector, filter) {  const result  [];  Const Matchesselector  . Matches.  webkitmatchesselector.  mozmatchesselector  . Msmatchesselector;  Match start from the parent  El  . parentelement;  While (El  matchesselector. ( El, selector)) {     (filter) {      result. ( EL);    }  {       (matchesselector. ( (El, filter)) {        result. EL);      }    }    El  parentelement;  }  return result;}

• 1.8 Form

  • Input/textarea

    JQuery (#my-input). ();//Nativedocument.queryselector (#my-input). Value;

  • Get Index of E.currenttarget between.radio

    JQuery (. currenttarget). Index (. Radio);//Native[].indexof. (Document.queryselectorall (. Radio),. currenttarget);

• 1.9 Iframe Contents

  The IFRAME for the JQuery object returns an IFRAME contents() within thedocument

  • Iframe contents

    Jquery$iframe.contents ();//nativeiframe.contentdocument;

  • Iframe Query

    Jquery$iframe.contents (). ();//Nativeiframe.contentDocument.querySelectorAll ();

? Back to Top

CSS & Style

• 2.1 CSS

  • Get style

    Jquery. (color);//native//Note: Here in order to resolve the problem of returning auto when the style value is auto, const   . ownerdocument.defaultview;//NULL Does not return pseudo-class elements. getComputedStyle (el,). Color;

  • Set style

    Jquery. ({color #ff0011});//Native.style.color  #ff0011;

  • Get/set Styles

    Note that if you want to set more than one style at a time, you can refer to the Setstyles method in Oui-dom-utils

  • Add class

    Jquery.addclass (className);//Native.classlist. (ClassName);

  • Remove class

    Jquery.removeclass (className);//Native.classList.remove (ClassName);

  • Has class

    Jquery.hasclass (className);//Native.classList.contains (ClassName);

  • Toggle class

    Jquery.toggleclass (className);//Native.classList.toggle (ClassName);

• 2.2 Width & Height

  Width and height get the same method, the following is the case of height:

  • Window height

    jquery (window). height ();//native//does not contain scrollbar, consistent with jquery behavior window.document.documentelement.clientheight;//contains Scrollbarwindow.innerheight;

  • Document height

    JQuery (document). Height ();//Nativedocument.documentElement.scrollHeight;

  • Element height

    Jquery.height ();//native//consistent with jQuery (always the height of the content area) function getheight () {  const styles  . getComputedStyle (EL);  Const height  . offsetheight;  Const borderTopWidth  parsefloat (styles.bordertopwidth);  Const borderBottomWidth  parsefloat (styles.borderbottomwidth);  Const paddingtop  parsefloat (styles.paddingtop);  Const Paddingbottom  parsefloat (styles.paddingbottom);  Return height  borderbottomwidth  bordertopwidth  paddingtop  paddingbottom;} Exact to an integer (Border-box is the height value, and Content-box is the height + padding + border value). clientheight;//Accurate to decimal (height value at Border-box, c Ontent-box height + padding + border value). Getboundingclientrect (). Height;

  • Iframe height

    $iframe. Contents () method returns the contentdocument of an IFRAME

    JQuery (IFRAME). Contents (). Height ();//Nativeiframe.contentDocument.documentElement.scrollHeight;

• 2.3 Position & Offset

  • Position

    Jquery.position ();//native{left. Offsetleft, Top OffsetTop}

  • Offset

    Jquery.offset ();//Nativefunction GetOffset () {  const   . Getboundingclientrect ();  return {    top.  Window.pageyoffset  Document.documentElement.clientTop, left    .  Window.pagexoffset  document.documentElement.clientLeft  }}

• 2.4 Scroll Top

  JQuery (window). scrolltop ();//Native (document.documentelement  document.documentElement.scrollTop)  Document: scrolltop;

? Back to Top

DOM manipulation

• 3.1 Remove

  Jquery.remove ();//Native.parentNode.removeChild (EL);

• 3.2 Text

  • Get text

    Jquery. ();//native.textcontent;

  • Set text

    Jquery. (string);//Native.textcontent  string;

• 3.3 HTML

  • Get HTML

    Jquery. ();//native.innerhtml;

  • Set HTML

    Jquery. (htmlstring);//native.innerhtml  htmlstring;

• 3.4 Append

  Append inserted at the end of a child node

  Jquery.append (<div id= ' container ' >hello</div>);//Native newel  document.createelement (); Newel.setattribute (, container); newel.innerhtml  hello;. AppendChild (NEWEL);

• 3.5 prepend

  Jquery.prepend (<div id= ' container ' >hello</div>);//Native newel  document.createelement (); Newel.setattribute (, container); newel.innerhtml  hello;. InsertBefore (Newel,. firstchild);

• 3.6 InsertBefore

  Insert a new node before selecting an element

  Jquery$newel.insertbefore (queryString);//Nativeconst target  document.queryselector (queryString); Target.parentNode.insertBefore (newel, target);

• 3.7 InsertAfter

  Insert a new node after selecting an element

  Jquery$newel.insertafter (queryString);//Nativeconst target  document.queryselector (queryString); Target.parentNode.insertBefore (Newel, target.nextsibling);

? Back to Top

Replace with fetch and FETCH-JSONP

? Back to Top

Events

Completely replaces namespaces and event proxies, linking to Https://github.com/oneuijs/oui-dom-events

• 5.1 Bind an event with on

  Jquery. (EventName, EventHandler);//Native.addeventlistener (EventName, EventHandler);

• 5.2 Unbind an event with off

  Jquery. (EventName, EventHandler);//Native.removeeventlistener (EventName, EventHandler);

• 5.3 Trigger

  JQuery (EL). Trigger (Custom-event, {key1});//Native (window. customevent) {  Const event   customevent (custom-event, {detail {key1}});}  {  Const event  document.createevent (customevent);  Event.initcustomevent (Custom-event,,, {key1});}. Dispatchevent (event);

? Back to Top

Utilities

• 6.1 IsArray

  Jquery.isarray (range);//Nativearray.isarray (range);

• 6.2 Trim

  Jquery. (string);//nativestring. ();

• 6.3 Object Assign

  Inherit, use Object.assign polyfill https://github.com/ljharb/object.assign

  Jquery.extend ({}, defaultopts, opts);//Nativeobject.assign ({}, defaultopts, opts);

• 6.4 Contains

  Jquery.contains (el, child);//  Nativeel  . Contains (child);

? Back to Top

Alternatives

• You may not need jquery (you might not need jquery)-How to use native JavaScript to implement common events, elements, Ajax and other usages.
• Npm-dom and Webmodules-organizations that provide independent DOM modules on NPM

Browser Support

Latest?

Latest?

What's up?

Latest?

6.1+?

License

Oneuijs/you-dont-need-jquery