当前位置：首页 > jquery

jquery 元素

2026-01-13 15:15:24jquery

jQuery 元素选择与操作

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 中常用的元素选择与操作方法：

选择元素

通过选择器获取元素，语法为 $("selector")，支持 CSS 选择器：

// 选择所有段落元素
$("p");

// 选择 ID 为 "myId" 的元素
$("#myId");

// 选择 class 为 "myClass" 的元素
$(".myClass");

// 组合选择器
$("div.myClass");

操作元素内容

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

// 获取元素的 HTML 内容
var htmlContent = $("#myDiv").html();

// 设置元素的 HTML 内容
$("#myDiv").html("<p>新内容</p>");

// 获取元素的文本内容
var textContent = $("#myDiv").text();

// 设置元素的文本内容
$("#myDiv").text("新文本内容");

操作元素属性

获取或设置元素的属性：

// 获取元素的属性值
var src = $("img").attr("src");

// 设置元素的属性值
$("img").attr("src", "new-image.jpg");

// 移除元素的属性
$("img").removeAttr("src");

操作元素样式

动态修改元素的 CSS 样式：

// 获取元素的 CSS 属性值
var color = $("#myDiv").css("color");

// 设置元素的 CSS 属性值
$("#myDiv").css("color", "red");

// 设置多个 CSS 属性
$("#myDiv").css({
  "color": "red",
  "font-size": "20px"
});

添加和移除元素

动态添加或移除 DOM 元素：

// 在元素内部末尾添加内容
$("#myDiv").append("<p>追加内容</p>");

// 在元素内部开头添加内容
$("#myDiv").prepend("<p>前置内容</p>");

// 在元素外部后面添加内容
$("#myDiv").after("<p>后置内容</p>");

// 在元素外部前面添加内容
$("#myDiv").before("<p>前置内容</p>");

// 移除元素
$("#myDiv").remove();

遍历元素

对选中的元素集合进行遍历或查找：

// 遍历每个元素
$("li").each(function() {
  console.log($(this).text());
});

// 查找子元素
$("#myDiv").find("p");

// 获取父元素
$("p").parent();

// 获取兄弟元素
$("p").siblings();

事件处理

为元素绑定或触发事件：

// 绑定点击事件
$("#myButton").click(function() {
  alert("按钮被点击");
});

// 触发事件
$("#myButton").trigger("click");

// 解绑事件
$("#myButton").off("click");

注意事项

jQuery 的选择器返回的是一个 jQuery 对象，不是原生 DOM 元素。如需原生对象，可通过索引获取：$("div")[0]。
链式调用是 jQuery 的一大特点，可以在一个语句中连续调用多个方法：$("div").addClass("active").css("color", "red")。
使用 jQuery 前需确保已引入 jQuery 库。

jquery 元素