Current Location：How HTML > HTML Articles > Content

What is $ in HTML

What is $ in HTML

In HTML, the dollar sign ($) is used as a shorthand reference to the jQuery library. jQuery is a powerful JavaScript library that simplifies the process of manipulating HTML documents, handling events, and animating elements. The use of the dollar sign in jQuery allows developers to easily access and manipulate elements on a webpage.

Using the $ Symbol in jQuery

To use the dollar sign in jQuery, you need to include the jQuery library in your HTML document. You can do this by adding the following code inside the <head> tags of your HTML document:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Once you have included the jQuery library, you can use the dollar sign to select elements on the page and apply various actions to them. Here are a few examples of how you can use the $ symbol in jQuery:

Example 1: Selecting an Element by ID

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1 id="title">Hello, how2html.com!</h1>

  <script>
    (document).ready(function(){("#title").text("Welcome to how2html.com!");
    });
  </script>
</body>
</html>

Output:

What is $ in HTML

In this example, the jQuery library is used to select the element with the ID “title” and change its text content to “Welcome to how2html.com!”. The $(document).ready() function is a jQuery method that ensures the script is executed only after the DOM has fully loaded.

Example 2: Selecting Multiple Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>how2html.com</li>
    <li>jQuery</li>
    <li>HTML</li>
  </ul>

  <script>
    (document).ready(function(){("li").css("color", "blue");
    });
  </script>
</body>
</html>

Output:

What is $ in HTML

In this example, the dollar sign is used to select all <li> elements on the page and change their text color to blue using the css() method provided by jQuery.

Example 3: Event Handling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">Click Me</button>

  <script>
    (document).ready(function(){("#btn").click(function(){
        alert("You clicked the button!");
      });
    });
  </script>
</body>
</html>

Output:

What is $ in HTML

In this example, the dollar sign is used to select the <button> element with the ID “btn” and attach a click event handler to it. When the button is clicked, an alert box will pop up with the message “You clicked the button!”

Conclusion

The dollar sign in HTML is a powerful tool when combined with the jQuery library. It allows developers to easily select elements on a webpage, manipulate their properties, and handle events efficiently. By mastering the use of the dollar sign in jQuery, you can create interactive and dynamic web pages with ease.

Like(0)

HTML Articles