JQuery

JQuery is a JS library which simplifies client side scripting. We can easily access html elements and manipulate them using JQuery. JQuery was first released in 2006. You will need to add JQuery in your project in 2 ways.

• using cdn

  
              <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  
  

• using npm - npm install jquery and then import $ from "jquery";

Examples

Below examples demonstrate how we can use JQuery.

//mouse events - click, mouseenter
$("#cartbtn").click(function(){
    $(".cart").show();
    $("#p").hide();

    // other methods - fadeIn(2000), fadeOut(2000), 
    // slideDown(), slideUp(), slideToggle()
    // text() - Sets or returns the text 
    // html() - Sets or returns the html
    // val() - Sets or returns the value 
    // attr("title", "xgz");
    // append() - append text
    // prepend() - prepend text
    // after() - add content after element
    // before() - add content before element
    // remove() - remove the element and children
    // empty() - remove the children

    // css manipulation
    
    // addClass() - add class to element
    // removeClass() - remove class from element
    // toggleClass() - toggle adding/removing class to element
    // css() - apply css

    //traversing is also possible


  });

//keyboard events - keypress

//form events - submit, change, focus, blur

//document events - load, resize, scroll, unload