当前位置:首页 > 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> 元素:

jquery li

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

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

标签: jqueryli
分享给朋友:

相关文章

jquery教程

jquery教程

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

jquery选择器

jquery选择器

jQuery 选择器基础 jQuery 选择器用于选取 DOM 元素,基于 CSS 选择器语法扩展。通过 $() 或 jQuery() 函数调用,返回匹配元素的集合。 常见选择器类型 元素选择…

jquery添加

jquery添加

jQuery 添加元素的方法 在jQuery中,添加元素到DOM有多种方式,可以根据需求选择合适的方法。 append() 将内容插入到选定元素的内部末尾处。 $("#container").ap…

jquery对象

jquery对象

jQuery 对象简介 jQuery 对象是通过 jQuery 选择器或方法创建的封装了 DOM 元素集合的对象。它提供了一系列便捷的方法来操作 DOM、处理事件、实现动画等。与原生 DOM 对象不同…

jquery 加载

jquery 加载

jQuery 加载方法 使用jQuery需要先将其库文件加载到网页中。以下是几种常见的加载方式: 通过CDN加载 推荐使用官方或公共CDN(内容分发网络)加载jQuery,速度快且可能被浏览器缓存:…

jquery切换

jquery切换

jQuery切换操作 jQuery提供了多种切换方法,用于在元素状态之间进行切换,包括显示/隐藏、类名切换、属性切换等。以下是常见的jQuery切换方法: 显示与隐藏切换 使用toggle()方法可…