jQuery HTML / CSS 方法

jQuery 把对页面内容的读写统一成了简单方法：取内容、改内容、增删元素、调样式，一套 API 通吃。这一篇汇总 HTML 与 CSS 相关的核心方法。

读写内容：text / html / val

• text() 按纯文本读写，html() 按 HTML 读写，val() 读写表单控件的值。

$("#p1").text("新的纯文本");       // 写入文本，特殊字符自动转义
$("#box").html("<b>加粗内容</b>"); // 写入 HTML，浏览器会解析标签
var html = $("#box").html();      // 读出内部 HTML 字符串
$("#name").val("张三");            // 设置输入框的值
console.log(html);                // 输出：#box 内部的 HTML 字符串

添加元素

内部追加用 append / prepend，外部插入用 after / before：

$("#list").append("<li>追加到末尾</li>");  // 成为 #list 的最后一个子元素
$("#list").prepend("<li>插到最前</li>");   // 成为 #list 的第一个子元素
$("h1").after("<hr>");                    // 插到 h1 元素后面（兄弟）
$("h1").before("<hr>");                   // 插到 h1 元素前面
// 效果：页面对应位置出现新节点，操作的是同一个元素的新副本

删除与清空元素

$("#div1").remove();  // 删除自身及全部子元素，同时移除绑定的事件
$("#div1").empty();   // 只清空内部子元素，保留 #div1 本身
var t = $("#div1").detach(); // 从页面移除但保留事件数据，可稍后重新插入

区别：remove() 连事件一起删，detach() 保留事件以便"移走再放回"。

CSS 类操作

addClass / removeClass / toggleClass / hasClass 只动 class，不动内联样式：

$("p").addClass("red bold");   // 一次添加多个类，用空格分隔
$("p").removeClass("red");     // 移除某个类
$("p").toggleClass("red");     // 有 red 就删，没有就加
if ($("p").hasClass("red")) {  // 判断是否含 red 类
  console.log("含 red 类");     // 输出：含 red 类
}

样式与尺寸

css() 直接读写内联样式，尺寸方法各取所需：

$("#box").css("color", "red");   // 设置单个样式
$("#box").css({ color: "blue", fontSize: "20px" }); // 对象批量设置
var w = $("#box").width();       // 内容区宽度
var ow = $("#box").outerWidth(true); // 含边框、内边距和外边距的完整宽度
console.log(w, ow);

小结：text/html/val 负责内容，append/remove 等负责结构，css 与 class 方法负责外观。把这三组方法配合选择器使用，就能对页面的任何部分进行完整的"读改写"。