jquery 元素

jQuery 元素选择与操作

jQuery 提供了多种方法来选择和操作 HTML 元素。以下是一些常见的 jQuery 元素操作方式：

选择元素

通过标签名、类名或 ID 选择元素：

$('p') // 选择所有 <p> 元素
$('.class') // 选择所有 class="class" 的元素
$('#id') // 选择 id="id" 的元素

通过属性选择元素：

$('[name="value"]') // 选择 name 属性为 "value" 的元素
$('[type="text"]') // 选择 type 属性为 "text" 的元素

操作元素内容

获取或设置元素的 HTML 内容：

$('#element').html() // 获取元素内容
$('#element').html('<p>New content</p>') // 设置元素内容

获取或设置元素的文本内容：

$('#element').text() // 获取元素文本
$('#element').text('New text') // 设置元素文本

操作元素属性

获取或设置元素的属性：

$('#element').attr('name') // 获取 name 属性
$('#element').attr('name', 'value') // 设置 name 属性

移除元素的属性：

$('#element').removeAttr('name') // 移除 name 属性

操作元素样式

添加或移除 CSS 类：

$('#element').addClass('class') // 添加 CSS 类
$('#element').removeClass('class') // 移除 CSS 类
$('#element').toggleClass('class') // 切换 CSS 类

直接操作 CSS 样式：

$('#element').css('color', 'red') // 设置 color 样式
$('#element').css('color') // 获取 color 样式

操作元素尺寸

获取或设置元素的宽度和高度：

$('#element').width() // 获取元素宽度
$('#element').width(200) // 设置元素宽度
$('#element').height() // 获取元素高度
$('#element').height(200) // 设置元素高度

遍历元素

查找子元素：

$('#parent').find('.child') // 查找父元素内的子元素

查找父元素：

$('.child').parent() // 查找子元素的直接父元素
$('.child').parents('.ancestor') // 查找所有匹配的祖先元素

事件处理

绑定事件处理程序：

$('#element').click(function() {
  alert('Clicked!');
});

移除事件处理程序：

$('#element').off('click');

动画效果

显示和隐藏元素：

$('#element').hide() // 隐藏元素
$('#element').show() // 显示元素
$('#element').toggle() // 切换显示/隐藏状态

淡入淡出效果：

$('#element').fadeIn() // 淡入
$('#element').fadeOut() // 淡出
$('#element').fadeToggle() // 切换淡入/淡出

滑动效果：

$('#element').slideUp() // 向上滑动隐藏
$('#element').slideDown() // 向下滑动显示
$('#element').slideToggle() // 切换滑动效果