jQuery 获取点击函数后的

元素的id/value

在本文中，我们将介绍如何使用jQuery获取点击函数后的

元素的id或value值。

1. 获取元素的id值

使用jQuery的click()函数可以实现当元素被点击时执行相应的操作。为了获取点击元素的id值，可以使用attr()函数来获取元素的属性值。

$(document).ready(function(){
  $("li").click(function(){
    var idValue = $(this).attr("id");
    console.log("点击的元素id为：" + idValue);
  });
});

上述代码中，我们首先使用$(document).ready()来确保页面加载完成后再执行相关代码。然后，我们使用click()函数来绑定点击事件。在点击事件中，我们使用$(this)来表示被点击的元素，在这个例子中是

元素。通过调用attr(“id”)函数，我们可以获取到这个元素的id属性值，并将其存储在变量idValue中。最后，我们通过使用console.log()函数将该id值打印到浏览器的控制台中。

2. 获取元素的value值

与获取id值类似，要获取

元素的value值，也可以使用attr()函数。然而，与获取id值不同的是，我们需要在li标签中添加一个value属性来存储相应的值。

<ul>
  <li value="1">第一个元素</li>
  <li value="2">第二个元素</li>
  <li value="3">第三个元素</li>
</ul>

接下来，我们可以使用如下的jQuery代码来获取value值：

$(document).ready(function(){
  $("li").click(function(){
    var value = $(this).attr("value");
    console.log("点击的元素的value为：" + value);
  });
});

在上述代码中，我们通过调用attr(“value”)函数，可以获取到被点击的

元素的value属性值，并将其存储在变量value中。最后，我们再次使用console.log()函数将value值打印到浏览器的控制台中。

注意：value是一个自定义属性，在HTML标准中，并没有给

元素定义该属性。因此，在使用自定义属性时，应当注意保持良好的开发习惯，并遵循HTML的规范。

3. 示例演示

假设我们有一个待办事项列表，其中的每个列表项都有一个唯一的id和一个对应的value值。通过点击不同的列表项，我们可以获取到被点击元素的id和value值。

<ul>
  <li id="task1" value="1">完成作业</li>
  <li id="task2" value="2">查看邮件</li>
  <li id="task3" value="3">购买杂货</li>
</ul>

首先，我们需要使用jQuery来绑定点击事件，并获取相应元素的id和value值：

$(document).ready(function(){
  $("li").click(function(){
    var idValue = $(this).attr("id");
    var value = $(this).attr("value");

    console.log("点击的元素id为：" + idValue);
    console.log("点击的元素的value为：" + value);
  });
});