With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.
Let’s learn change visual UI features by adding/removing CSS class from jQuery?
jQuery
jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.
$(function () {
// code block here
}
HTML
In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.
<script src="/jquery.js"></script> -- local version of jQuery library <script src="/public/script.js"></script> -- our script
Add or Remove CSS class
jQuery has capability of adding and removing properties of DOM elements such as class. It will be help us to change the visual appearance of the container according to user interations
el.addClass('class-name')
el.removeClass('class-name')
using el.find() can check for the the existence of the class
- How to add data on MongoDB using Node-Express API - How to use Nodejs-Express API to perform CURD operations on MongoDB
- POST API Call using jQuery and AJAX - How to make a POST API call in HTML/web app using jQuery and AJAX
- GET API Call using jQuery and AJAX - How to make a get API call in HTML/web app using jQuery and AJAX
- How to create animated tool tip container with CSS and jQuery - How to add a custom animated tool tip functionality using CSS and jQuery
- How to add/remove CSS class using jQuery - How to add and remove visual appearance (CSS) to container using jQuery
- How to show/hide DOM element using jQuery - How to show and hide a div with jQuery.
- How to redirect a page in jQuery - How to redirect a web page in jQuery
- How to load content into div using jQuery - How to add content to a div in HTML page using jQuery
- How to refresh / reload content to a div using jQuery - How to load/refresh content every 5 second using JQuery in HTML / web page
