淘先锋技术网

首页 1 2 3 4 5 6 7

今天我们来学习jQuery如何点击当前li标签的值。

jquery点击当前li标签的值

首先我们要有一个ul列表,里面放置几个li标签。


  
    <ul id="list">
      <li value="1">列表项1</li>
      <li value="2">列表项2</li>
      <li value="3">列表项3</li>
      <li value="4">列表项4</li>
    </ul>
  

接下来我们使用jQuery的click函数来绑定点击事件:


  
    $(document).ready(function(){
      $("#list li").click(function(){
        var value = $(this).attr("value");
        alert(value);
      });
    });
  

代码解析:

  1. 使用document.ready函数来确保页面DOM结构完全加载完成后再执行代码。
  2. 选择器选中所有li标签。
  3. 使用click函数绑定点击事件。
  4. 使用this关键字指向当前被点击的li标签,使用attr函数获取value属性的值。
  5. 使用alert函数弹出当前li标签的值。

最后我们运行代码,当我们点击任意一个li标签时,会弹出它的value值。

这就是jQuery点击当前li标签的值的方法,希望对大家有所帮助。