jquery 元素
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 库。
