当前位置:首页 > jquery

jquery li

2026-01-13 17:28:07jquery

jQuery 操作 <li> 元素的方法

jQuery 提供了多种方法来操作 HTML 中的 <li> 元素(列表项)。以下是常见的使用场景和示例:

选择 <li> 元素

使用 jQuery 选择器可以轻松选取 <li> 元素,例如:

// 选择所有 <li> 元素
$("li").css("color", "red");

// 选择特定列表中的 <li> 元素
$("ul.my-list li").addClass("highlight");

// 选择第一个或最后一个 <li>
$("li:first").text("First Item");
$("li:last").text("Last Item");

// 选择第 n 个 <li> 元素(索引从 0 开始)
$("li:eq(2)").css("font-weight", "bold");

动态添加 <li> 元素

可以通过 append()prepend()after() 等方法动态添加列表项:

// 在列表末尾添加 <li>
$("ul").append("<li>New Item</li>");

// 在列表开头添加 <li>
$("ul").prepend("<li>First Item</li>");

// 在某个 <li> 后插入新项
$("li:eq(1)").after("<li>Inserted Item</li>");

删除 <li> 元素

使用 remove()empty() 方法删除列表项:

// 删除某个 <li>
$("li:eq(2)").remove();

// 清空整个列表
$("ul").empty();

修改 <li> 内容和属性

可以通过 text()html()attr() 等方法修改 <li> 的内容或属性:

// 修改文本内容
$("li:first").text("Updated Text");

// 修改 HTML 内容
$("li:last").html("<strong>Bold Item</strong>");

// 修改属性(如 class 或 data-*)
$("li").attr("class", "list-item");

事件绑定

可以为 <li> 元素绑定点击、悬停等事件:

$("li").click(function() {
    alert($(this).text());
});

$("li").hover(
    function() { $(this).addClass("hover"); },
    function() { $(this).removeClass("hover"); }
);

遍历 <li> 元素

使用 each() 方法遍历所有 <li> 元素:

$("li").each(function(index) {
    console.log(index + ": " + $(this).text());
});

这些方法可以灵活组合,以满足不同的交互需求。

jquery li

标签: jqueryli
分享给朋友:

相关文章

jquery 之家

jquery 之家

jQuery 之家是一个专注于 jQuery 相关资源的中文网站,提供插件、教程、代码示例等内容。以下是相关信息整理: jQuery 之家网站内容 该网站通常包含以下资源: jQuery…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

jquery怎么读

jquery怎么读

jQuery的发音 jQuery的正确发音为 "jay-query"(/ˈdʒeɪkwɪəri/)。其中: "jay" 发字母 "J" 的音(如英文单词 "jump" 的首音)。 "query" 读…

jquery之家

jquery之家

jQuery之家相关资源 jQuery之家是一个提供jQuery插件、教程和资源的网站,适合开发者学习和使用jQuery技术。以下是关于jQuery之家的主要内容和资源: 网站内容 提供丰富的…

react 如何引入jquery

react 如何引入jquery

引入 jQuery 到 React 项目 在 React 项目中引入 jQuery 可以通过多种方式实现,但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突,因此建议仅在必要时使用…

jquery教程

jquery教程

jQuery 教程:基础与实用方法 jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“写得更少…