jQuery 核心知识汇总

jQuery 曾是前端开发的 “标配”封装了 DOM/BOM 操作、AJAX、事件处理等核心能力但在 Vue3 CRM 开发中它更多是兼容老系统 / 第三方插件的角色而非主力工具。下面从「核心定位→核心用法→Vue3 替代方案→CRM 实战兼容」全维度讲解帮你理清 jQuery 在现代 CRM 开发中的价值。一、核心定位jQuery 在 Vue3 CRM 中的角色先明确 jQuery 的核心价值和适用场景避免 “盲目用” 或 “完全不用”表格维度jQuery 核心能力Vue3 CRM 适用场景不适用场景核心优势简洁的 DOM 操作、兼容多浏览器、丰富的插件生态1. 维护 CRM 老系统基于 jQuery 开发2. 集成依赖 jQuery 的第三方插件如旧版报表 / 编辑器3. 快速编写临时脚本如批量操作 DOM1. 新开发的 Vue3 组件2. 响应式数据管理3. 大型 CRM 单页应用核心逻辑对比 Vue3命令式操作 DOM无响应式兼容 / 过渡场景核心业务逻辑、组件化开发关键结论新代码优先用 Vue3 原生 API 组合式函数不用 jQuery老代码兼容维护时保留 jQuery逐步迁移到 Vue3插件集成若第三方插件依赖 jQuery如jquery.datatables可局部引入 jQuery避免全局污染。二、jQuery 核心用法CRM 兼容 / 维护必备1. 快速集成Vue3 项目中局部引入不推荐全局引入 jQuery污染全局变量仅在需要的文件中局部引入bash运行# 安装 npm install jquery -S # TS 类型可选 npm install types/jquery -Dtypescript运行// 在需要的文件中引入 import $ from jquery; // 或仅在 CDN 引入老系统兼容 // script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script2. 核心 DOM 操作CRM 老系统高频jQuery 简化了原生 DOM 操作这也是它最核心的价值运行// 1. 选择器比原生更简洁 const $customerList $(.customer-list); // 类选择器 const $submitBtn $(#submit-btn); // ID 选择器 const $input $(input[namephone]); // 属性选择器 const $firstItem $customerList.find(.item:first); // 子元素筛选 // 2. 创建/添加元素 const $newTag $(span classtag高价值客户/span); $(.tag-container).append($newTag); // 追加到末尾 $(.tag-container).prepend($newTag); // 插入到开头 $newTag.insertBefore(.target-item); // 插入到指定元素前 // 3. 修改元素 $(.customer-name).text(李四); // 设置文本安全防 XSS $(.customer-desc).html(span意向客户/span); // 设置 HTML慎用 $(.avatar).attr(src, new-avatar.png); // 设置属性 $(.avatar).removeAttr(title); // 移除属性 $(.alert).css({ color: #f5222d, backgroundColor: #fef0f0 }); // 设置样式 $(.alert).addClass(hidden); // 添加类 $(.alert).removeClass(hidden); // 移除类 $(.alert).toggleClass(hidden); // 切换类 // 4. 删除元素 $(.tag-remove).remove(); // 删除自身 $(.tag-container).empty(); // 清空子元素3. 事件处理CRM 交互兼容javascript运行// 1. 绑定事件 $(.submit-btn).click(() { console.log(提交 CRM 表单); }); $(.search-input).on(input, debounce(() { console.log(搜索输入); }, 500)); // 结合防抖 // 2. 事件委托列表批量操作 $(.customer-list).on(click, .delete-btn, function() { const customerId $(this).data(id); // 获取>4. AJAX 请求老系统接口调用jQuery 的$.ajax曾是前端请求的标配现在已被fetch/axios替代但老 CRM 系统仍在使用javascript运行// 1. 基础 GET 请求 $.get(/api/customers, { page: 1, size: 10 }, (res) { console.log(客户列表, res); }, json); // 2. 基础 POST 请求 $.post(/api/customers, { name: 张三, phone: 13800138000 }, (res) { console.log(创建客户成功, res); }); // 3. 完整 AJAX 配置CRM 复杂请求 $.ajax({ url: /api/orders, method: PUT, data: JSON.stringify({ id: 1, status: 已付款 }), contentType: application/json, timeout: 5000, success: (res) { console.log(更新订单成功, res); }, error: (xhr, status, error) { console.error(请求失败, error); }, complete: () { console.log(请求完成无论成功/失败); } });5. 工具函数CRM 数据处理jQuery 内置了一些实用工具函数部分可被 Lodash-es 替代javascript运行// 1. 数组/对象遍历 $.each([1, 2, 3], (index, value) { console.log(index, value); }); $.each({ name: 张三, phone: 13800138000 }, (key, value) { console.log(key, value); }); // 2. 数据类型判断 $.type(张三); // string $.type([]); // array $.isEmptyObject({}); // true // 3. 防抖简化版不如 Lodash 强大 const debouncedFn $.debounce(() {}, 500); // 4. 深拷贝简单场景 const obj { name: 张三, contact: { phone: 13800138000 } }; const cloneObj $.extend(true, {}, obj);三、Vue3 替代 jQuery 的方案CRM 新开发现代 CRM 开发中所有 jQuery 能做的事都有更优的 Vue3 替代方案表格jQuery 功能Vue3 替代方案示例代码DOM 选择 / 操作ref 原生 DOM APItsconst listRef refHTMLDivElement(null);onMounted(() {listRef.value?.classList.add(loaded);});|| 事件绑定 | Vue 模板事件绑定 组合式 API | vue template button clickhandleSubmit提交/button /template script setup const handleSubmit () {}; /script | | 事件委托 | Vue 事件修饰符 父元素事件绑定 | vue template div clickhandleListClick div v-foritem in list :keyitem.id :data-iditem.id {{ item.name }} /div /div /template script setup const handleListClick (e) { const target e.target as HTMLElement; const id target.dataset.id; }; /script | | AJAX 请求 | axios/fetch 封装请求函数 | ts import axios from axios; const getCustomerList async () { const res await axios.get(/api/customers, { params: { page: 1 } }); return res.data; }; | | 工具函数遍历/拷贝| Lodash-es 原生 JS | ts import { each, cloneDeep } from lodash-es; each([1,2,3], (v) console.log(v)); const clone cloneDeep(obj); | | 动画/效果 | CSS 过渡 Vue Transition | vue template Transition namefade div v-ifshow客户信息/div /Transition /template style .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter-from, .fade-leave-to { opacity: 0; } /style | ## 四、CRM 实战jQuery 与 Vue3 共存兼容 ### 场景1Vue3 项目中集成 jQuery 插件如旧版报表 vue template div refchartRef idreport-chart/div /template script setup langts import { ref, onMounted, onUnmounted } from vue; import $ from jquery; // 引入依赖 jQuery 的报表插件 import jquery-report-plugin; const chartRef refHTMLDivElement | null(null); onMounted(() { // 确保 DOM 挂载后初始化插件 if (chartRef.value) { $(#report-chart).reportPlugin({ data: [/* CRM 报表数据 */], type: bar }); } }); onUnmounted(() { // 销毁插件避免内存泄漏 $(#report-chart).reportPlugin(destroy); }); /script场景 2老 jQuery 系统逐步迁移到 Vue3html预览!-- 老系统页面jQuery -- div idapp !-- Vue3 组件挂载点 -- div idvue-customer-list/div !-- jQuery 原有内容 -- div idjquery-order-list/div /div script srcjquery.min.js/script script srcvue.global.prod.js/script script // 1. 初始化 jQuery 原有逻辑 $(function() { $(#jquery-order-list).load(/api/orders, (res) { // 原有订单列表渲染逻辑 }); }); // 2. 挂载 Vue3 组件逐步替换 const { createApp } Vue; createApp({ setup() { // Vue3 客户列表逻辑 const customerList Vue.ref([/* 数据 */]); return { customerList }; }, template: div v-foritem in customerList :keyitem.id {{ item.name }} /div }).mount(#vue-customer-list); /script场景 3jQuery 与 Vue3 数据同步javascript运行// Vue3 组件中暴露数据到全局供 jQuery 调用 const app createApp({ setup() { const customerId Vue.ref(1); // 暴露到 window供 jQuery 访问 window.vueCustomerId customerId; return { customerId }; } }).mount(#app); // jQuery 中修改 Vue3 响应式数据 $(.change-id-btn).click(() { window.vueCustomerId.value 2; // 触发 Vue3 视图更新 }); // Vue3 中监听 jQuery 修改的 DOM 数据 onMounted(() { $(document).on(customer-id-change, (e, id) { customerId.value id; }); }); // jQuery 触发自定义事件 $(.trigger-btn).click(() { $(document).trigger(customer-id-change, [3]); });五、核心避坑点1. Vue3 响应式数据与 jQuery DOM 操作冲突问题jQuery 修改 Vue3 渲染的 DOM导致 Vue 响应式失效Vue 不知道 DOM 被修改解决方案永远不要用 jQuery 修改 Vue3 模板渲染的 DOM如需修改通过 Vue 响应式数据驱动而非直接操作 DOM。2. 全局引入 jQuery 导致变量污染问题全局引入$可能与其他库如 Zepto冲突解决方案局部引入 jQueryimport $ from jquery使用noConflict避免冲突javascript运行const jq $.noConflict(); jq(.customer-list).hide(); // 用 jq 替代 $3. 内存泄漏插件 / 事件未销毁问题jQuery 插件 / 事件在 Vue 组件卸载后未销毁导致内存泄漏解决方案在 VueonUnmounted钩子中销毁插件、解绑事件避免给document/window绑定永久事件。4. AJAX 请求重复封装问题同时使用 jQuery$.ajax和 Vue3 项目中的axios导致请求逻辑冗余解决方案新代码统一用axios老 jQuery 代码逐步迁移到axios封装统一的请求拦截器 / 响应拦截器。总结关键点回顾角色定位jQuery 在 Vue3 CRM 中是 “兼容工具”而非 “主力工具”—— 新开发不用老系统 / 插件兼容时用核心用法DOM 操作、事件委托、AJAX 是 jQuery 最核心的价值也是老 CRM 系统维护的重点替代方案Vue3 Lodash-es axios 可完全替代 jQuery 的所有功能且更符合现代前端开发范式兼容原则jQuery 与 Vue3 共存时避免互相修改对方的 DOM / 数据局部引入 jQuery避免全局污染组件卸载时销毁 jQuery 插件 / 事件防止内存泄漏迁移策略老 CRM 系统可逐步用 Vue3 替换 jQuery 模块先替换非核心功能再替换核心逻辑。简单来说jQuery 是 “过去的神器”但在 Vue3 主导的现代 CRM 开发中它的价值更多是 “兜底兼容”—— 理解它的核心用法能搞定老系统维护和插件集成掌握 Vue3 的替代方案能写出更优雅、可维护的新代码。