jQueryDOM操作与修改详解

获取器 设置器

获取或设置元素的文本内容。设置时会替换元素内所有内容，HTML标签会被转义为文本。

示例：

// HTML: <p id="demo">原始<strong>文本</strong></p>

// 获取文本内容
var text = $("#demo").text(); // 返回："原始文本"

// 设置文本内容
$("#demo").text("新的文本内容");
// 结果：<p id="demo">新的文本内容</p>

// 使用函数设置文本内容
$("p").text(function(index, currentText) {
    return "段落 " + (index + 1) + ": " + currentText;
});

// 转义HTML标签
$("#element").text("<strong>加粗文本</strong>");
// 结果：显示文字 "<strong>加粗文本</strong>"，而不是加粗的文本

获取器 设置器

获取或设置元素的HTML内容。设置时会替换元素内所有内容，HTML标签会被解析。

示例：

// HTML: <div id="demo"><p>段落</p></div>

// 获取HTML内容
var html = $("#demo").html(); // 返回："<p>段落</p>"

// 设置HTML内容
$("#demo").html("<span>新的内容</span>");
// 结果：<div id="demo"><span>新的内容</span></div>

// 添加新元素
$("#container").html("<div class='item'>项目1</div><div class='item'>项目2</div>");

// 使用函数设置HTML内容
$("div").html(function(index, currentHtml) {
    return currentHtml + " <span>(第" + (index+1) + "个div)</span>";
});

// 清空元素内容
$("#element").html(""); // 或使用 .empty()

获取器 设置器

获取或设置表单元素的值。适用于input、select、textarea等表单元素。

示例：

// 获取输入框的值
var username = $("#username").val();

// 设置输入框的值
$("#username").val("张三");

// 获取下拉框的选中值
var selected = $("#country").val();

// 设置下拉框的选中值
$("#country").val("CN");

// 获取复选框的值（数组）
var checkedValues = $("input[name='hobbies']:checked").map(function() {
    return $(this).val();
}).get();

// 设置复选框的选中状态
$("input[name='hobbies'][value='reading']").prop("checked", true);

// 获取多选下拉框的值（数组）
var multiSelected = $("#multi-select").val();

// 设置多选下拉框的值
$("#multi-select").val(["option1", "option3"]);

// 使用函数设置值
$("input").val(function(index, currentValue) {
    return currentValue.toUpperCase();
});

获取器 设置器

获取或设置HTML元素的属性值。适用于标准的HTML属性（如id、class、title、href、src等）。

示例：

// HTML: <a id="link" href="https://example.com" title="示例链接">链接</a>

// 获取属性值
var href = $("#link").attr("href"); // 返回："https://example.com"
var title = $("#link").attr("title"); // 返回："示例链接"

// 设置属性值
$("#link").attr("href", "https://new-site.com");
$("#link").attr("title", "新链接");

// 设置多个属性值
$("#link").attr({
    href: "https://site.com",
    title: "网站链接",
    target: "_blank"
});

// 使用函数设置属性值
$("img").attr("alt", function(index, currentAlt) {
    return "图片 " + (index + 1) + ": " + currentAlt;
});

// 获取不存在的属性
var data = $("#element").attr("data-custom"); // 不存在则返回undefined

// 设置自定义数据属性
$("#element").attr("data-id", "12345");
$("#element").attr("data-toggle", "modal");

获取器 设置器

获取或设置DOM元素的属性（property）。适用于布尔属性（如checked、selected、disabled）和DOM属性。

示例：

// 获取复选框的选中状态
var isChecked = $("#checkbox").prop("checked"); // 返回：true/false

// 设置复选框的选中状态
$("#checkbox").prop("checked", true);

// 获取下拉框的选中状态
var isSelected = $("#option").prop("selected");

// 设置元素为禁用状态
$("#button").prop("disabled", true);

// 获取元素的标签名
var tagName = $("#element").prop("tagName"); // 返回："DIV"

// 获取文本框的值（与.val()类似）
var value = $("#input").prop("value");

