当前位置:首页 > jquery

jquery li

2026-04-07 20:57:19jquery

jQuery 操作 <li> 元素的方法

通过 jQuery 可以方便地操作 HTML 中的 <li> 元素,包括选择、修改、添加和删除等操作。

选择 <li> 元素

使用 jQuery 选择器可以选中特定的 <li> 元素:

// 选中所有 li 元素
$('li')

// 选中特定 class 的 li 元素
$('li.className')

// 选中特定 id 的 li 元素
$('li#idName')

// 选中 ul 下的直接子 li 元素
$('ul > li')

修改 <li> 元素内容

可以通过 .text().html() 方法修改 <li> 元素的内容:

// 修改文本内容
$('li').text('新的文本内容')

// 修改 HTML 内容
$('li').html('<strong>加粗文本</strong>')

添加和删除 <li> 元素

可以在列表中添加新的 <li> 元素或删除现有的 <li> 元素:

// 在 ul 末尾添加新的 li 元素
$('ul').append('<li>新的列表项</li>')

// 在 ul 开头添加新的 li 元素
$('ul').prepend('<li>新的列表项</li>')

// 删除所有 li 元素
$('li').remove()

// 删除特定 class 的 li 元素
$('li.className').remove()

遍历 <li> 元素

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

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

添加事件监听

可以为 <li> 元素添加点击等事件监听:

$('li').click(function() {
    alert('你点击了: ' + $(this).text())
})

修改样式

可以通过 .css() 方法修改 <li> 元素的样式:

jquery li

$('li').css('color', 'red')

这些方法可以组合使用,实现更复杂的列表操作效果。

标签: jqueryli
分享给朋友:

相关文章

jquery 面试题

jquery 面试题

以下是一些常见的 jQuery 面试题及其解答,涵盖基础概念、核心方法和实际应用场景。 jQuery 基础概念 jQuery 是什么? jQuery 是一个轻量级的 JavaScript 库,简化了…

jquery选择

jquery选择

jQuery选择器基础 jQuery选择器基于CSS选择器语法,用于快速定位和操作DOM元素。通过$()或jQuery()函数传入选择器字符串实现。 常见选择器类型: 元素选择器:$("p") 选…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

jquery样式

jquery样式

jQuery 样式操作基础 jQuery 提供了多种方法来操作 HTML 元素的样式,包括直接修改 CSS 属性、添加/移除类名等。以下是常见的样式操作方法: 修改 CSS 属性 使用 css()…

jquery css

jquery css

jQuery 操作 CSS 的方法 jQuery 提供了多种方法来操作元素的 CSS 样式,包括获取、设置、添加或移除样式。以下是常用的方法: 获取 CSS 属性值 使用 .css() 方法获取元素…

css jquery

css jquery

CSS 与 jQuery 的基础用法 CSS(层叠样式表)用于控制网页的样式和布局,而 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Aja…