jQuery contains a lot of methods that can do tasks requiring many lines of JavaScript code, in just a single line of code. Using jQuery does not mean that JavaScript is not required. jQuery is just another library build using JavaScript which provides functions for easy use. It simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The benefits of using jQuery can be summarized below -

• It accelerates the speed of development
• It does more amount work in less code
• It provides a lot of methods and features
• It works around all major browsers

How to add jQuery to Your Web Pages?

There are 2 ways to start using jQuery on your website -

1.Download the jQuery library from jQuery.com

2.Include jQuery from a CDN (Content Delivery Network)

Fetch Element

jQuery makes fetching elements very easy.

The Syntax for using jQuery is -

                       $(selector).action() 

where, $ - defines a function to access jQuery , selector - CSS selector to query HTML elements , action - jQuery function to be executed on selected elements

Example-

➔$("*") -This will select all elements

➔$(this) -This will select the current HTML element

➔$("p") - This will return all the p tags

➔$(".prime") - This will return all the elements with class 'prime'

➔$("#crown") - This will return the element with id 'crown'

➔$("span.book") -This will return all the span elements with class 'book'

➔ $(".hide .del") - This will return all the elements with class 'hide' and 'del'

Event Handling

All the JavaScript event methods are also written in jQuery. Some of them are -

• click()
• mouseenter()
• mousedown()
• hover()
• keyup()

The syntax to add events to the element(s) is -

        $(selector).event(function(e) {
            // Write something here
        });

Example-

➔The below code will add a click event to a button with id 'submit- page'

    $("#submit-page").click(function() {
               alert("Form has been submitted");
    });

Modify CSS

jQuery provides a very easy method to add one or more styles to the selected elements. It provides CSS() method to change the CSS properties of the element.

To set a specific property use syntax -

.css("propertyname","value")

To set multiple properties use syntax -

.css({"propertyname":"value","propertyname":"value",...})

Examples to modify the CSS properties are -

       $("p").css("background-color", "red");

      $("p").css({"backgroundColor": "red", "font-size": "30px"});

Some more Properties of jQuery

1)Hide Elements

The hide() method of jQuery is used to hide elements from the HTML page. It actually makes the visibility of the element hidden.

The syntax is -

$(selector).hide(speed, callback)

speed - optional parameter to set the speed of hiding having values - 'slow', 'fast' or milliseconds, callback - optional parameter that runs a callback function after the hide() method completes.

Example - The below code will hide all the p tags with class 'hide' in 1 second

                  $("p.hide").hide(1000);

2)Remove Elements

The remove() method is used to remove elements from the HTML page. It deletes the selected element and its child elements from the web page.

The syntax is -

$(selector).remove()

Example- The below code will remove all the p tags with class 'del' -

                  $("p.del").remove();

3)Get/Set Element Content

The html() method is used to set or return the content (i.e. innerHTML) of the selected elements. It returns the content of the first matched element.

The syntax is -

$(selector).html()

When this method is used to set content, it overwrites the content of all matched elements.

The syntax is -

$(selector).html(content)

Example- The below code will set the content of all the p tags with 'Hello world!' -

                     $("p").html("Hello <b>world</b>!");

4)Get/Set Element Text

The text() method is used to set or return the text content of the selected elements. When this method is used to return content, it returns the text content of all matched elements and the child HTML element will not be returned.

When this method is used to set content, it overwrites the content of all matched elements. This will remove the child HTML elements of the selected elements.

Example-

The below code will set the text content of all the p tags with 'Hello world!' and remove any of its child elements-

                        $("p").text("Hello world!");

Let me know what you think about this article and jQuery in general. I hope this guide will help you with your learning, and hopefully save your time!

Thank you!