// 设置多个属性
$("input[type='checkbox']").prop({
    checked: true,
    disabled: false
});

// attr() vs prop() 区别
$("#checkbox").attr("checked"); // 返回："checked" 或 undefined
$("#checkbox").prop("checked"); // 返回：true 或 false

设置器

从元素中移除一个或多个HTML属性。

示例：

// HTML: <input type="text" id="input" required disabled placeholder="请输入">

// 移除单个属性
$("#input").removeAttr("disabled");

// 移除多个属性
$("#input").removeAttr("required placeholder");

// 移除所有title属性
$("[title]").removeAttr("title");

// 移除自定义属性
$("#element").removeAttr("data-custom");

// 条件性移除属性
$("input").removeAttr(function() {
    if ($(this).val() === "") {
        return "required";
    }
});

// 链式操作
$("#link")
    .removeAttr("title")
    .removeAttr("target")
    .attr("href", "#");

获取器 设置器

获取或设置元素的自定义数据属性（data-*）。这是操作data-*属性的推荐方法。

示例：

// HTML: <div id="user" data-id="123" data-name="张三" data-age="25">

// 获取数据值
var userId = $("#user").data("id"); // 返回：123（数字类型）
var userName = $("#user").data("name"); // 返回："张三"
var userAge = $("#user").data("age"); // 返回：25（数字类型）

// 设置数据值
$("#user").data("email", "zhangsan@example.com");
$("#user").data("active", true);

// 设置多个数据值
$("#user").data({
    city: "北京",
    country: "中国"
});

// 获取所有数据
var allData = $("#user").data();
// 返回：{id: 123, name: "张三", age: 25, email: "zhangsan@example.com", ...}

// data() vs attr() 的区别
$("#user").attr("data-id"); // 返回："123"（字符串）
$("#user").data("id"); // 返回：123（数字）

// 存储对象和数组
$("#element").data("user", {name: "李四", age: 30});
$("#element").data("items", ["item1", "item2", "item3"]);

// 移除数据
$("#element").removeData("key"); // 移除特定数据
$("#element").removeData(); // 移除所有数据

获取器 设置器

获取或设置元素的一个或多个CSS样式属性。

示例：

// 获取CSS属性值
var color = $("#element").css("color");
var width = $("#element").css("width");

// 设置单个CSS属性
$("#element").css("color", "red");
$("#element").css("background-color", "#f0f0f0");
$("#element").css("font-size", "16px");

// 设置多个CSS属性
$("#element").css({
    color: "blue",
    backgroundColor: "yellow", // 注意：JavaScript中使用驼峰命名
    fontSize: "20px",
    padding: "10px",
    border: "1px solid #ccc"
});

// 使用函数设置CSS属性
$("div").css("width", function(index, currentWidth) {
    return (parseInt(currentWidth, 10) + 50) + "px";
});

// 获取计算后的样式
var display = $("#element").css("display"); // 获取实际显示样式

// 设置带浏览器前缀的属性
$("#element").css({
    "transform": "rotate(45deg)",
    "-webkit-transform": "rotate(45deg)",
    "-moz-transform": "rotate(45deg)"
});

// 清除CSS属性
$("#element").css("background-color", ""); // 设置为空字符串可清除该属性

获取器 设置器

获取或设置元素的宽度和高度（不包括padding、border和margin）。

示例：

// 获取元素的宽度和高度
var width = $("#element").width(); // 返回数字（像素值）
var height = $("#element").height();

// 设置元素的宽度和高度
$("#element").width(200); // 设置宽度为200px
$("#element").height("300px"); // 也可以使用字符串

// 设置百分比宽度
$("#element").width("50%");

// 使用函数设置尺寸
$(".box").width(function(index, currentWidth) {
    return currentWidth * 1.5; // 每个盒子宽度增加50%
});

// 获取窗口和文档的尺寸
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var docWidth = $(document).width();
var docHeight = $(document).height();

