jquery函数大全(jQuery函数全解)
196人看过
jQuery作为前端开发领域的经典工具库，凭借其简洁的语法、强大的DOM操作能力和跨浏览器兼容性，长期占据着JavaScript工具库的核心地位。其函数体系以高效解决前端开发痛点为目标，通过链式调用、选择器机制、动画支持等特性，显著提升了开发效率。尽管现代前端框架层出不穷，但jQuery在快速原型开发、旧项目维护及轻量级交互场景中仍具有不可替代的价值。其函数设计遵循“少写多做”原则，将复杂的DOM操作抽象为直观的API，同时保持对浏览器差异的透明化处理，使得开发者能专注于功能实现而非兼容性问题。
核心价值体现在三个方面：首先，选择器机制将CSS样式与DOM元素精准绑定；其次，链式调用模式极大提升代码可读性；最后，标准化的事件处理与动画接口降低了学习成本。然而需注意，过度依赖jQuery可能导致对原生API的陌生，且部分功能在复杂场景下存在性能瓶颈。
一、选择器函数体系
jQuery选择器是函数体系的核心入口，通过$()函数实现元素精准定位。其设计融合CSS选择器语法，并扩展层级关系与动态匹配能力。
| 选择器类型 | 匹配规则 | 适用场景 |
|---|---|---|
| 基础选择器 | ID(id)、类(.class)、标签(element) | 静态元素定位 |
| 层级选择器 | 后代(空格)、子(>)、相邻(+)、通用(~) | 文档结构导航 |
| 过滤选择器 | :first/:last、:even/:odd、[attribute] | 动态条件筛选 |
| 内容选择器 | :contains(text)、:has(selector)、:empty | 文本/子元素匹配 |
| 表单选择器 | :input、:checked、:disabled | 交互状态判断 |
例如$("div.mod:visible")可同时匹配具有mod类且可见的div元素，相比原生document.querySelectorAll更具语义化优势。但需注意复杂选择器可能影响渲染性能，建议限制层级深度。
二、DOM操作函数族
围绕元素生命周期的CRUD操作构成jQuery核心功能，通过$()、.append()、.remove()等方法实现文档树管理。
| 操作类型 | 核心方法 | 返回值特性 |
|---|---|---|
| 查找元素 | .find(selector)、.children(selector)、.siblings() | 保留jQuery对象链式调用 |
| 创建元素 | $(" | 返回新创建的jQuery对象 |
| 修改内容 | .()/.text()、.val()、.replaceWith() | 支持双向赋值与取值 |
| 属性操作 | .attr(key,value)、.prop(state)、.removeAttr() | 区分属性与状态管理 |
| 样式控制 | .css(key:value)、.addClass()/.removeClass() | 支持批量操作与开关切换 |
典型应用如$("ul").append($("可实现列表项动态添加。需注意.attr()与.prop()的区别：前者用于静态属性（如href），后者用于布尔状态（如checked）。
三、事件处理机制
jQuery通过.on()方法统一事件绑定，支持命名空间与委托模式，有效解决动态元素事件监听问题。
| 功能分类 | 核心方法 | 特殊特性 |
|---|---|---|
| 基础绑定 | .click()/.hover()、.trigger(event) | 自动处理事件对象传递 |
| 事件解绑 | .off(["namespace"])、.unbind() | 支持按类型/命名空间清除 |
| 事件委托 | .on(event,"selector",handler) | 动态元素自动继承监听 |
| 命名空间 | .on("click.myNS")、.off(".myNS") | 精准控制事件作用域 |
| 自定义事件 | .triggerHandler() | 不触发浏览器默认行为 |
例如$(document).on("click",".delete-btn",function()...)可在异步加载的列表项上实现删除按钮监听。相较于原生addEventListener，jQuery事件对象自动包含pageX/pageY等扩展属性，简化坐标计算。
四、动画效果体系
jQuery通过.animate()方法构建可视化状态过渡，预置show/hide/toggle系列方法降低使用门槛。
| 动画类型 | 核心方法 | 参数特征 |
|---|---|---|
| 基础动画 | .fadeIn()/.slideUp()、.animate(props) | 支持持续时间与回调函数 |
| 自定义动画 | .animate(width:"+=100",1000) | 接受对象参数与相对值 |
| 队列控制 | .delay(ms)、.queue()/.dequeue() | 管理动画执行顺序 |
| 停止动画 | .stop(true,true) | 立即终止当前动画并清除队列 |
| 回调绑定 | .animate(...,function()...) | 支持多阶段事件触发 |
典型应用如$("box").slideToggle(300)实现手风琴效果。需注意动画队列机制：连续调用动画方法会形成执行队列，而.stop()可中断当前动画并可选是否清空队列。相较于CSS动画，jQuery动画更擅长处理动态属性变化。
五、Ajax交互规范
jQuery通过$.ajax()方法抽象XMLHttpRequest对象，提供.get/.post/.load等快捷接口，极大简化异步请求流程。
| 请求类型 | 核心方法 | 数据转换 |
|---|---|---|
| 基础请求 | $.ajax(type,url,data) | 自动序列化表单数据 |
| JSON处理 | .getJSON(url,callback) | 内置JSON.parse |
| 脚本注入 | .getScript(url) | 自动执行加载的JS代码 |
| 跨域请求 | $.ajax(crossDomain:true) | 需服务器设置CORS头 |
| 错误处理 | .fail(handler) | 统一异常捕获机制 |
例如$.post("/api",name:"test").done(function(res)...)可完成POST请求并处理响应。jQuery自动处理缓存控制（$.ajaxSetup(cache:false)）和数据格式化（$.param()），但需注意IE浏览器对X-Requested-With头的特殊处理。
六、工具函数集锦
jQuery提供大量实用工具函数，涵盖类型判断、数组操作、数值计算等日常开发需求。
| 功能类别 | 代表方法 | 使用场景 |
|---|---|---|
| 类型检测 | $.isArray(obj)、$.isFunction(fn) | 防御性编程必备 |
| 节点操作 | $(nodes).each(function()...) | 类数组统一处理 |
| 数据存储 | .data(key,value)、$.grep(array,filter) | 元素级键值对管理 |
| 延时执行 | $.deferred()、.promise() | |
| $.proxy(context, "method") |
例如$.inArray(item,array)实现数组元素定位，$.extend(deep,obj1,obj2)完成对象深拷贝。这些工具函数有效减少了自定义辅助方法的开发成本，但需注意$.extend的深浅合并区别。
七、插件扩展机制
jQuery通过$.fn对象暴露原型链，允许开发者通过闭包模式扩展自定义方法。标准插件通常包含三要素：封装功能、参数解析、链式返回。
- 封装模式：使用
(function($)...)(jQuery);避免全局污染
例如自定义highlight()插件：
(function($)
$.fn.highlight = function(color)
return this.css("backgroundColor", color || "yellow");
;
)(jQuery);调用时可直接链式使用：$(".text").highlight("ff0").fadeIn();
