jQuery常用方法详解：快速上手Web开发必备技巧-嘻道妙招

哎，现在都2023年了，怎么还有人学jQuery？你可能会这么想。但说实在的，看看GitHub上jQuery仓库的5.8万颗star，还有那些老项目里密密麻麻的$符号——这玩意儿根本就没过时！今天咱们就来唠唠，为什么搞懂jQuery常用方法，能让你的Web开发效率直接起飞。

一、选元素就像点外卖？$()的十八般武艺

刚入门的前端小白最头疼啥？十有八九是选元素。原生JS要写document.querySelector，手一抖就拼错了。换成jQuery呢？直接上 $(" . c l a s s ") 、$ (".class")、("#id")，跟点外卖选套餐似的简单。

举个栗子，你想给所有按钮加点击效果：

javascript复制// 原生JS要这么写
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function(){...});
});

// jQuery一句话搞定
$('button').click(function(){...});

??重点来了??： $() 支持 C S S 3 所有选择器，还能用 : e q (0) 这种伪类精准定位。对了，选元素还有个冷知识——$ ()支持CSS3所有选择器，还能用:eq(0)这种伪类精准定位。对了，选元素还有个冷知识——('div:visible')能直接筛出显示中的元素，做动态网页特好用。

二、事件绑定比系鞋带还简单？

说到交互，你肯定遇到过事件冒泡的坑。原生JS得用stopPropagation，jQuery直接event.stopPropagation()？错！人家早帮你优化过了，直接return false就能同时阻止冒泡和默认行为。

举个真实的案例：上周有个学员做电商网站的加入购物车按钮，死活搞不定重复提交。用jQuery的.one()方法，点一次就自动解绑事件，三行代码解决问题：

javascript复制$('#addCart').one('click', function(){
  // 这里写提交逻辑
});

??注意啊??：现在流行的事件委托，在jQuery里用.on()就能搞定。比如动态生成的评论列表，用$('#commentList').on('click', '.delete-btn', fn)，比原生JS的addEventListener清爽多了。

三、动态效果玩出花？这些API别浪费

别以为jQuery只能做基础的show/hide，人家内置的动画队列能玩出专业级操作。比如你想做个淘宝式的商品详情展开：

javascript复制$('.detail').slideUp(300).delay(500).fadeIn(400);

这串链式调用相当于：先花300ms收缩元素，等500ms再花400ms淡入。重点是什么？不用自己写setTimeout，动画自动排队执行。

说到这必须提个反常识的：jQuery的animate()方法支持CSS3动画！比如旋转效果：

javascript复制$('.icon').animate({
  rotate: '360deg'
}, 1000);

不过记得引入jquery-ui插件才能用高级特性哦。

四、Ajax请求居然能这么优雅？

现在虽然流行axios，但jQuery的$.ajax()仍然是教科书级的设计。举个例子，处理文件上传进度：

javascript复制$.ajax({
  url: '/upload',
  method: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  xhr: function(){
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e){
      var percent = Math.round((e.loaded / e.total) * 100);
      console.log(percent + '%');
    });
    return xhr;
  }
});

??看到没??？既能保持简洁语法，又能深度定制。不过要提醒新手：记得设置processData和contentType为false，不然传文件准出错。

五、链式操作是开挂了吧？

这是jQuery最爽的设计，没有之一。比如要给导航栏的当前页签加样式：

javascript复制$('.nav-item')
  .removeClass('active')
  .eq(2)
  .addClass('active')
  .find('.badge')
  .css('background', 'red');

这一串操作相当于：先移除所有元素的active类 → 选中第三个元素 → 添加active类 → 找到其子元素的徽章 → 修改背景色。要是用原生JS写，至少得写5行代码外加3个临时变量。

个人观点时间

虽然现在Vue/React当道，但我还是坚持让新人先学jQuery。为啥？就像学开车先练手动挡，jQuery能让你直观看到DOM操作的本质。再说现在还有83%的网站在用jQuery（W3Techs 2023数据），维护老项目必备技能啊。

不过要注意！别在新项目里无脑用jQuery，尤其是移动端开发。现在的浏览器API已经很完善了，像axios、fetch都能替代老方法。但话说回来，把jQuery玩6了，理解现代框架的响应式原理反而更容易——毕竟都是从操作DOM发展过来的嘛。

最后唠叨一句：别光看不动手！打开CodePen随便找个模板，把今天说的这些方法都实操一遍。遇到报错千万别慌，记住浏览器控制台的$()就是现成的调试工具。等你真正用jQuery撸出一个带交互动效的TODO List，那感觉...啧啧，就跟第一次骑自行车没摔跤一样爽！

本文由嘻道妙招独家原创，未经允许，严禁转载

jQuery常用方法详解：快速上手Web开发必备技巧