everyone uses jquery, but in fact you can encapsulate similar functions yourself. Here are some simple examples that might inspire you. jquery is popular among front-end developers and is a preferred JS library for programmers. Even if jquery simplifies your JS development process and allows you to see more possibilities, you still have no time to use jquery. Some of the small examples here may be helpful to you when jquery is not available. Document ReadyA page cannot be manipulated until the document has been loaded, so we are accustomed to putting all of the JS code in jquery's $. Ready () function:
$ (document). Ready (function () { console.log ("ready!");});
we can also achieve the same effect with JS:
Document.addeventlistener (' domcontentloaded ', function () { console.log ("ready!");});
Add Event Listenersmonitoring events is an important part of JS. jquery can easily implement event monitoring:
$ (someelement). On (' click ', Function () { //todo event handler logic});
Of course, here is the JS implementation method:
Someelement.addeventlistener (' click ', Function () { //todo event handler logic});
Select Elementsjquery uses Id,class name,tag name to select elements that are super convenient, such as:
by id$ (' #myElement '); By Class name$ ('. myelement '); by tag name$ (' div '); children$ (' #myParents '). Children (); Complex selecting$ (' Article#first p.summary ');
Native JS has many methods of selecting elements. All methods can be used in ie8+ modern browsers.
Ajaxas we all know, Ajax can create asynchronous Web apps. Here's a demonstration of jquery's Get function:
$.get ("ajax/text.html", function (data) { $ (". Result"). HTML (data);
jquery does make Ajax easier to use, and the following is the implementation of JS:
var request = new XMLHttpRequest (); Request.open (' GET ', ' ajax/test.html ', true); Request.onload = function (e) { if (request.readystate = = 4) //check If the get was successful if (request.stat US = = $) { console.log (request.responsetext);} else {
Add and Remove ClassesIf you need to add or remove class,jquery for an element, there are two dedicated methods:
Add a class$ (' #foo '). addclass (' bold '); Remove a class$ (' #foo '). Removeclass (' bold ');
using JS is also very simple:
Fade in the example below proves why jquery is so popular. The fade in effect of implementing an element requires only one line of code:
$ (EL). FadeIn ();
The following JS implementations are obviously somewhat complex:
function FadeIn (EL) { el.style.opacity = 0; var last = +new Date (); var tick = function () { el.style.opacity = +el.style.opacity + (new Date ()-last)/; last = +new Date (); if (+el.style.opacity < 1) { (window.requestanimationframe && requestanimationframe (tick)) | | SetTimeout (tick, +); } }; Tick ();} FadeIn (EL);
Source:http://stackoverflow.com/questions/35393807/how-to-animate-a-style-property-in-plain-vanilla-javascript Hide and Show elementshiding or showing element applications is common, and jquery provides the Hide () and show () methods to implement the hiding or display of elements:
Hiding element$ (EL). Hide ();//Showing element$ (EL). Show ();
Of course, the implementation of JS is not complicated:
hiding Elementel.style.display = ' none ';//Showing Elementel.style.display = ' block ';
DOM Manipulationmanipulating the DOM with jquery is straightforward. Let's look at adding elements to the container;
$ ("#container"). Append ("<p>more content</p>");
JS is also easy to implement:
document.getElementById ("#container"). InnerHTML + = "<p>more content</p>";
Extended reading:The following links have more native JS examples. 1.http://blog.garstasio.com/you-dont-need-jquery/why-not/2.http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/3.http://blog.wearecolony.com/a-year-without-jquery/4.https://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/ Note: This article is a translationoriginal link: https://dzone.com/articles/javascript-without-jquery-tips-and-practical-examp
Say Let go of jquery