How to get the current tag with jquery

In front-end development, dynamically obtaining the current tag is a very common operation. As a member of the front-end framework, jQuery provides multiple ways to obtain the current tag. In this article, we will detail how jQuery gets the current tag.

I. Get the ID of the current element

You can get the ID of the current element through the following code:

$(this).attr("id");

For example, we define an ID with the ID "my" in the HTML file -id" element:

<div id="my-id">这是一个文本框</div>

We can use the following jQuery code to get the ID of the element:

$("#my-id").click(function(){
    console.log($(this).attr("id"));
});

When the user clicks the element, jQuery will get the ID of the current element and put it Output to the console window.

II. Get the class of the current element

You can get the class of the current element through the following code:

$(this).attr("class");

For example, we define a class in the HTML file as "my -class" element:

<div class="my-class">这是一个文本框</div>

We can use the following jQuery code to get the class of the element:

$(".my-class").click(function(){
    console.log($(this).attr("class"));
});

When the user clicks on the element, jQuery will get the class of the current element and change it Output to the console window.

III. Get the custom attributes of the current element

You can get the custom attributes of the current element through the following code:

$(this).attr("data-*");

Among them, "*" represents our own definition Property name. For example, we define an element with a custom attribute of "data-color" in the HTML file:

<div data-color="red">这是一个文本框</div>

We can use the following jQuery code to get the custom attribute of the element:

$("div").click(function(){
    console.log($(this).attr("data-color"));
});

When the user clicks on the element, jQuery gets the custom properties of the current element and outputs them to the console window.

IV. Get the tag name of the current element

You can get the tag name of the current element through the following code:

$(this).prop("tagName");

For example, we define a tag name in the HTML file Element that is "div":

<div>这是一个文本框</div>

We can use the following jQuery code to get the tag name of the element:

$("div").click(function(){
    console.log($(this).prop("tagName"));
});

When the user clicks on the element, jQuery will get the tag name of the current element, and output it to the console window.

V. Get the value of the current element

You can get the value of the current element through the following code:

$(this).val();

For example, we define an input box in the HTML file:

<input type="text" value="这是一个文本框" />

We can use the following jQuery code to get the value of the input box:

$("input").keyup(function(){
    console.log($(this).val());
});

When the user enters content in the input box, jQuery will get the value of the current element and output it to in the console window.

VI. Get the position of the current element in the document

You can get the position of the current element in the document through the following code:

$(this).offset().top;
$(this).offset().left;

For example, we define in the HTML file An element:

<div>这是一个文本框</div>

We can use the following jQuery code to get the position of the element in the document:

$("div").click(function(){
    console.log($(this).offset().top);
    console.log($(this).offset().left);
});

When the user clicks on the element, jQuery will get the position of the current element in the document , and output it to the console window.

In this article, we introduce in detail how jQuery obtains the current tag in terms of obtaining the ID, class, custom attributes, tag name, value and position in the document of the current element. By studying this article, we can have a deeper understanding of jQuery-related knowledge, strengthen front-end development capabilities, and provide more possibilities for our work and project practice.

The above is the detailed content of How to get the current tag with jquery. For more information, please follow other related articles on the PHP Chinese website!