How To Use Jquery In Html

by

jQuery is a popular JavaScript library designed to make the process of working with HTML documents, event handling, and animation easier. In this blog post, we’ll learn how to use jQuery in HTML and explore some basic examples of jQuery in action.

Step 1: Include jQuery in Your Project

To start using jQuery, you need to include it in your HTML file. You can either download the library from the official jQuery website and host it yourself, or use a Content Delivery Network (CDN) to load the library from a third-party server.

For this tutorial, we’ll use the Google CDN. Add the following script tag to the head section of your HTML document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Now you have access to the jQuery library in your HTML file.

Step 2: Write Your jQuery Code

jQuery uses a simple syntax to select and manipulate HTML elements. The basic syntax is:

$(selector).action()

The $ sign is an alias for jQuery, the selector is used to find HTML elements, and the action() is a jQuery method to perform some action on the selected elements.

Example 1: Hide an Element

Let’s say we have a paragraph with the ID “example1” and a button. We want to hide the paragraph when the button is clicked. Here’s the HTML code:

<button id="hideButton">Hide Paragraph</button>
<p id="example1">This paragraph will be hidden when you click the button.</p>

Here’s the jQuery code to accomplish this:

<script>
  $(document).ready(function() {
    $("#hideButton").click(function() {
      $("#example1").hide();
    });
  });
</script>

First, we use $(document).ready() to ensure that the HTML document is fully loaded before executing the jQuery code. Then, we attach a click event to the button with the ID “hideButton”. When the button is clicked, the paragraph with the ID “example1” is hidden using the hide() method.

Example 2: Change CSS Style

Let’s change the CSS style of an element using jQuery. Here’s the HTML code:

<button id="changeColor">Change Color</button>
<p id="example2">This paragraph will change color when you click the button.</p>

Now, let’s write the jQuery code:

<script>
  $(document).ready(function() {
    $("#changeColor").click(function() {
      $("#example2").css("color", "red");
    });
  });
</script>

Similar to the previous example, we attach a click event to the button with the ID “changeColor”. When the button is clicked, we use the css() method to change the color of the paragraph with the ID “example2” to red.

Conclusion

That’s it! Now you know how to include jQuery in your HTML file and perform some basic actions. jQuery is a powerful library that can significantly simplify your JavaScript code, so don’t hesitate to explore more of its features and methods.