jQuery Beginner’s Tutorial

jQuery is a free open source javascript library licensed under the MIT license. jQuery syntax is designed to make it easier to navigate HTML documents, perform animations, handle events, add ajax interactions to web pages.

You can download the jquery library. Click here download

To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:

$( document ).ready(function() {
 
    // Your code here.
 
});

Some important jQuery Events:

  • bind(): This method attaches event handlers to elements.
  • change(): This method triggers the change event.
  • click(): This method triggers the click event.
  • mouseover(): This method triggers the mouseover event.
  • mouseout(): This method triggers the mouseout event.
  • mouseup(): This method triggers the mouseup event.
  • mousedown(): This method triggers the mousedown event.
  • mouseenter(): This method triggers the mouseenter event.
  • mouseleave(): This method triggers the mouseleave event.
  • submit(): This method triggers the submit event.
  • hover(): This method triggers the hover event.
  • live(): This method add one or more event handler to current(selected) elements.
  • ready(): This method specifies a function when the DOM is fully loaded.

and many more is there.

jQuery Effects:

Add Class: This method of jQuery which add class to selected element.

$("#exmaple").addClass("newclass");

Remove Class: This method of jQuery which remove class from selected element.

$("#exmaple").removeClass("newclass");

Hide: This method of jQuery which hide selected element.

$("#exmaple").hide();

Show: This method of jQuery which hide selected element.

$("#exmaple").show();

Slide Up: This method of jQuery which slide-up(hides) the selected element.

$("#exmaple").slideUp();

Slide Down: This method of jQuery which slide-down(shows) the selected element.

$("#exmaple").slideDown();

Fade In: This method of jQuery is used to fade in the selected hidden elements.

$("#exmaple").fadeIn(speed); //speed: numbers like 100,200 etc

Fade Out: This method of jQuery is used to fade out the selected visible elements.

$("#exmaple").fadeOut(speed); //speed: numbers like 100,200 etc

You can find more helps on jquery here

Cheers!!

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *