JQuery Tutorial – Excellence Technology

jQuery Tutorial

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. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development. jQuery Tutorial provides basic to advanced level concepts for beginners and working professionals.

Why to use jQuery?

Some of the key points that support the answer for why to use jQuery:

  1. It helps us to manipulate HTML and CSS
  2. It helps us to manipulate DOM (Document Object Model) elements
  3. Provides event methods to trigger and respond to an events on a html page such as mouse click, keypress etc.
  4. Implements AJAX calls.

How to use jQuery with HTML ?

There are several ways to start using it on your website.

  1. Use the Google-hosted/Microsoft-hosted content delivery network (CDN) to include a version. Or
  2. Download it from official website jQuery.com and host it on your server or local filesystem.

Advantages of jQuery

  1. Wide range of plug-ins that allows developers to create plug-ins on top of the JavaScript library.
  2. Large development community.
  3. It is a lot easier to use compared to standard javascript and other javascript libraries.
  4. It lets users develop Ajax templates with ease. Ajax enables a sleeker interface where actions can be performed on pages without requiring the entire page to be reloaded.
  5. Being Light weight and a powerful chaining capabilities makes it more strong.

Disadvantages of jQuery

  1. While jQuery has an impressive library in terms of quantity, depending on how much customization you require on your website. The functionality may be limited thus using raw javascript may be inevitable in some cases.
  2. The JQuery javascript file is required to run the commands, while the size of this file is relatively small (25-100KB depending on the server). It is still a strain on the client computer and maybe your web server as well if you intend to host the script on your own web server.

jQuery Syntax

It is used for selecting elements in HTML and performing the action on those elements.

Syntax:

$(selector).action()
  • $ sign: It grants access to jQuery.
  • (selector): It is used to find HTML elements.
  • jQuery action(): It is used to perform actions on the elements.
    • Used to hide the current element.
      $(this).hide()

       

    • Used to hide all <p> elements.
      $("p").hide()

       

    • Used to hide all elements with class=â€testâ€.
      $(".test").hide()

       

    • Used to hide the element with id=â€testâ€.
      $("#test").hide()

    Document Ready Event:

    • jQuery Methods are inside a Document ready event for easy reading of code.
      $(document).ready(function(){

        // jQuery Method

      });

      This is to check and stop the jquery before the document is finished loading. This method also allows you to have JavaScript code before the body of your document, in the head section.

    • Some actions that can fail if the method is run before the loaded document:
    • Get the image size that is not loaded or hide the element which is not been created yet.
    • The shorter method for document ready:
      $(function(){

        // jQuery Method

      });

jQuery | Selectors and Event Methods

In this article, we will learn about jQuery selectors, jQuery Event methods and some useful methods.

jQuery selectors:

jQuery selectors are used to select the HTML element(s) and allows you to manipulate the HTML element(s) in a way we want. It selects the HTML elements on a variable parameter such as their name, classes, id, types, attributes, attribute values, etc. All selectors in jQuery are selected using a special sign i.e. dollar sign and parentheses:

 $("selector-name")

jQuery Events

  1. jQuery bind() method
  2. jQuery blur() Method
  3. jQuery change() Method
  4. jQuery click() Method
  5. jQuery dblclick() Method
  6. jQuery delegate() Method
  7. jQuery | die() Method
  8. jQuery error() Method
  9. jQuery event.currentTarget Property
  10. jQuery event.data Property
  11. jQuery event.delegateTarget Property
  12. jQuery event.isDefaultPrevented() Method
  13. jQuery event.isImmediatePropagationStopped() Method
  14. jQuery event.isPropagationStopped() Method
  15. jQuery Event Methods Complete Reference

    jQuery bind() method