jQuery 核心知识点总结：超实用特殊属性操作大全
本文适合 jQuery 初学者，系统梳理val()、html()/text()、width()/height()、scrollTop/scrollLeft、offset/position 五大高频特殊属性操作，附用法、区别和实战场景，学完直接上手开发！
前言
在 jQuery 开发中，我们经常需要操作表单值、元素内容、尺寸大小、滚动条位置以及元素定位等属性，原生 JS 写法繁琐，而 jQuery 提供了一系列简洁高效的特殊属性操作方法，大大提升开发效率。本文一次性整理所有高频用法，通俗易懂，建议收藏！
一、表单值操作：val () 方法
1. 核心作用
专门用于获取 / 设置表单元素的值 ，适配：<input>、<textarea>、<select> 等表单标签。
2. 基础语法
javascript
运行
// 1. 设置表单值（最常用：给输入框赋值）
$("#name").val("张三");
// 2. 获取表单值（最常用：获取用户输入的内容）
$("#name").val();3. 实战场景
京东搜索框、登录表单、用户信息回填等需求，都依赖val()实现值的读写。
二、元素内容操作：html () 和 text () 方法
这两个方法用于获取 / 设置元素的文本 / HTML 内容 ，对应原生 JS 的innerHTML和innerText，核心区别是是否解析 HTML 标签。
1. html () 方法（识别 HTML 标签）
javascript
运行
// 设置带HTML标签的内容
$("div").html("<span>这是一段带样式的内容</span>");
// 获取元素内部所有内容（包含HTML标签）
$("div").html();2. text () 方法（纯文本，不识别标签）
javascript
运行
// 设置纯文本，会把<span>当成普通字符串输出
$("div").text("<span>这是一段内容</span>");
// 获取元素内部所有纯文本（去掉HTML标签）
$("div").text();3. 关键区别
表格
| 方法 | 是否解析 HTML 标签 | 适用场景 |
|---|---|---|
| html() | ✅ 是 | 动态插入带样式、结构的 HTML 内容 |
| text() | ❌ 否 | 纯文本展示、防止 XSS 注入、提取文本内容 |
三、元素尺寸操作：width () 和 height () 方法
用于快速获取 / 设置元素的宽度和高度（仅计算内容区，不包含内边距、边框），也可以获取窗口可视区大小。
1. 操作元素宽高
javascript
运行
// 设置高度为200px
$("img").height(200);
// 设置宽度
$("img").width(200);
// 获取元素高度/宽度
$("img").height();
$("img").width();2. 获取浏览器可视区大小（超级常用）
javascript
运行
// 可视区宽度（浏览器窗口可见宽度）
$(window).width();
// 可视区高度（浏览器窗口可见高度）
$(window).height();✅ 适用场景：响应式布局、图片自适应、弹窗居中。
四、滚动条位置操作：scrollTop () 和 scrollLeft ()
用于获取 / 设置页面 / 元素的滚动条位置，实现页面滚动、吸顶菜单、返回顶部等功能。
1. 核心语法
javascript
运行
// 获取页面垂直滚动距离（页面被卷上去的高度）
$(window).scrollTop();
// 获取页面水平滚动距离
$(window).scrollLeft();
// 设置滚动位置（直接跳转到指定位置）
$(window).scrollTop(500);2. 实战场景
- 仿腾讯固定菜单栏（滚动到一定距离，菜单吸顶）
- 小火箭返回顶部（点击按钮，
scrollTop(0)回到页面顶部）
五、元素位置操作：offset () 和 position ()
这两个方法用于获取元素的坐标位置 ，定位父级不同是核心区别。
1. offset () 方法
✅ 相对于文档（document）的位置，与父级是否定位无关
javascript
运行
// 返回对象：{ left: 100, top: 100 }
$(".box").offset();
// 单独获取左偏移/上偏移
$(".box").offset().left;
$(".box").offset().top;2. position () 方法
✅ 相对于最近一个带定位（position）的父元素的位置
javascript
运行
// 返回相对父定位元素的坐标
$(".box").position();3. 关键区别
表格
| 方法 | 参考基准 | 使用场景 |
|---|---|---|
| offset() | 整个文档 document | 元素绝对定位、跟随鼠标、固定悬浮 |
| position() | 带定位的父元素 | 子元素相对父元素定位 |
六、高频知识点总结
val() 方法
功能 ：专门用于表单元素（input/textarea/select）的值操作
核心特点：
- 取值时返回字符串，空值返回空字符串（""）
- 设置值时支持字符串/数字/数组（select多选时）
典型场景：
- 登录表单取值：
$("#username").val() - 批量设置复选框：
$("input[type=checkbox]").val(['opt1','opt2']) - 清空输入框：
$(".search-input").val("")
html() 方法
功能 ：读取/设置元素的HTML内容（包含标签解析）
安全警告 ：直接插入未过滤的HTML可能导致XSS攻击
对比示例：
javascript
// 设置内容（解析标签）
$("#container").html("<b>加粗文本</b>")
// 获取内容（包含标签）
console.log($("#container").html()) // 输出：<b>加粗文本</b>适用场景：
- 动态加载富文本内容（如CMS系统文章展示）
- 配合模板引擎渲染复杂结构
text() 方法
功能 ：纯文本操作（自动转义HTML标签）
特殊行为：
- 获取内容时合并所有子元素的文本
- 设置内容时将"<"和">"转义为实体字符
对比示例：
javascript
$("#div1").text("<script>alert(1)</script>")
// 实际显示：<script>alert(1)</script>width()/height() 方法组
功能分支：
width()/height()：内容区域（不包含padding/border）innerWidth()/innerHeight()：包含paddingouterWidth()/outerHeight()：包含padding+borderouterWidth(true)/outerHeight(true)：包含margin
响应式应用示例：
javascript
// 根据窗口大小调整元素尺寸
$(window).resize(function(){
$(".responsive-box").width($(window).width() * 0.8)
})scrollTop() 方法
深度应用：
- 获取滚动位置：
$(window).scrollTop() - 带动画滚动到指定位置：
javascript
$("html,body").animate({scrollTop: $("#section2").offset().top}, 500)经典案例：
- 滚动到顶部按钮：通过比较
scrollTop()与阈值控制按钮显隐 - 无限加载：监控
scrollTop()+窗口高度 >= 文档高度-阈值时触发加载
offset() vs position()
对比维度：
| 方法 | 参照物 | 包含margin | 实时计算 |
|---|---|---|---|
| offset() | 文档左上角 | 是 | 是 |
| position() | 最近定位父元素 | 否 | 否 |
使用场景：
- 拖拽元素时用
offset()获取绝对位置 - 瀑布流布局用
position()计算相对位置
注意点： - 修改
position()结果需要先设置父元素position:relative/absolute
结语
jQuery 的这些特殊属性操作是前端开发的基础刚需，掌握它们可以快速实现表单交互、元素样式、页面滚动、元素定位等核心功能。建议结合案例（京东搜索、固定菜单、小火箭返航）动手练习，加深理解！