如何使用jquery：基础上手与避坑要点

如何使用jquery，你可以通过CDN引入、本地文件引入两种方式加载库文件，在DOM加载完成回调内书写选择器、事件绑定、动画、AJAX请求代码，适配静态网页、传统后端渲染页面，不适用于Vue、React这类虚拟DOM框架主导的项目，jQuery3.x系列不再支持IE8及更早版本浏览器，编写代码前优先确认目标运行环境浏览器版本。

如何使用jquery引入库文件

CDN引入不需要下载文件，直接在HTML的head或者body结束标签上方写入script标签，填写公开稳定的CDN地址，加载速度依托用户网络与节点状态，适合快速调试、原型页面。本地引入需要先下载对应版本的jQueryjs文件，放到项目目录内，script标签的src属性填写相对路径，离线开发场景下稳定性更好，不会受外部CDN服务波动影响。

引入顺序必须放在jQuery代码之前，浏览器自上而下解析脚本，提前加载库才能识别$这个jQuery别名。

如何使用jquery基础选择与事件

选择器沿用CSS选择语法，$("选择器")用来获取页面元素，返回jQuery包装对象，你可以链式调用多个方法，连续执行元素样式修改、内容读写、事件绑定操作，减少重复查询DOM的开销。事件绑定常用on方法，支持动态新增元素事件委托，直接click绑定只对页面初始存在的元素生效，新增节点无法触发回调，这是高频出错点。

DOM就绪回调写法为$(function(){业务代码})，等价于$(document).ready()，可以避免DOM节点还没渲染完成就执行代码，导致获取不到元素的情况，不要把jQuery代码随意放在head标签中而不加这个包裹。

如何使用jquery执行请求与动画

ajax方法用来发起异步请求，支持get、post请求方式，通过data参数传递请求数据，success回调接收后端返回结果，error回调捕获请求异常，现代开发中fetch、axios使用占比持续提升，但存量老项目维护时，jQueryajax仍能满足基础接口交互需求。animate方法支持修改元素数值型CSS属性，设置持续时长与缓动效果，适合简单过渡动画，复杂交互动画更推荐CSStransition。

jQuery内部$可以和其他库冲突，调用$.noConflict()可以释放$别名，改用jQuery关键字调用库功能。

你在现代前端工程化项目里，尽量减少新增jQuery业务代码，这类项目依赖ES模块规范，jQuery缺少原生模块化支持，集成后容易出现变量作用域混乱、打包冗余的问题。