正文

揭秘如何轻松用jQuery获取li标签中的值，快速掌握实用技巧

/0 浏览量
0623

在网页开发中，使用jQuery操作DOM元素是一种非常高效的方式。特别是获取列表（li标签）中的值，jQuery提供了简单易用的方法。本文将详细介绍如何轻松用jQuery获取li标签中的值，并分享一些实用技巧。

一、基本方法：使用.text()方法

jQuery中最简单获取li标签中的值的方法是使用.text()方法。这个方法可以直接获取或设置元素的内容。

1.1 获取li标签中的文本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#getLiText").click(function(){
    var text = $("#list li").text();
    alert(text);
  });
});
</script>

<ul id="list">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>
<button id="getLiText">获取li标签中的值</button>

在上面的例子中，点击按钮会弹出一个包含所有li标签文本的警告框。

1.2 设置li标签中的文本

<script>
$(document).ready(function(){
  $("#setLiText").click(function(){
    $("#list li").text("新的文本");
  });
});
</script>

点击按钮后，所有li标签的文本都会被设置为“新的文本”。

二、使用.html()方法获取HTML内容

除了.text()方法，jQuery还提供了.html()方法，它可以获取或设置元素的内容，包括HTML标签。

2.1 获取li标签中的HTML内容

<script>
$(document).ready(function(){
  $("#getLiHtml").click(function(){
    var html = $("#list li").html();
    alert(html);
  });
});
</script>

点击按钮后，会弹出一个包含所有li标签HTML内容的警告框。

2.2 设置li标签中的HTML内容

<script>
$(document).ready(function(){
  $("#setLiHtml").click(function(){
    $("#list li").html("<strong>新的文本</strong>");
  });
});
</script>

点击按钮后，所有li标签的文本都会被包裹在<strong>标签中。

三、使用.attr()方法获取属性值

有时候，我们可能需要获取li标签中的某个属性值，比如data-id。

3.1 获取li标签中的属性值

<script>
$(document).ready(function(){
  $("#getLiAttr").click(function(){
    var attr = $("#list li").attr("data-id");
    alert(attr);
  });
});
</script>

点击按钮后，会弹出一个包含所有li标签data-id属性值的警告框。

3.2 设置li标签中的属性值

<script>
$(document).ready(function(){
  $("#setLiAttr").click(function(){
    $("#list li").attr("data-id", "123");
  });
});
</script>

点击按钮后，所有li标签的data-id属性值都会被设置为“123”。

四、总结

通过以上方法，我们可以轻松地使用jQuery获取li标签中的值。在实际开发中，根据需求选择合适的方法，可以大大提高开发效率。希望本文能帮助你快速掌握这些实用技巧。

-- 展开阅读全文 --