// innerWidth() 和 innerHeight() - 包括padding
var innerWidth = $("#element").innerWidth();
var innerHeight = $("#element").innerHeight();

// outerWidth() 和 outerHeight() - 包括padding和border
var outerWidth = $("#element").outerWidth();
var outerHeight = $("#element").outerHeight();

// outerWidth(true) 和 outerHeight(true) - 包括padding、border和margin
var fullWidth = $("#element").outerWidth(true);
var fullHeight = $("#element").outerHeight(true);

获取器 设置器

获取或设置元素的位置信息。

示例：

// 获取元素相对于文档的偏移
var offset = $("#element").offset();
var top = offset.top;
var left = offset.left;

// 设置元素相对于文档的偏移
$("#element").offset({top: 100, left: 200});

// 获取元素相对于定位父元素的偏移
var position = $("#element").position();
var relativeTop = position.top;
var relativeLeft = position.left;

// 获取和设置滚动位置
var scrollTop = $(window).scrollTop(); // 获取垂直滚动位置
var scrollLeft = $(window).scrollLeft(); // 获取水平滚动位置

// 滚动到指定位置
$("html, body").scrollTop(500); // 滚动到500px位置
$("#container").scrollLeft(200); // 水平滚动容器

// 获取元素的滚动位置
var elementScrollTop = $("#container").scrollTop();

// 平滑滚动到元素
$("html, body").animate({
    scrollTop: $("#target").offset().top
}, 1000);

// 获取视口尺寸
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

设置器

为元素添加一个或多个CSS类。

示例：

// 添加单个类
$("#element").addClass("active");

// 添加多个类
$("#element").addClass("highlight selected");

// 为多个元素添加类
$("p").addClass("text-red");

// 使用函数添加类
$("li").addClass(function(index) {
    return "item-" + index; // 添加item-0, item-1, item-2...
});

// 根据条件添加类
$("input").addClass(function() {
    if ($(this).val() === "") {
        return "error";
    }
    return "";
});

// 链式操作
$("#button")
    .addClass("btn")
    .addClass("btn-primary")
    .addClass("btn-lg");

设置器

从元素中移除一个或多个CSS类。

示例：

// 移除单个类
$("#element").removeClass("active");

// 移除多个类
$("#element").removeClass("highlight selected");

// 移除所有类
$("#element").removeClass();

// 为多个元素移除类
$("p").removeClass("text-red");

// 使用函数移除类
$("li").removeClass(function(index, currentClass) {
    if (currentClass.indexOf("old-") !== -1) {
        return "old-" + index;
    }
    return "";
});

// 移除特定模式的类
$("#element").removeClass(function(index, className) {
    return (className.match(/(^|\s)temp-\S+/g) || []).join(' ');
});

// 链式操作
$("#element")
    .removeClass("old-style")
    .addClass("new-style");

设置器

切换元素的一个或多个CSS类（如果存在则移除，不存在则添加）。

示例：

// 切换单个类
$("#element").toggleClass("active"); // 如果存在active类则移除，否则添加

// 切换多个类
$("#element").toggleClass("highlight selected");

// 根据条件切换类（true:添加, false:移除）
$("#element").toggleClass("active", 1 > 0); // 添加，因为条件为true
$("#element").toggleClass("active", 1 < 0); // 移除，因为条件为false

// 为多个元素切换类
$("p").toggleClass("hidden");

// 使用函数切换类
$("li").toggleClass(function(index, currentClass) {
    return index % 2 === 0 ? "even" : "odd";
});

// 事件处理中的toggleClass
$("#button").click(function() {
    $(this).toggleClass("active");
});

// 切换多个元素的类
$(".item").toggleClass("selected", function() {
    return $(this).data("selected") === true;
});

获取器

检查元素是否包含指定的CSS类。

示例：

// 检查元素是否包含特定类
if ($("#element").hasClass("active")) {
    console.log("元素是活动的");
}

// 条件性添加/移除类
if ($("#element").hasClass("error")) {
    $("#element").removeClass("error").addClass("success");
}

