jQuery操作HTML源码老出错？新手避坑指南在这里

（摔键盘声）你是不是经常遇到这种情况？照着教程写的jQuery代码死活不生效，F12打开控制台满屏红字？别慌！今儿咱们就掰开揉碎了讲讲jQuery操作HTML源码的门道，保准让你看完就能把网页玩得跟橡皮泥似的！

▍为啥我的div就是选不中？
上周帮妹子改简历网站，她写的$("div")死活选不中目标元素。后来发现是引入顺序搞反了——jQuery库得代码前面啊！​​三个选择器雷区你肯定踩过​​：

1. ​​等DOM加载完再操作​​（记得套$(document).ready()）
2. ​​ID选择器别带#号​​（("#header")写成("header")就完蛋）
3. ​​类名区分大小写​​（.MainContent和.maincontent是两码事）

广州某大学生课程设计就栽在这儿——他写的$(".menu")选择器，实际HTML里写的是

▍原生JS和jQuery写法对比手册
我整理了新手最容易卡壳的六个场景对比：

重点说说事件绑定这个坑，杭州某电商网站用了$(".buy-btn").click\left(\right)\text{，结果动态加载的商品按钮死活不响应。后来改用}$(".buy−btn").click()，结果动态加载的商品按钮死活不响应。后来改用(document).on('click','.buy-btn')才解决。​​这就跟给未来出生的孩子提前准备衣服似的，得留个后手​​！

▍动态修改HTML的三大铁律
跟你说个行业内幕：专业前端操作DOM时都会遵守这些规矩

1. ​​先清空再填充​​：好比洗碗要先倒剩饭（empty()后再append()）
2. ​​字符串拼接用模板​​：别再用+=拼到吐血（es6的${变量}真香）
3. ​​批量操作放容器​​：跟搬家打包装箱一个道理（操作父元素代替循环子元素）

北京某旅游网站就吃过性能亏——他们用jQuery循环2000个