資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 顯示被點選元素的標籤名？
在本文中，我們將學習如何使用 jQuery 和點選事件監聽器來顯示被點選元素的標籤名。
jQuery 是一個流行的 JavaScript 庫，它簡化了網頁上 HTML 元素的操作，例如監聽使用者操作（如點選事件）並根據該操作執行某些操作。
讓我們透過一些示例瞭解如何實現以上目標。
示例 1
在本示例中，我們將向 HTML 文件新增一個標題、一些文字和一個專案列表。為了使用 jQuery 顯示被點選元素的標籤名，我們將新增一些 JavaScript 程式碼，這些程式碼會監聽元素上的點選事件並顯示其標籤名。
檔名：index.html
<html lang="en">
<head>
<title>How to display the tag name of the clicked element using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>How to display the tag name of the clicked element using jQuery?</h3>
<p>Click on any element to display its tag name</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<script>
$(document).ready(function() {
$('*').click(function(event) {
event.stopPropagation();
var tagName = $(this).prop('tagName');
alert('You clicked on a ' + tagName + ' element.');
});
});
</script>
</body>
</html>
示例 2
在本示例中，我們將使用 3 種不同的方法來顯示被點選元素的標籤名，分別使用 even.target 和 event.currentTarget 屬性以及 this 關鍵字。這些方法演示了使用 jQuery 顯示被點選元素標籤名的不同方式。
檔名：index.html
<html lang="en">
<head>
<title>How to display the tag name of the clicked element using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>How to display the tag name of the clicked element using jQuery?</h3>
<p>Click on any element to display its tag name</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<script>
$(document).ready(function() {
// Example 1: Using event.target
$('*').click(function(event) {
event.stopPropagation();
var tagName = event.target.tagName;
alert('You clicked on a ' + tagName + ' element.');
});
// Example 2: Using this keyword
$('*').click(function() {
var tagName = $(this).prop('tagName');
alert('You clicked on a ' + tagName + ' element.');
});
// Example 3: Using event.currentTarget property
$('*').click(function(event) {
event.stopPropagation();
var tagName = event.currentTarget.tagName;
alert('You clicked on a ' + tagName + ' element.');
});
});
</script>
</body>
</html>
結論
在本文中，我們學習瞭如何使用 jQuery 顯示被點選元素的標籤名。透過使用本文提供的不同程式碼示例並利用諸如 event.target 之類的屬性以及“this”之類的關鍵字，使用 jQuery 顯示被點選元素的標籤名是一種簡單且有用的技術，可用於向用戶提供反饋和除錯網頁。
更新於： 2023年8月3日
304 次瀏覽
廣告