jquery 标签
jQuery 标签操作基础
jQuery 提供了丰富的 DOM 操作方法，以下是与标签（HTML 元素）相关的核心功能：
选择标签
通过选择器获取标签元素：
$('p') // 选择所有 <p> 标签
$('#id') // 选择 id 为 "id" 的标签
$('.class') // 选择 class 为 "class" 的标签
$('div > p') // 选择 <div> 直接子级的 <p> 标签 创建标签
动态创建新标签并插入到 DOM 中：
$('<div>Hello</div>').appendTo('body'); // 创建 <div> 并添加到 <body>
$('<a>', { href: '#', text: 'Link' }); // 通过属性对象创建标签 修改标签内容
操作标签的文本、HTML 或属性：
$('p').text('New text'); // 修改文本内容
$('p').html('<b>Bold</b>'); // 修改 HTML 内容
$('a').attr('href', '#'); // 修改属性 标签样式操作
动态调整 CSS 或类名：
$('div').css('color', 'red'); // 修改样式
$('div').addClass('active'); // 添加类
$('div').toggleClass('active'); // 切换类 标签事件绑定
为标签绑定交互事件：
$('button').click(function() {
alert('Clicked!');
});
$('input').on('change', function() {
console.log($(this).val());
}); 遍历与过滤标签
查找或筛选特定标签：
$('li').each(function(index) {
console.log(index + ': ' + $(this).text());
});
$('div').find('p'); // 查找子级 <p> 标签
$('li').filter(':even'); // 过滤偶数索引的 <li> 动态增删标签
修改 DOM 结构：
$('ul').append('<li>Item</li>'); // 末尾添加
$('ul').prepend('<li>First</li>'); // 开头添加
$('li').remove(); // 删除标签 注意事项
- 使用
$(document).ready()确保 DOM 加载完成后再操作标签。 - 链式调用可简化代码，如
$('div').addClass('box').css('color', 'blue');。 - jQuery 3.0+ 支持现代浏览器，部分旧方法（如
$.bind()）已被弃用。
通过上述方法，可以高效完成标签的增删改查及事件交互。
