Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I shift from jQuery to core JavaScript?
An object-oriented programming language called JavaScript was created to make developing websites more appealing and simple. The majority of the time, JavaScript is used to build dynamic, responsive elements for websites, improving customer experience.
The most widely used lightweight, compiled, and interpreted programming language is JavaScript. It is additionally known as web page scripting language. It can be applied to both client-side and server-side programming.
The interactions between an HTML/CSS document, or more properly the Document Object Model (DOM), and JavaScript are made simpler by the open-source JavaScript library known as jQuery. By defining the keywords, it makes navigating and manipulating HTML documents, handling browser events, DOM animations.
JQuery's cross-browser portability makes coding simple, and developers are free to make the JavaScript-specific tweaks needed for other browsers without restriction.
JQuery has a lot of benefits, one of which is that it makes it simple for developers to create Ajax templates. Let me sum up what Ajax can accomplish for you in one sentence: you can use it to quickly perform certain live events to reload or refresh a section of the page without doing so for the entire event.
We choose to leave jQuery for what reason?
Well first of all, we integrated jQuery for developer convenience. Since the JavaScript ecosystem has grown much over the past few years, we honestly found we could accomplish practically everything more conveniently in JavaScript today.
In our project, we no longer need to load an 87 kilobyte file of code.
Vanilla JS allows the writing of fundamental statements like selectors, event handlers, and setters and getters. As a result, we can call these core methods directly rather than having my library do it internally.
One of the primary reasons why many developers chose to use jQuery in the first place was because there was less chance of encountering cross-browser compatibility problems now. Consequently, this advantage is no longer valid.
Since JavaScript and CSS3 operate on different threads inside a web - based application, CSS3 Animations execute much better than jQuery effects.
Choice − While in JavaScript we may choose any element by using querySelector() or querySelectorAll, in jQuery we can do so by simply using the $() sign.
Example
// To select every instance of // the class "select" in jQuery $(".select"); // Just the first instance of the // class "select" will be chosen in JavaScript. document.querySelector(".select"); // To choose every instance of // the class, use "select" document.querySelectorAll(".select");
Following are the several additional selector examples −
Following is the selector to choose all of the HTML
In JavaScript −
document.querySelector(selector)
In jQuery −
$("html")
Following is the selector to choose all of the HTML body
In JavaScript −
document.body
In jQuery −
$("body")
Manipulation of class
Example
// To give a jQuerytag a class, // use "class-name": $p.addClass(class-name) // in JavaScript: p.classList.add(class-name)
Following are the few other examples of manipulation below
The selector to add a class to an HTML element is as follows.
In JavaScript −
element.classList.add(class-name)
In jQuery −
$element.addClass(class-name)
The selector to remove a class to an html element is as follows.
In JavaScript −
element.classList.remove(class-name)
In jQuery −
$element.removeClass(class-name)
The selector to toggle a class to an html element is as follows.
In JavaScript −
element.classList.toggle(class-name)
In jQuery −
$element.toggleClass(class-name)
The selector check to see if a class is present in an HTML element is as follows
In JavaScript −
element.classList.has(class-name)
In jQuery −
$element.hasClass(class-name)
Following are the jQuery and JavaScript Event Listeners
Example
// Click a button to add an event to it.
// jQuery:
/* the click event handling */
$(".button").click( function(event) {
});
// JavaScript:
/* the click event handling */
document.querySelector(".button")
.addEventListener("click", (event) => {
});
Following are the jQuery and JavaScript CSS Styling
Example
// giving all div elements a 10 px padding
// jQuery:
$div.css({ padding: "15px" })
// JavaScript:
div.style.padding= "15px"
In Brief
Here we saw a few jQuery functions that we frequently use in our coding. It wasn't too difficult to switch from jQuery because the jQuery team is good enough to list the JavaScript equivalents to their jQuery methods in their documentation. The alternate JavaScript code we used for each statement is also included in the text we've written.
Regardless of the fact that jQuery syntax appears to be brief and straightforward, minifiers ensure that no extra bytes are delivered to the client computer while using JavaScript.
108 Views
