Once Super Star class library jquery future may no longer be sought after by the front-end program Ape!

As a fire for more than 10 years old star Class library jquery, I believe that the front-end of the small partners are certainly more or less used and sought after, of course, I am no exception, as the first Learning JS class library, I have also felt it is the only real, to help you deal with the disgusting browser css/js and other compatibility issues, And I just need to focus on the actual business logic, simple, fast, and productive, which is a few important tags in early jquery.

But with the continuous iteration of the browser and the advent of its associated new APIs, if you only need to support modern browsers, perhaps now you no longer need to import the jquery class library, in this article, we will introduce some of the actual javacript code, Directly can replace our common jquery code, I hope everyone will feel more practical ~

Add a page element

jquery Code:

$ (' I '). Prepend (' <div>--new element--</div> ');

Demo Code

JS Code:

var parent = Document.queryselector (". Container"), var p = document.createelement ("P");p arent.prepend ("Some text", p);

Note that this method is still an experimental phase, and your browser may not support the need to use Polyfill to make the browser support

Delete a page element

jquery Code:

$ (' I '). Remove ();

JS Code:

Elem.remove ();

Demo Code

Inserting page elements

jquery Code:

$elem. Before ($someOtherElem);

JS Code:

Elem.before (Someotherelem);

Replace page elements

jquery Code:

$elem. ReplaceWith ($someOtherElem);

JS Code:

Elem.replacewith (Someotherelem);

Find the closest match element

jquery Code:

$elem. Closest ("Div");

JS Code:

Elem.closest ("div");

Current browser support

If you want to see how much your browser supports the above API, you can use Caniuse to see Support compatibility for jquery-style DOM operations.

Fade effect

jquery Code:

$elem. FadeIn ();

CSS code:

. thingy {
Display:none;
opacity:0;
Transition:. 8s;
}

JS Code:

Elem.style.display = "block"; Requestanimationframe (() = elem.style.opacity = 1);

Bind only one Event

jquery Code

$elem. One ("click", SomeFunc);

JS code (the way it used to be)

function Dostuff () {  alert ("Some stuff happened");  This.removeeventlistener ("click", Dostuff);} var button = document.queryselector ("button"); Button.addeventlistener ("click", Dostuff);

JS Code (simplified version for modern use)

Elem.addeventlistener (' Click ', SomeFunc, {once:true,});

Or

Elem.addeventlistener (' Click ', Myclickhandler, {
Once:true,
Capture:true
});

Animation effects

Jquery

$elem. Animate ({
Width: "20%",
opacity:0.1,
MarginLeft: "0.6in",
FontSize: "3em",
BorderWidth: "10px"
}, 500);

Js

var elem = Document.queryselector ('. Animate-me '); elem.animate ([  {     transform: ' Translatey ( -1000px) ScaleY ( 2.5) ScaleX (. 2) ',     transformorigin: ' 50% 0 ',     filter: ' Blur (40px) ',     opacity:0   },  {     transform : ' Translatey (0) ScaleY (1) ScaleX (1) ',    transformorigin: ' 50% 50% ',    filter: ' Blur (0) ',    opacity:1   }] , 1000);

Ajax Request Processing

jquery Code

$.ajax (' Https://some.url ', {
Success: (data) = {/* do stuff with the data */}
});

JS Code

Fetch (' Https://some.url ')
. Then (response = Response.json ())
. Then (data = {
Do stuff with the data
});

Of course, some of the above JS code may not be complete in the browser, but basically all JavaScript can find the corresponding polyfill to solve the related compatibility problems, as follows:

<script src= "Https://cdn.polyfill.io/v2/polyfill.min.js" ></script>

Perhaps some friends think that using the above JS code is relatively troublesome or immature, but in the future with JavaScript browser implementation of the standard is more and more perfect, we will use a more simple way to achieve the relative function of the front-end JavaScript, this is very worth to try to drop ~

Once Super Star class library jquery future may no longer be sought after by the front-end program Ape!