嘻道奇闻
- 文章199742
- 阅读14625734
jQuery常用方法使用技巧：解决DOM操作与事件处理中的常见问题
为什么你的点击事件总是不触发？为什么明明改了DOM内容页面却没变化？新手如何快速涨粉这些运营套路我不懂，但要说jQuery的坑啊，我可太有发言权了！上周刚有个老弟跟我说他的页面点了十几次都没反应，结果你猜怎么着？看完这篇保准你药到病除！
一、DOM操作三大玄学现场
（别急着写代码，先把这几个场景记心里）
??场景1：死活改不了元素内容??
用原生JS的时候是这样：
javascript复制document.getElementById('title').innerHTML = '新内容';
换成jQuery你可能会手滑写成：
jquery复制$('#title').innerHTML = '新内容'; // 错误示范！
??正确姿势??得用这些方法：
$('#title').html('新内容')→ 彻底替换内容$('#title').text('纯文本')→ 防XSS攻击$('#title').append('追加内容')→ 尾部添加
（突然想到个冷知识：用.html()获取内容时会自动解码实体字符，这个坑我去年才爬出来）
??场景2：动态添加的元素不听话??
常见抱怨："我明明用按钮绑定了事件，新增的按钮怎么点不动啊？"
问题根源：直接绑定事件只能作用在??已存在的元素??上
对比两种方案：
| 绑定方式 | 适用范围 | 内存占用 |
|---|---|---|
| $('.btn').click(...) | 初始元素 | 较低 |
| $(document).on('click','.btn',...) | 所有当前&未来元素 | 稍高 |
??终极方案??：事件委托大法好！
jquery复制// 找准最近的静态父元素 $('#container').on('click', '.btn', function(){ console.log('新增的按钮也能触发！'); });
??场景3：样式修改总是不生效??
新手常见迷惑行为：
jquery复制$('#box').style.color = 'red'; // 完蛋！又用原生写法了
jQuery的正确打开方式：
jquery复制// 单个样式 $('#box').css('color','#f00'); // 多个样式 $('#box').css({ 'font-size': '16px', 'background': 'url(../img/bg.jpg)' // 这里路径容易写错 });
二、事件处理的五雷轰顶时刻
（这些错误你至少犯过三种信不信？）
??雷区1：事件重复绑定??
典型症状：点一次触发多次
案发现场还原：
jquery复制function init(){ $('.btn').click(function(){...}); } // 每次调用都会新绑事件 init(); init(); // 这时候点按钮就会触发两次！
??拆弹方案??：
?? 用.off()先解绑
?? 改用事件命名空间
jquery复制function init(){ $('.btn').off('click.myname').on('click.myname',function(){...}); }
??雷区2：表单提交总是刷新页面??
经典错误示范：
jquery复制$('#form').submit(function(){ // 这里没阻止默认行为！ $.ajax(...); });
??救命代码??必须加上：
jquery复制$('#form').submit(function(e){ e.preventDefault(); // 就是这行！千万不能忘 // 再发ajax请求 });
??雷区3：事件对象用错姿势??
想要阻止冒泡？试试这些姿势：
jquery复制$('.inner').click(function(e){ e.stopPropagation(); // 阻止向上冒泡 e.preventDefault(); // 阻止默认行为 return false; // 上面两个效果二合一 });
（注意啦！return false在jQuery里相当于同时调用上面两个方法，但在原生JS里可不管用）
三、高频问题自问自答
??Q：为什么用jQuery获取的值有时候是undefined？??
A：八成是因为DOM还没加载就执行代码了！赶紧套上护体神功：
jquery复制$(document).ready(function(){ // 你的代码放在这里 }); // 或者简写版 $(function(){...});
??Q：动态生成的表格怎么批量绑定事件？??
A：事件委托+选择器过滤双管齐下：
jquery复制$('#table').on('click', 'tr:not(.disabled)', function(){ // 跳过带disabled类的行 });
??Q：同时操作多个元素卡顿怎么办？??
A：试试这三板斧：
- 合并DOM操作 → 用文档碎片（documentFragment）
- 缓存选择器 → 先存变量再操作
- 减少重绘 → 用.cssText批量改样式
小编观点时间
搞了十年前端，我发现一个真理：会用jQuery的程序员，学其他框架都特别快。去年带新人时，有个小伙子非要说"直接学Vue就行"，结果遇到个老项目直接傻眼。现在他逢人就说："幸亏当时把jQuery吃透了！"
记住啊各位，那些说jQuery过时的，就跟说"有了汽车谁还骑自行车"的人一样——他们肯定没遇到过堵车！下次再有人跟你扯什么框架原理，你就把事件委托和DOM操作拍他脸上，保证让他闭嘴惊艳。要是还有搞不定的问题，晚上八点来我直播间，咱们现场掰扯！