// 检查多个元素
$("p").each(function() {
    if ($(this).hasClass("important")) {
        $(this).css("font-weight", "bold");
    }
});

// 事件处理中的使用
$("#button").click(function() {
    if ($(this).hasClass("disabled")) {
        return false; // 如果按钮被禁用，不执行操作
    }
    // 执行按钮点击操作
});

// 结合其他选择器
var $activeItems = $(".item").filter(function() {
    return $(this).hasClass("active");
});

// 检查多个类
if ($("#element").hasClass("class1") && $("#element").hasClass("class2")) {
    // 元素同时包含class1和class2
}

// 两者等效
$("#element").hasClass("active");
$("#element").is(".active");

// 但is()更强大
$("#element").is(".active:visible"); // 检查是否同时具有active类且可见
$("#element").is(":checked"); // 检查是否被选中
$("#element").is("input[type='text']"); // 检查是否是文本输入框

在元素内部添加内容。

示例：

// HTML: <div id="container"><p>原始内容</p></div>

// append() - 在内部末尾添加
$("#container").append("<p>追加的内容</p>");
// 结果: <div id="container"><p>原始内容</p><p>追加的内容</p></div>

// prepend() - 在内部开头添加
$("#container").prepend("<p>前置的内容</p>");
// 结果: <div id="container"><p>前置的内容</p><p>原始内容</p><p>追加的内容</p></div>

// 添加现有元素（移动元素）
var $item = $("#item1");
$("#container").append($item); // 将#item1移动到#container末尾

// 添加多个元素
$("#container").append("<div>1</div><div>2</div><div>3</div>");

// 使用函数添加内容
$("ul").append(function(index) {
    return "<li>项目 " + (index + 1) + "</li>";
});

// 链式操作
$("#container")
    .append("<h3>标题</h3>")
    .append("<p>段落内容</p>")
    .append("<button>按钮</button>");

// 添加jQuery对象
var $newDiv = $("<div>", {
    class: "new-box",
    text: "新盒子",
    css: {
        backgroundColor: "yellow",
        padding: "10px"
    }
});
$("#container").append($newDiv);

在元素外部添加内容。

示例：

// HTML: <div id="target">目标元素</div>

// before() - 在元素前面添加
$("#target").before("<div>前面的内容</div>");
// 结果: <div>前面的内容</div><div id="target">目标元素</div>

// after() - 在元素后面添加
$("#target").after("<div>后面的内容</div>");
// 结果: <div>前面的内容</div><div id="target">目标元素</div><div>后面的内容</div>

// 移动现有元素
var $element = $("#source");
$("#target").before($element); // 将#source移动到#target前面

// 为多个元素添加内容
$("p").before("<hr>"); // 在每个段落前添加水平线

// 使用函数添加内容
$("li").after(function(index) {
    return "<span class='index'>" + (index + 1) + "</span>";
});

// 添加复杂元素
$("#target").before(
    $("<div>", {
        class: "alert",
        text: "警告信息",
        css: {
            backgroundColor: "#fff3cd",
            border: "1px solid #ffeaa7",
            padding: "10px",
            margin: "10px 0"
        }
    })
);

// 链式操作
$("#element")
    .before("<div>开始</div>")
    .after("<div>结束</div>");

使用jQuery创建新元素的多种方式。

示例：

// 方式1: HTML字符串
var $div1 = $("<div>这是一个div</div>");
var $list = $("<ul><li>项目1</li><li>项目2</li></ul>");

// 方式2: 传递属性对象
var $div2 = $("<div>", {
    id: "my-element",
    class: "box highlighted",
    text: "动态创建的元素",
    css: {
        backgroundColor: "#f0f0f0",
        padding: "10px",
        border: "1px solid #ccc"
    },
    data: {
        id: 123,
        type: "custom"
    },
    click: function() {
        alert("元素被点击了！");
    }
});

// 方式3: 链式操作
var $div3 = $("<div>")
    .addClass("container")
    .attr("id", "container")
    .css({
        width: "500px",
        margin: "0 auto"
    })
    .html("<h3>标题</h3><p>段落内容</p>");

