Say Let go of jquery

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.