当前位置：首页 > jquery

jquery 元素

2026-04-07 18:40:44jquery

jQuery 元素操作

jQuery 提供了多种方法来操作 DOM 元素，包括选择、修改、添加和删除元素。以下是常见的 jQuery 元素操作方法：

选择元素

使用 jQuery 选择器可以快速定位 DOM 元素：

$("p") // 选择所有 <p> 元素
$("#id") // 选择 ID 为 "id" 的元素
$(".class") // 选择类名为 "class" 的元素

修改元素内容

可以通过 html() 或 text() 方法修改元素内容：

$("#element").html("<b>新内容</b>") // 设置 HTML 内容
$("#element").text("纯文本内容") // 设置纯文本内容

修改元素属性

使用 attr() 方法可以获取或设置元素属性：

$("#image").attr("src", "new-image.jpg") // 修改 src 属性
$("#link").attr("href") // 获取 href 属性值

添加元素

通过 append()、prepend()、after() 和 before() 方法可以在指定位置添加新元素：

$("#container").append("<div>新元素</div>") // 在末尾添加
$("#container").prepend("<div>新元素</div>") // 在开头添加
$("#target").after("<div>新元素</div>") // 在之后添加
$("#target").before("<div>新元素</div>") // 在之前添加

删除元素

使用 remove() 或 empty() 方法可以删除元素：

$("#element").remove() // 删除元素及其子元素
$("#container").empty() // 清空元素内容但保留元素本身

样式操作

可以通过 css() 方法直接修改元素的 CSS 样式：

$("#element").css("color", "red") // 修改文字颜色
$("#box").css({
  "width": "200px",
  "height": "200px",
  "background": "blue"
}) // 同时修改多个样式

类操作

jQuery 提供了便捷的类操作方法：

$("#element").addClass("active") // 添加类
$("#element").removeClass("active") // 移除类
$("#element").toggleClass("active") // 切换类
$("#element").hasClass("active") // 检查类是否存在

遍历元素

使用 jQuery 的遍历方法可以查找相关元素：

$("li").parent() // 获取父元素
$("ul").children() // 获取直接子元素
$("li").siblings() // 获取兄弟元素
$("li").first() // 获取第一个匹配元素
$("li").last() // 获取最后一个匹配元素

事件处理

jQuery 简化了事件处理：

$("#button").click(function() {
  alert("按钮被点击");
});
$("#form").submit(function(e) {
  e.preventDefault();
  // 表单提交处理
});

动画效果

jQuery 内置了多种动画效果：

jquery 元素

$("#box").hide(1000) // 淡出隐藏
$("#box").show(1000) // 淡入显示
$("#box").fadeIn(500) // 淡入
$("#box").fadeOut(500) // 淡出
$("#box").slideUp() // 向上滑动隐藏
$("#box").slideDown() // 向下滑动显示

这些方法提供了强大的 DOM 操作能力，使开发者能够轻松实现复杂的页面交互效果。