$()选中元素无反应，主因是dom未加载完就执行代码，需用$(document).ready()或简写$()包裹逻辑，并用.length验证是否选中。
怎么用 $() 选中元素但什么都没发生？
jQuery 的核心是选中元素再操作，但很多人卡在第一步：写对了选择器，$() 却返回空数组。常见原因是 DOM 还没加载完就执行了 jQuery 代码。
- 必须等 DOM 就绪后再运行操作，用
$(document).ready()或简写$()包裹逻辑 -
$('#nonexistent')不报错，但长度为 0 —— 先用console.log($('#xxx').length)确认是否选中 - ID 选择器里的
#后不能有空格或特殊字符，$('#user name')是错的，应写成$('#username') - 如果页面是动态插入的元素（比如 AJAX 加载后追加），
$()原生不支持事件委托，得用$(document).on('click', '.btn', handler)
.html() 和 .text() 到底该用哪个？
两者都改内容，但语义和效果完全不同：一个解析 HTML，一个当纯文本处理。
-
.html('Hello <strong>world</strong>')会渲染加粗标签；.text('Hello <strong>world</strong>')显示原样字符串，包括尖括号 - 用
.html()插入用户输入的内容有 XSS 风险，除非你明确信任来源 -
.html('')清空子节点并销毁绑定的事件（因为整个 DOM 被重写了）；.empty()更安全，也清空但保留 jQuery 数据 - 获取值时：
.html()拿到的是带标签的字符串，.text()拿到的是去标签后的纯文本（含换行、空格）
为什么 .append() 插进去的元素点不了？
这是最典型的事件绑定失效场景：元素是后来加的，但事件是在旧 DOM 上绑定的。
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
- 直接写
$('.btn').click(handler)只对初始化时存在的.btn生效 - 正确做法是用事件委托：
$(document).on('click', '.btn', handler)，把监听挂到父级（甚至 document），靠事件冒泡触发 - 不要滥用
$(document)，优先用最近的静态父容器，比如$('#list').on('click', '.item', ...)，性能更好 -
.append()返回的是被插入的元素本身（不是父容器），别误以为它能链式绑定事件
jQuery 1.x / 2.x / 3.x 在 HTML 操作上有什么实际区别？
老项目升级或兼容旧浏览器时容易踩坑，关键差异不在语法，而在默认行为和容错逻辑。
立即学习“前端免费学习笔记（深入）”；
- jQuery 3+ 移除了对 IE8 及更早版本的支持，
.html()在某些嵌套标签下更严格，比如<tr> 直接放 <code>.html('<td>1</td> <td>2</td>')在 3.x 中可能失败，需用<tbody> 包裹 <li>jQuery 3+ 对空集合调用方法不再抛错，而是静默返回，所以 <code>$('.missing').show()不报错但也不生效 —— 得自己检查长度 -
.val()处理 select 多选时，jQuery 1.x 返回第一个选中值，3.x 返回数组（即使单选），注意判空逻辑 - 如果项目还在用 1.x，别直接切到 3.x，先过一遍 upgrade guide，重点看
.attr()/.prop()和.data()行为变化
DOM 操作看着简单，但 jQuery 的隐式行为（比如自动遍历集合、静默失败、事件绑定时机）才是出问题最多的地方。别信“写完就能跑”，每次加新交互，先确认元素存在、事件绑对位置、版本行为没偏移。
