jquery如何取得當前標籤

在前端開發中，動態取得目前標籤是一項非常常見的操作。而 jQuery 作為前端框架中的一員，提供了多種取得目前標籤的方式。在本文中，我們將詳細介紹 jQuery 如何取得目前標籤。

I. 取得目前元素的ID

透過以下程式碼可以取得目前元素的ID：

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

例如，我們在HTML 檔案中定義了一個ID 為「my -id」的元素：

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

我們可以使用以下jQuery 程式碼來取得該元素的ID：

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

當使用者點擊該元素時，jQuery 會取得目前元素的ID，並將其輸出到控制台視窗中。

II. 取得目前元素的class

透過以下程式碼可以取得目前元素的class：

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

例如，我們在HTML 檔案中定義了一個class 為「my -class」的元素：

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

我們可以使用以下jQuery 程式碼取得該元素的class：

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

當使用者點擊該元素時，jQuery 會取得目前元素的class，並將其輸出到控制台視窗中。

III. 取得目前元素的自訂屬性

透過以下程式碼可以取得目前元素的自訂屬性：

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

其中，「*」代表我們自己定義的屬性名稱。例如，我們在HTML 檔案中定義了一個自訂屬性為「data-color」的元素：

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

我們可以使用下列jQuery 程式碼取得該元素的自訂屬性：

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

當使用者點擊該元素時，jQuery 會取得目前元素的自訂屬性，並將其輸出到控制台視窗中。

IV. 取得目前元素的tag 名稱

透過以下程式碼可以取得目前元素的tag 名稱：

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

例如，我們在HTML 檔案中定義了一個tag 名稱為「div」的元素：

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

我們可以使用以下jQuery 程式碼取得該元素的tag 名稱：

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

當使用者點擊該元素時，jQuery 會取得目前元素的tag 名稱，並將其輸出到控制台視窗中。

V. 取得目前元素的值

透過以下程式碼可以取得目前元素的值：

$(this).val();

例如，我們在HTML 檔案中定義了一個輸入方塊：

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

我們可以使用以下jQuery 程式碼來取得該輸入框的值：

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

當使用者在該輸入框中輸入內容時，jQuery 會取得目前元素的值，並將其輸出到控制台視窗中。

VI. 取得目前元素在文件中的位置

透過以下程式碼可以取得目前元素在文件中的位置：

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

例如，我們在HTML 檔案中定義了一個元素：

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

我們可以使用以下jQuery 程式碼來取得該元素在文件中的位置：

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

當使用者點擊該元素時，jQuery 會取得目前元素在文件中的位置，並將其輸出到控制台視窗中。

在本文中，我們從取得目前元素的 ID、class、自訂屬性、tag 名稱、值以及在文件中的位置等方面詳細介紹了 jQuery 如何取得目前標籤。透過本文的學習，我們可以更深入地了解 jQuery 相關知識，加強前端開發能力，為我們的工作和專案實踐提供更多可能性。

以上是jquery如何取得當前標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！