JQuery
yuhuo2022-03-03前端库集合工具库
一. 创建对象
// 传入选择器
var $ele = jQuery("#box");
// 传入元素对象，使用 $ 作为 jQuery 的别名
var $ele = $(document.getElementById("box"));
二. 静态属性
| 静态属性 | 描述 |
|---|---|
| fn | 返回 jQuery 类的原型对象 |
三. 静态方法
| 静态方法 | 描述 |
|---|---|
| ajax({name: value, name: value, ... }) | 执行 ajax 请求 |
| get(URL[, data, function(data,status,xhr), dataType]) | 执行 ajax get 请求 |
| post(URL[, data, function(data,status,xhr), dataType]) | 执行 ajax post 请求 |
| escapeSelector(selector) | 转义选择器特殊字符 |
| noConflict() | 释放 $ 别名的引用，解决命名冲突 |
四. 原型属性
| 原型属性 | 描述 |
|---|---|
| length | 返回元素集中的数量 |
| [index] | 返回元素集中指定序号的元素的 dom 对象 |
| jquery | 返回 jQuery 的版本号 |
五. 原型方法
1. 遍历
| 原型方法 | 描述 | |
|---|---|---|
| 祖先 | parent([selector]) | 返回匹配指定选择器的直接父元素 |
| parents([selector]) | 返回匹配指定选择器的所有祖先元素 | |
| parentsUntil([stop, selector]) | 返回当前元素与 stop 元素之间，并匹配指定选择器的所有祖先元素 stop 取值：selector，element，jq | |
| closest(selector) | 返回匹配指定选择器的第一个祖先元素 | |
| ============== | ============== | |
| 后代 | children([selector]) | 匹配指定选择器的直接子元素 |
| find([selector]) | 返回匹配指定选择器的所有后代元素 | |
| ============== | ============== | |
| 同级 | siblings([selector]) | 返回匹配指定选择器的所有同级元素 |
| next([selector]) | 返回匹配指定选择器的所有同级后一个元素 | |
| nextAll([selector]) | 返回匹配指定选择器的所有同级后面所有元素 | |
| nextUntil([stop, selector]) | 返回当前元素与 stop 元素之间，并匹配指定选择器的所有同级后面元素 stop 取值：selector，element，jq | |
| prev([selector]) | 返回匹配指定选择器的所有同级前一个元素 | |
| prevAll([selector]) | 返回匹配指定选择器的所有同级前面所有元素 | |
| prevUntil([stop, selector]) | 返回当前元素与 stop 元素之间，并匹配指定选择器的所有同级前面元素 stop 取值：selector，element，jq | |
| ============== | ============== | |
| 过滤 | first() | 返回当前元素集的首个元素 |
| last() | 返回当前元素集的最后一个元素 | |
| eq(index) | 返回当前元素集的指定序号的元素 | |
| slice(start[, stop]) | 返回当前元素集的指定开始结束序号区间的元素 | |
| filter(selector) | 返回当前元素集中匹配选择器的元素 | |
| not(selector) | 返回当前元素集中不匹配选择器的元素 | |
| has(selector) | 返回当前元素集中后代匹配指定选择器的元素 | |
| is(selector) | 判断当前元素是否匹配选择器 | |
| ============== | ============== | |
| 获取 | each(function(index,element)) | 循环读取当前元素集中每个元素 |
| get(index) | 获取当前元素集的指定序号的元素的 dom 对象 |
2. HTML
| 原型方法 | 描述 | |
|---|---|---|
| 内容 | html([str/element/jq]) | 设置/返回 html 内容 |
| text([str]) | 设置/返回文本内容 | |
| val([str]) | 设置/返回 value 属性值（只有表单元素才有 value 属性） | |
| ============== | ============== | |
| 属性 | attr(name[, value]) | 设置/返回属性（不包括布尔属性） |
| removeAttr(name) | 删除属性 | |
| prop(name[, value]) | 设置/返回属性（不包括自定义属性） | |
| removeProp(name) | 删除属性 | |
| ============== | ============== | |
| 添加 | append(str/element/jq...) | 添加 / 移动目标元素至当前元素的最后一个子节点 |
| prepend(str/element/jq...) | 添加 / 移动一个或多个目标元素至当前元素的第一个子节点 | |
| after(str/element/jq...) | 添加 / 移动一个或多个目标元素至当前元素的同级前面 | |
| before(str/element/jq...) | 添加 / 移动一个或多个目标元素至当前元素的同级后面 | |
| appendTo(selector/element/jq) | 添加 / 移动当前元素至目标元素的最后一个子节点 | |
| prependTo(selector/element/jq) | 添加 / 移动当前元素至目标元素的第一个子节点 | |
| insertAfter(selector/element/jq) | 添加 / 移动当前元素至目标元素的同级前面 | |
| inserBefore(selector/element/jq) | 添加 / 移动当前元素至目标元素的同级后面 | |
| ============== | ============== | |
| 删除 | empty() | 清空子元素 |
| remove([selector]) | 删除当前元素及其子元素（通过 jquery 绑定的事件也会被移除） | |
| detach([selector]) | 删除当前元素及其子元素 | |
| ============== | ============== | |
| 样式 | addClass(name...) | 添加一个或多个类 |
| removeClass(name...) | 删除一个或多个类 | |
| toggleClasss(name) | 添加删除类切换 | |
| hasClass(name) | 判断是否有指定类 | |
| css(name[, value]) | 设置/返回样式 | |
| ============== | ============== | |
| 尺寸 | width(num/str) | 设置/返回宽度 content-box：css -> width = width() border-box：css -> width = outerWidth() |
| height(num/str) | 设置/返回高度 | |
| innerWidth() | 返回宽度 + 内边距 | |
| innerHeight() | 返回高度 + 内边距 | |
| outerWidth(withMargin) | 返回宽度 + 内边距 + 边框 [+ 外边距] | |
| outerHeight(withMargin) | 返回高度 + 内边距 + 边框 [+ 外边距] | |
| 滚动 | ============== | ============== |
| scrollTop([position]) | 设置/获取顶侧滚动距离 | |
| scrollLeft([position]) | 设置/获取左侧滚动距离 |
3. 效果
| 原型方法 | 描述 |
|---|---|
| show([speed, callback]) | 显示，speed 速度：slow，fast，毫秒数值 |
| hide([speed, callback]) | 隐藏 |
| toggle([speed, callback]) | 显示隐藏切换 |
| fadeIn([speed, callback]) | 淡入 |
| fadeOut([speed, callback]) | 淡出 |
| fadeToggle([speed, callback]) | 淡入淡出切换 |
| fadeTo(speed, opacity[, callback]) | 淡至指定透明度 |
| slideDown([speed, callback]) | 滑下伸展 |
| slideUp([speed, callback]) | 滑上收缩 |
| slideToggle([speed, callback]) | 滑下滑上切换 |
| animate({param}[, speed, callback]) | 开启动画 |
| stop(stopAll,goToEnd) | 停止动画 stopAll : true 停止所有队列, false 仅停止当前动画(默认) goToEnd : true 立即完成当前动画, false 不完成(默认) |
| finish([queueName]) | 完成所有动画 |
4. 事件
| 原型方法 | 描述 |
|---|---|
| bind(event, data, function) | 绑定事件 |
| unbind(event, function, eventObj) | 解绑事件 |
| on(event, childSelector, data, function) | 绑定后代元素事件 |
| off(event, childSelector, function, map) | 解绑后代元素事件 |
| trigger(event) | 触发事件 |
| [event] (function) | 绑定指定事件 |
说明
- data 是传入到 function 参数中的 event.data
- 文档就绪事件（其实为 DOMContentLoaded 事件），避免在文档就绪前调用 jquery 导致获取元素失败，通过 $(document).ready(function(){ }) 绑定，可简写为 $(function(){ })