How to use JQuery Tag Selector with Example | Explained

Jquery tag selector

In this article, we will see about jquery tag selector. We know that to select HTML elements on the page as much as specifically and as much as generically; CSS provides a wide variety of selectors. We take the help of these “CSS Selectors” to select or target HTML elements in JQuery.

What is a Jquery tag selector?

To select HMTL elements by their tag name, we use a jquery tag selector.

Syntax of tag selector

$("CSS tag selector").action(parameters);

If we use a CSS element selector in a jquery function then it is called a jquery element selector.

Example:

$("p").css(("border":"2px solid red));

In the above code, we have a jquery function. To the function, we are passing the tag name “p” and then we pass the CSS style in the parameter. So, It selects any HTML element whose tag name is set to “p” and applies the border of 2px solid red.

Tag selector Example Code

<html>
<head>
<title>Adjacent Siblings</title>
<script src="./jquery-3.6.1.js" type="text/javascript"></script>
</head>
<body>
<h1 id="headingone">Heading Text 1</h1>
<p>Paragraph Text 1</p>
<h1> Heading Text 2</h1>
<p>Paragraph Text 2</p>

<script type="text/javascript">

$("p").css("border", "2px solid red");
</script>

</body>
</html>

OUTPUT: jquery tag selector

  1. In the above code, we are linked with a jquery file to our HTML document. Then we have two h1 tags and two p tags in the HTML body section.
  2. To select the HTML element using jquery, we first put the “$” dollar symbol then we need to enclose the HTML element you want to select, in brackets and double quotes. And give your CSS style in the parenthesis with double quotes as in the above code.
  3. Since we have given CSS style using tag selector only for p tag only border has been applied to the element

Leave a Reply