jquery_ref_html

jQuery HTML & CSS 操作

jQuery HTML / CSS 方法

jQuery 提供了一套丰富的方法，用于操作文档对象模型（DOM），让你能够轻松地获取和设置内容、修改属性和特性、改变样式以及修改 HTML 文档的结构。

下表列出了 HTML 和 CSS 操作的关键方法：

方法	描述
内容操作
.html()	获取第一个元素的 HTML 内容，或设置所有匹配元素的 HTML 内容。
.text()	获取所有匹配元素的组合文本内容，或设置所有匹配元素的文本内容（HTML 标签被视为文本）。
.val()	获取第一个元素的当前值（通常用于 input, select, textarea 等表单元素），或设置所有匹配元素的值。
属性与特性操作
.attr()	获取第一个元素的 HTML 属性值，或为所有匹配元素设置一个或多个属性。用于标准的 HTML 属性。
.removeAttr()	从每个匹配的元素中移除一个属性。
.prop()	获取第一个元素的 DOM 特性值，或为所有匹配元素设置一个或多个特性。对于 checked、selected、disabled 等布尔特性/属性至关重要。
.removeProp()	从匹配元素集中移除由 .prop() 设置的特性。请谨慎使用。
类操作（样式控制的最佳实践）
.addClass()	向集合中的每个元素添加一个或多个类名。
.removeClass()	从集合中的每个元素中移除一个或多个类名。
.toggleClass()	根据是否存在来添加或移除一个或多个类。可以接受一个布尔开关。
.hasClass()	判断是否有任何匹配的元素被赋予指定的类。
CSS 操作
.css()	获取第一个元素的计算样式属性，或为所有匹配元素设置 CSS 属性。（对于复杂/可重用样式，优先使用类操作）。
插入元素
.append()	将参数指定的内容插入到集合中每个元素的末尾。
.appendTo()	将集合中的每个元素插入到目标的末尾。
.prepend()	将参数指定的内容插入到集合中每个元素的开头。
.prependTo()	将集合中的每个元素插入到目标的开头。
.after()	将参数指定的内容插入到集合中每个元素的后面。
.insertAfter()	将集合中的每个元素插入到目标的后面。
.before()	将参数指定的内容插入到集合中每个元素的前面。
.insertBefore()	将集合中的每个元素插入到目标的前面。
移除元素
.remove()	从 DOM 中移除匹配元素的集合（包括数据和事件）。
.detach()	从 DOM 中移除匹配元素的集合，但保留相关数据和事件（用于重新插入时很有用）。
.empty()	移除匹配元素集合中的所有子节点和内容。
替换元素
.replaceWith()	用提供的新内容替换集合中的每个元素。
.replaceAll()	用匹配元素的集合替换目标元素。
包裹元素
.wrap()	在集合中的每个元素周围包裹一个 HTML 结构。
.wrapAll()	在集合中的所有元素周围包裹一个 HTML 结构。
.wrapInner()	在集合中每个元素的内容周围包裹一个 HTML 结构。
.unwrap()	移除匹配元素集合的父元素。
复制元素
.clone()	创建匹配元素集合的深层副本（可选复制事件和数据）。
尺寸
.height() / .width()	获取计算出的当前高度/宽度，或设置匹配元素的高度/宽度。
.innerHeight() / .innerWidth()	获取计算出的当前内部高度/宽度（包括内边距，不包括边框）。
.outerHeight() / .outerWidth()	获取计算出的当前外部高度/宽度（包括内边距和边框，可选包括外边距）。
定位
.offset()	获取第一个元素相对于文档的当前坐标，或设置所有元素的坐标。
.position()	获取第一个元素相对于其 offset parent 的当前坐标。
.offsetParent()	获取最近的已定位的祖先元素。
.scrollTop() / .scrollLeft()	获取第一个元素的当前垂直/水平滚动位置，或设置所有匹配元素的滚动位置。

关键区别：.attr() vs .prop()

属性（Attributes）由 HTML 定义（例如 <input type="checkbox" checked="checked" id="myCheck">），而特性（Properties）属于 JavaScript 中的 DOM 对象。

对于 checked、selected 或 disabled 等布尔属性，始终使用 .prop() 来检查或设置它们的状态。

// 检查复选框是否被选中的正确方法：
if ($("#myCheck").prop("checked")) { ... }

// 禁用按钮的正确方法：
$("#myButton").prop("disabled", true);

// 获取 HTML 属性值：
let inputType = $("#myCheck").attr("type"); // Returns "checkbox"

对这些布尔状态使用 .attr() 可能会导致跨浏览器结果不一致。