How to convert jQuery to JavaScript ? Last Updated : 03 Aug, 2021 Comments Improve Suggest changes Like Article Like Report JavaScript is an object orient programming language designed to make web development easier and more attractive. In most cases, JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience. jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Selection: In jQuery, to select any element, we simply use the $() sign, but in JavaScript, to select any element, we can use querySelector() or querySelectorAll(). Program: javascript // jQuery to select all instances // of class "select" $(".select"); // JavaScript to select only the // first instance of class "select" document.querySelector(".select"); // To select all the instances // of class "select" document.querySelectorAll(".select"); Some other examples of selectors: To select the entire html: In jQuery: $("html") In JavaScript: document.querySelector(selector) To select the entire html body: In jQuery: $("body") In JavaScript: document.body Class manipulation: Program: javascript // To add a class "class-name" to a <p> tag // jQuery: $p.addClass(class-name) // JavaScript: p.classList.add(class-name) Below some other examples of manipulation: To add a class to an html element: In jQuery: $element.addClass(class-name) In JavaScript: element.classList.add(class-name) To remove a class to an html element: In jQuery: $element.removeClass(class-name) In JavaScript: element.classList.remove(class-name) To toggle a class to an html element: In jQuery: $element.toggleClass(class-name) In JavaScript: element.classList.toggle(class-name) To check whether an html element contains a class: In jQuery: $element.hasClass(class-name) In JavaScript: element.classList.has(class-name) Event Listeners Program: javascript // To add an event on button click // jQuery: /* handle click event */ $(".button").click( function(event) { }); // JavaScript: /* handle click event */ document.querySelector(".button") .addEventListener("click", (event) => { }); CSS Styling: Program: javascript // To give a margin of 10px to all the div // jQuery: $div.css({ margin: "10px" }) // JavaScript: div.style.margin= "10px" jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples. Comment More infoAdvertise with us Next Article How to convert jQuery to JavaScript ? verma_anushka Follow Improve Article Tags : JavaScript Web Technologies JQuery jQuery-Misc JavaScript-Misc +1 More Similar Reads How to convert form data to JavaScript object with jQuery ? JavaScript objects are complex data types that can store multiple values and properties. Unlike primitive data types that only hold a single value, objects can hold various data types, including other objects, arrays, functions, and more. The inputs given by a user can be converted into objects wher 3 min read How to Convert JS Object to JSON String in JQuery/Javascript? Converting a JavaScript object to a JSON string means using the JSON.stringify() method to transform the object into a JSON-formatted string. This allows for efficient data storage, transmission, and debugging by representing complex data structures in a standardized text format.To Convert JS Object 4 min read How to Run JavaScript from Python ? In this article, we'll discuss how to run a javascript file with Python. For this, we'll use the JS2PY(Javascript Runtime in Pure Python) Python module. JS2PY works by translating JavaScript directly into Python. It indicates that you may run JS directly from Python code without installing large ext 2 min read How to Execute JavaScript Code ? Javascript is a high-level, Just In Time compiled programming language which converts the entire machine code at once and then executes it immediately. Javascript code is executed by the Javascript Engine, which is separate software. Different browsers have their own implementation of JS Engine embe 2 min read How to trigger events in JavaScript ? JavaScript is a high-level, interpreted, dynamically typed client-side scripting language. While HTML is static and defines the structure of a web page, JavaScript adds interactivity and functionality to HTML elements. This interaction is facilitated through events, which are actions or occurrences 2 min read How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style 2 min read How to write a function in JavaScript ? JavaScript functions serve as reusable blocks of code that can be called from anywhere within your application. They eliminate the need to repeat the same code, promoting code reusability and modularity. By breaking down a large program into smaller, manageable functions, programmers can enhance cod 4 min read How to add jQuery code to HTML file ? In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and 2 min read How to use JavaScript variables in jQuery selectors ? In this article, we will discuss how to use JavaScript variables in jQuery selectors. In the following examples, it can be seen that we have used the values stored in JavaScript Variables used inside the jQuery Selectors. Example 1: The concatenation technique can be applied in order to use the valu 2 min read jQuery getScript() Method The getScript() method in jQuery is used to run a JavaScript using AJAX HTTP GET request. Syntax: $(selector).getScript(url, success(response, status))Parameters: It contains two parameters as mentioned above and described below: url: It is a required parameter. It holds the url to whom the request 2 min read Like