// 创建表单元素
var $form = $("<form>", {
    id: "my-form",
    action: "/submit",
    method: "POST"
}).append(
    $("<input>", {type: "text", name: "username", placeholder: "用户名"}),
    $("<input>", {type: "password", name: "password", placeholder: "密码"}),
    $("<button>", {type: "submit", text: "提交"})
);

// 创建表格
var $table = $("<table>", {class: "table"}).append(
    $("<thead>").append(
        $("<tr>").append(
            $("<th>", {text: "姓名"}),
            $("<th>", {text: "年龄"}),
            $("<th>", {text: "城市"})
        )
    ),
    $("<tbody>").append(
        $("<tr>").append(
            $("<td>", {text: "张三"}),
            $("<td>", {text: "25"}),
            $("<td>", {text: "北京"})
        )
    )
);

// 添加到页面中
$("body").append($div2);
$("#container").append($form);
$("#content").append($table);

remove() 移除元素本身及其所有内容，empty() 只移除元素的内容。

示例：

// remove() - 移除元素
$("#element").remove(); // 从DOM中完全移除#element

// empty() - 清空元素内容
$("#container").empty(); // 移除#container内的所有子元素

// 带选择器的remove()
$("div").remove(".temp"); // 只移除具有.temp类的div元素

// 移除多个元素
$(".item").remove(); // 移除所有.item元素

// 移除并保留数据
var $removed = $("#element").remove();
$("body").append($removed); // 重新添加被移除的元素

// 清空前保存引用
var content = $("#container").html(); // 保存内容
$("#container").empty(); // 清空
// 以后可以恢复: $("#container").html(content);

// 事件处理中的移除
$("#remove-btn").click(function() {
    $(this).parent().remove(); // 移除按钮的父元素
});

// 条件性移除
$("li").filter(function() {
    return $(this).text().indexOf("删除") !== -1;
}).remove();

从DOM中移除元素，但保留jQuery数据和事件处理程序，以便以后重新插入。

示例：

// detach() - 移除但保留数据和事件
var $detached = $("#element").detach();

// 为元素添加事件
$("#element").on("click", function() {
    alert("元素被点击");
});

// detach后重新附加，事件仍然有效
$("#container").append($detached);

// detach() vs remove() 对比
var $element = $("#my-element");

// 使用detach() - 保留数据和事件
$element.detach();
// 稍后重新附加，事件仍然有效
$("#container").append($element);

// 使用remove() - 移除数据和事件
$element.remove();
// 重新附加，事件已丢失
$("#container").append($element);
$element.on("click", function() {
    // 需要重新绑定事件
});

// 暂时隐藏元素
var $tableRows = $("table tr:gt(0)").detach(); // 移除除表头外的所有行
// 稍后恢复
$("table").append($tableRows);

replaceWith() 用新内容替换选中的元素，replaceAll() 用选中的元素替换目标元素。

示例：

// replaceWith() - 替换元素
$("#old-element").replaceWith("<div id='new-element'>新元素</div>");

// replaceWith() 使用函数
$("p").replaceWith(function() {
    return "<div>" + $(this).text() + "</div>";
});

// replaceWith() 移动现有元素
var $newElement = $("#another-element");
$("#old-element").replaceWith($newElement); // 移动#another-element替换#old-element

// replaceAll() - 用元素替换目标
$("<div>新内容</div>").replaceAll("#target"); // 用新div替换#target
$(".new-item").replaceAll(".old-item"); // 用.new-item替换所有.old-item

// 替换多个元素
$("span.highlight").replaceWith("<strong>" + $(this).text() + "</strong>");

// 链式操作
$("#element")
    .replaceWith("<div>新内容</div>")
    .addClass("replaced"); // 注意：这不会生效，因为原元素已被替换

// 正确的链式操作
$("#element").replaceWith(
    $("<div>")
        .addClass("new-element")
        .text("新内容")
);