极客教程如何使用JavaScript/jQuery获得被点击按钮的ID
给出一组按钮，任务是使用JavaScript和jQuery确定按钮被点击时的ID。
使用JavaScript获取被点击按钮的ID。
例子1：这个例子为每个按钮设置了一个onClick事件，当按钮被点击时，按钮的ID被传递给函数，然后它在屏幕上打印出ID。
<!DOCTYPE HTML>
<html>
<head>
<title>
Get the ID of the clicked button
using JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button id="1" onClick="GFG_click(this.id)">
Button1
</button>
<button id="2" onClick="GFG_click(this.id)">
Button2
</button>
<button id="3" onClick="GFG_click(this.id)">
Button3
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on button to get ID";
function GFG_click(clicked) {
el_down.innerHTML = "ID = "+clicked;
}
</script>
</body>
</html>
输出:
实例2：这个例子设置了一个onClick事件在<script>标签单独给每个按钮，当按钮被点击时，按钮的ID被传递给函数，然后在屏幕上打印ID。
<!DOCTYPE HTML>
<html>
<head>
<title>
Get the ID of the clicked button
in JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on button to get ID";
document.getElementById('1').onclick = GFG_click;
document.getElementById('2').onclick = GFG_click;
document.getElementById('3').onclick = GFG_click;
function GFG_click(clicked) {
el_down.innerHTML = "Button clicked, id = "
+ this.id;
}
</script>
</body>
</html>
输出:
使用jQuery获取被点击按钮的ID。
jQuery on() 方法：该方法为所选元素和子元素添加一个或多个事件处理程序。
语法:
$(selector).on(event, childSelector, data, function, map)
参数:
- event。这个参数是必需的。它指定了一个或多个事件或命名空间，以附加到选定的元素。在有多个事件值的情况下，这些值用空格分隔。事件必须是一个有效的。
- childSelector。这个参数是可选的。它指定了事件处理程序应该只附加到定义的子元素。
- data。这个参数是可选的。它指定了要传递给函数的额外数据。
- function。这个参数是必需的。它指定了事件发生时要运行的函数。
- map。它指定了一个事件地图（{event:func(), event:func(), …}），有一个或多个事件添加到选定的元素，以及事件发生时要运行的函数。
jQuery click() 方法：该方法触发了点击事件，或添加了一个函数，当点击事件发生时运行。当一个元素被点击时就会发生点击事件。
语法:
- 触发所选元素的点击事件。
$(selector).click()
- 为点击事件添加一个函数。
$(selector).click(function)
参数：此方法接受单参数功能，这是可选的。它指定了点击事件发生时要运行的函数。
示例1：本例通过使用click()方法为每个按钮设置一个onClick事件，当按钮被点击时，按钮的ID被传递给函数，然后在屏幕上打印ID。
<!DOCTYPE HTML>
<html>
<head>
<title>
Get the ID of the clicked button
using jQuery
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button id="1"> Button1</button>
<button id="2"> Button2</button>
<button id="3"> Button3</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
('#GFG_UP').text("Click on button to get ID");
("button").click(function() {
var t = (this).attr('id');
('#GFG_DOWN').text("ID = " + t);
});
</script>
</body>
</html>
输出:
例2：本例通过使用on()方法为每个按钮设置一个onClick事件，当按钮被点击时，按钮的ID被传递给函数，然后在屏幕上打印ID。
<!DOCTYPE HTML>
<html>
<head>
<title>
Get the ID of the clicked button
using jQuery
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button id="1"> Button1</button>
<button id="2"> Button2</button>
<button id="3"> Button3</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
('#GFG_UP').text("Click on button to get ID");
("button").on('click',function() {
var t = (this.id);
$('#GFG_DOWN').text("ID = " + t);
});
</script>
</body>
</html>
输出:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。你可以通过学习这个jQuery教程和jQuery实例，从基础开始学习jQuery。