Home » Blog » Beginner » JavaScript-Equivalent jQuery Code for Simple Tasks

JavaScript-Equivalent jQuery Code for Simple Tasks

Introduction

There are builders who love jQuery and there are some who hate jQuery. The advantages of utilizing jQuery now are debatable, however there was a time when fixing the cross-browser difficulty was a nightmare and utilizing JavaScript was painful. Should you had been via that part, you may perceive the significance of jQuery. jQuery was born to beat the most important problems with JavaScript. Through the years, JavaScript has additionally advanced however we must be grateful for the truth that trendy browsers are additionally turning into increasingly more commonplace-compliant. jQuery continues to be a strong library and it might nonetheless scale back your efforts for shopper-aspect programming.

The goal of this publish is to not discourage your use of JavaScript, however quite to offer you an perception into how jQuery might help to unravel easy duties in comparison with JavaScript. jQuery will help in decreasing the strains of code and your efforts, reduce cross-browser compatibility points, end in quicker improvement, and it makes AJAX calls and animations lifeless easy. To start out with, we’ll check out probably the most primary necessities like choosing parts on the web page by their ID, class, and tag identify after which we’ll take a look at some complicated examples. Let’s dive in!

Choosing an Factor by ID

JavaScript code

doc.querySelector(‘#elmID’); // Trendy Approach – IE8 and above

doc.getElementById(‘elmID’); // Older Approach

jQuery code

$(‘#elmID’);

As you possibly can already see, we’ve used much less code to pick the component in jQuery.

Choosing an Aspect by Tag

Contemplate a use case to pick all of the paragraph parts on the web page:

JavaScript code

doc.getElementsByTagName(‘p’);

jQuery code

$(‘p’);

Once more, shorter code in jQuery!

Choosing Parts by Class Identify

To pick all parts having dummy CSS class:

JavaScript code

doc.getElementsByClassName(‘dummy’); // Older Method

doc.querySelectorAll(‘.dummy’); // Trendy Means – IE8 and above

jQuery code

$(‘.dummy’);

We will see a unbroken development of fewer and shorter strains of code in jQuery.

Change Physique Background Shade on Load

JavaScript code

perform changeBackground(colour)

doc.physique.type.background = shade;

jQuery code

$ (‘physique’).css(‘background-colour’, ‘inexperienced’);

A single line of code accomplishes what takes 4 strains of code to perform in JavaScript.

Including a CSS Class to Component

JavaScript code

if (el.classList)

el.classList.add(className);

else

el.className += ‘ ‘ + className;

jQuery code

$(el).addClass(className);

That’s three fewer strains!

Making an Ajax Name

JavaScript code

perform loadValues()

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = perform()

if (this.readyState == four && this.standing == 200)

doc.getElementById(“demo”).innerHTML = this.responseText;

;

xhttp.open(“GET”, “/api/values”, true);

xhttp.ship();

jQuery code

perform loadValues()

$.ajax(

url: “/api/values”,

sort: ‘GET’,

dataType: ‘json’,

success: perform (knowledge)

$(‘#demo’).html(knowledge);

,

error: perform (response)

alert(response.responseText);

);

The jQuery model seems to be a lot cleaner and extra readable, it additionally provides a greater technique for error dealing with.

Making a Simple Fade-Out Animation

JavaScript code

perform fadeOut(factor)

var op = 1; // preliminary opacity

var timer = setInterval(perform ()

if (op <= zero.1)

clearInterval(timer);

component.type.show = ‘none’;

factor.fashion.opacity = op;

factor.type.filter = ‘alpha(opacity=’ + op * one hundred + “)”;

op -= op * zero.5;

, 500);

var factor = doc.getElementById(‘elm’);

fadeout(aspect);

jQuery code

$(“#elm”).fadeOut();

There isn’t any want to guage right here who is best: jQuery is the clear winner.

Conclusion

We’ve simply seen how jQuery could make life a lot easier for straightforward duties. Some performance could be achieved by only one line of code in jQuery that requires 15-20 strains of JavaScript to realize the identical outcome. jQuery is an superior library and it’s nonetheless extremely popular amongst builders. It is best to contemplate it in its place for quick improvement and with out worrying about cross-browser points. Nevertheless, you also needs to watch out because it’s giant file to load!