当前位置：首页 > jquery

jquery获取标签

2026-04-07 22:45:12jquery

jQuery 获取标签的方法

使用 jQuery 获取 HTML 标签元素主要通过选择器实现，以下是一些常见的方法：

通过标签名获取元素 使用标签名称直接选择所有匹配的元素：

$('div') // 获取所有 div 元素
$('p')   // 获取所有 p 元素

通过 ID 获取元素 使用 # 加上元素的 ID 属性值选择单个元素：

$('#myId') // 获取 ID 为 myId 的元素

通过类名获取元素 使用 . 加上元素的类名选择所有匹配的元素：

$('.myClass') // 获取所有类名为 myClass 的元素

通过属性选择器获取元素 根据元素的属性值选择元素：

$('[name="username"]') // 获取 name 属性为 username 的元素
$('input[type="text"]') // 获取 type 属性为 text 的 input 元素

通过层级关系获取元素 使用父子或兄弟关系选择元素：

$('ul li') // 获取 ul 下的所有 li 元素
$('div > p') // 获取 div 直接子元素中的 p 元素
$('h1 + p') // 获取紧接在 h1 后面的 p 元素

通过过滤选择器获取元素 使用 jQuery 提供的过滤方法进一步筛选元素：

$('li:first') // 获取第一个 li 元素
$('li:last')  // 获取最后一个 li 元素
$('li:even')  // 获取偶数位置的 li 元素
$('li:odd')   // 获取奇数位置的 li 元素
$('li:eq(2)') // 获取索引为 2 的 li 元素

获取标签内容的常用方法

获取或设置元素的文本内容 使用 text() 方法获取或设置元素的纯文本内容：

$('p').text() // 获取第一个 p 元素的文本内容
$('p').text('新内容') // 设置所有 p 元素的文本内容

获取或设置元素的 HTML 内容 使用 html() 方法获取或设置元素的 HTML 内容：

$('div').html() // 获取第一个 div 的 HTML 内容
$('div').html('<span>新内容</span>') // 设置所有 div 的 HTML 内容

获取或设置表单元素的值 使用 val() 方法获取或设置表单元素的值：

$('input').val() // 获取第一个 input 元素的值
$('input').val('新值') // 设置所有 input 元素的值

链式操作示例

jQuery 支持链式操作，可以在一条语句中执行多个操作：

$('div').addClass('highlight').css('color', 'red').text('修改后的内容');

注意事项

使用 jQuery 选择器时，确保 DOM 已加载完成，通常将代码放在 $(document).ready() 中：
```
$(document).ready(function() {
  // jQuery 代码
});
```
选择器性能优化：尽量使用 ID 或类选择器，避免过于复杂的选择器以提高性能。
动态添加的元素可能需要使用事件委托或重新绑定事件。