jQuery API 参考

Posted 2020-11-23 alicell

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery API 参考相关的知识，希望对你有一定的参考价值。

选择器

??jQuery 最强大的一个地方就是把选择器从 CSS 带到了 javascript，从而可以用类似 CSS 的匹配规则来匹配元素。

说明	语法
基础选择
`$(document)`	选中文档
`$(‘body‘)`	选中 body
`$(‘this‘)`	选中当前元素
`$(‘*‘)`	选中所有元素
`$(‘#idName‘)`	id 选择器
`$(‘.className‘)`	类选择器
`$(‘p‘)`	元素选择器
`$(‘.class1, .class2‘)`	选中多个元素
层级选择：匹配子元素、后代元素、兄弟元素
`$(‘div > p‘)`	直接子元素
`$(‘div p‘)`	后代元素
`$(‘.prev + .next‘)`	下一个兄弟元素
`$(‘.prev ~ .siblings‘)`	所有兄弟元素
基本筛选：根据前一个匹配组结果进行筛选
`:not(selector)`	除括号外的所有元素
`:first`	第一个元素
`:last`	最后一个元素
`:even`	序号为偶数的元素
`:odd`	序号为基数的元素
`:eq(index)`	序号等于 `index` 的元素
`:gt(index)`	序号大于 `index` 的元素
`:lt(index)`	序号小于 `index` 的元素
`:animated`	正在进行动画的元素
`:root`	文档根元素
`:target`	由文档 URI 的格式化识别码表示的目标元素
`:lang`	指定语言的所有元素
`:header`	所有 `<h1>` ~ `<h6>` 元素
内容筛选：根据包含/不包含特定内容筛选
`:empty`	没有子节点的元素
`:parent`	拥有子节点的元素
`:contains(‘text‘)`	包含指定文本的元素
`:has(selector)`	至少包含一个指定选择器的元素
可见性筛选：根据元素的可见性筛选
`:hidden`	所有隐藏的元素
`:visible`	所有在页面占据控件的元素
子节点筛选
`:only-child`	是父元素的唯一元素
`:nth-child(n)`	第 n 个元素
`:nth-last-child(n)`	倒数第 n 个元素
`:first-child`	第一个子元素
`:last-child`	最后一个子元素
`:only-of-type`	所有没有兄弟元素，且具有相同的元素名称的元素
`:nth-of-type(n)`	同属于一个父元素之下，并且标签名相同的子元素中的第 n 个
`:nth-last-of-type(n)`	所有他们的父级元素的第 n 个子元素，计数从最后一个元素到第一个
`:first-of-type`	所有相同的元素名称的第一个兄弟元素
`:last-of-type`	所有元素之间具有相同元素名称的最后一个兄弟元素
属性筛选：与 `CSS` 的属性匹配类似
`[attr]`	拥有指定属性的元素，以下属性均以匹配指定属性为前提
`[attr="value"`]	匹配指定值的元素
`[attr!="value"`]	值不等于指定值的元素
`[attr^="value"`]	以指定值开头的元素
`[attr$="value"`]	以指定值结尾的元素
`[attr*="value"`]	包含特定值的元素
`[attr~="value"`]	属性值是以空格分隔的多个值中的一个
`[attr\|="value"`]	等于指定值，或者以指定值开头
表单筛选：快速匹配特定表单元素
`:input`	所有 `input` 元素
`:text`	所有 `text` 类型的 `input` 元素
`:password`	所有 `password` 类型的元素
`:radio`	所有单选框
`:checkbox`	所有复选框
`:submit`	所有提交按钮
`:image`	所有图片按钮
`:reset`	所有重置按钮
`:button`	所有 `button` 元素
`:file`	所有文件选择器
`:selected`	所有被选中的列表项
`:enabled`	所有可用的表单新元素
`:disabled`	所有禁用的表单元素
`:checked`	所有选中的单选/复选框
`:focus`	当前获取焦点的元素

回到顶部

遍历和筛选

语法	说明
查找或遍历 DOM
`.index()`	从匹配的元素中搜索给定元素的索引值，从 0 开始
`.toArray()`	返回一个包含 `jQuery` 对象集合中的所有 `DOM` 元素的数组
`.find()`	在当前结果内选取符合的元素
`.closet()`	在当前结果内寻找最近的祖先
`.parent()`	当前选取结果的直接父节点
`.parents()`	当前选取结果的所有直接父节点
`.parentsUnit()`
`.children()`	当前选取结果的所有子节点
`.siblings()`	当前选取结果的所有兄弟节点
`.next()`	当前选取结果的下一个兄弟节点
`.nextAll()`	当前选取结果的后面所有兄弟节点
`.nextUnit()`
`.prev()`	当前选取结果的前一个兄弟节点
`.prevAll()`	当前选取结果的前面所有兄弟节点
`.prevUnit()`
添加元素或再筛选
`.is()`	检查当前筛选结果是否满足条件
`.add()`	为匹配的元素集合添加元素
`.addBack()`	添加堆栈中元素集合到当前集合
`.find()`	在匹配结果集中查找符合这个选择器的结果后代
`.filter()`	筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合
`.has()`	相当于 `:has()`
`.not()`	相当于 `:not()`
`.first()`	获取匹配元素集合中第一个元素
`.last()`	获取匹配元素集合中最后一个元素
`.each()`	遍历一个 `jQuery` 对象，为每个匹配元素执行一个函数
`.map()`	通过一个函数匹配当前集合中的每个元素，生成一个新的 `jQuery` 对象
`.slice()`	根据指定的下标范围，过滤匹配的元素集合，生成一个新的 `jQuery` 对象

回到顶部

属性操作

语法	说明
class 属性
`.hasClass(string)`	查询是否含有指定类名
`.addClass(string \| function(index))`	添加一个或类名
`.toggleClass(string \| function [, switch])`	切换类名
`.removeClass([string \| function(index, class)])`	删除一个、多个或全部类名
css 属性
`.css()`	获取或设置 `CSS` 属性
`.width()`	获取或设置元素的宽度
`.height()`	获取或设置元素的高度
`.innerWidth()`	返回元素的宽度，包括左右 `padding`
`.innerHeight()`	返回元素的高度，包括左右 `padding`
`.outerWidth([true])`	返回元素的宽度，包括左右 `padding` 和 `border` ，传入 `true` 将包括 `margin`
`.outerHeight([true])`	返回元素的高度，包括左右 `padding` 和 `border` ，传入 `true` 将包括 `margin`
`.position()`	获取元素相对于父元素的偏移位置
`.offset()`	获取或设置元素的坐标(相对于文档)
`.scrollLeft()`	获取或设置元素的水平滚动条的位置
`.scrollTop()`	获取或设置元素的垂直滚动条的位置
`jQuery.cssNumber`	一个包含所有 `CSS` 属性的对象
通用属性操作
`.attr()`	获取或设置元素的属性值，会覆盖同类值
`.val()`	获取或设置元素的值，常用于表单
`.prop()`	获取或设置元素的 `property`、`disabled`、`checked`等
`.removeAttr()`	为匹配的元素集合中的每个元素中移除一个属性
`.removeProp()`	为集合中匹配的元素删除一个 `property` 属性
`.data()`	在匹配元素上存储任意相关数据
`.removeData()`	在元素上移除绑定的数据

回到顶部

增删改元素

语法	说明
复制元素
`.clone()`	创建一个匹配的元素集合的深度拷贝副本
插入到现有元素内
`.html()`	获取或设置 a 的 `HTML` 内容(渲染标签)
`.text()`	获取或设置 a 的 `HTML` 内容(不渲染标签)
`a.append(b)`	b 添加到 a 的末尾
`a.appendTo(b)`	a 添加到 b 的末尾
`a.prepend(b)`	b 添加到 a 的开始
`a.prependTo(b)`	a 添加到 b 的开始
插入到现有元素外
`a.after(b)`	b 添加至 a 后面
`a.before(b)`	b 添加至 a 前面
`a.insertAfter(b)`	a 添加至 b 前面
`a.insertBefore(b)`	a 添加至 b 后面
插入并包裹现有内容
`.wrap()`	在每个匹配的元素外层包上一个 `HTML` 元素
`.wrapAll()`	在所有匹配元素外面包一层 `HTML` 结构
`.wrapInner()`	在匹配元素里的内容外包一层结构
删除元素
`.detach()`	从 `DOM` 中去掉所有匹配的元素，但不删除事件及 `jQuery` 数据
`.remove()`	将匹配元素集合从 `DOM` 中删除，同时移除元素上的事件及 `jQuery` 数据
`.empty()`	从 `DOM` 中移除集合中匹配元素的所有子节点
`.unwrap()`	将匹配元素集合的父级元素删除，保留自身在原来的位置
替换元素
`.replaceAll()`	用集合的匹配元素替换每个目标元素
`.replaceWith()`	用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

回到顶部

特效

语法	说明
基础特效
`.hide()`	隐藏匹配的元素
`.show()`	显示匹配的元素
`.toggle()`	显示或隐藏匹配元素
`.fadeIn()`	通过淡入过渡状态
`.fadeOut()`	通过淡出过渡状态
`.fadeTo()`	通过调整匹配元素的透明度过渡状态
`.fadeToggle()`	淡入/淡出切换
`.slideUp()`	上拉隐藏元素
`.slideDown()`	下拉显示元素
`.slideToggle()`	上拉/下拉切换
自定义特效
`.delay()`	设置一个延时来推迟执行队列中后续的项
`.stop()`	停止匹配元素当前正在运行的动画
`.animate()`	根据一组 `CSS` 属性，执行自定义动画
`.finish()`	停止正在运行的动画，删除队列中的的动画，并完成所有匹配元素的动画
`.queue()`	显示在匹配的元素上的已经执行的函数队列
`.dequeue()`	执行匹配元素队列的下一个函数
`.clearQueue()`	从列队中移除所有未执行的项
`jQuery.speed`	创建一个包含一组准备在自定义动画中使用的属性的对象
`jQuery.fx.off`	全局禁用所有动画
`jQuery.fx.interval`	定义动画的频率(ms)

回到顶部

Ajax

??jQuery 另一个强大的功能就是对 Ajax 的封装。

语法	说明
快捷方法
`.load(url, [data, completeCallback])`	从服务器载入数据并且将返回的 `HTML` 代码并插入至匹配的元素中
`jQuery.get(url, [data, successCallback, dataType])`	使用 `GET` 请求从服务器加载数据
`jQuery.post(url, [data, successCallback, dataType])`	使用 `POST` 请求从服务器加载数据
`jQuery.getJSON(url, [data, successCallback])`	使用 `GET` 请求从服务器加载 `JSON` 数据
`jQuery.getScript(url, [data, successCallback])`	使用 `GET` 请求从服务器加载并执行一个 `JavaScript` 文件
底层接口
`jQuery.ajax(url, [settings])`	执行一个异步的 `Ajax` 的请求
`jQuery.ajaxSetup(options)`	为 `Ajax` 请求设置默认的值
`jQuery.ajaxTransport(dataType, handler)`	创建一个用于处理 `Ajax` 数据传输的对象
`jQuery.ajaxPrefilter([dataTypes], handler)`	发送 `Ajax` 请求前预设选项或修改现有选项
辅助函数
`jQuery.param(obj)`	创建一个数组或对象序列化的的字符串，适用于一个 `URL` 地址查询字符串或 `Ajax` 请求
`.serialize()`	将用作提交的表单元素的值编译成字符串
`.serializeArray()`	将用作提交的表单元素的值编译成拥有 `name` 和 `value` 对象组成的数组
注册全局 `Ajax` 回调
`.ajaxSend(callback)`	注册 `Ajax` 请求发送之前的回调
`.ajaxStart(callback)`	注册 `Ajax` 请求刚开始时的回调
`.ajaxStop(callback)`	注册 `Ajax` 请求停止时的回调
`.ajaxComplete(callback)`	注册 `Ajax` 请求完成时的回调
`.ajaxError(callback)`	注册 `Ajax` 请求出错时的回调
`.ajaxSuccess(callback)`	注册 `Ajax` 请求成功时的回调

回到顶部

事件

绑定事件处理器和事件对象：

语法	说明
用于绑定事件处理器的方法
`.bind()`	为一个元素绑定一个事件处理程序
`.unbind()`	从元素上删除一个以前绑定的事件处理程序
`.delegate()`	为所有匹配选择器的元素绑定一个或多个事件处理函数
`.undelegate()`	删除当前选择器匹配的所有元素的事件处理程序，根据一组特定根元素的集合
`.on()`	在选定的元素上绑定一个或多个事件处理函数
`.off()`	移除一个事件处理函数
`.one()`	为元素的事件添加处理函数，该事件最多只执行一次
`.trigger()`	根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
`.triggerHandler()`	为一个事件执行附加到元素的所有处理程序
事件对象的属性和方法
`e.target`	触发事件的 `DOM` 元素
`e.relatedTarget`	事件中涉及的其它任何 `DOM` 元素
`e.currentTarget`	在事件冒泡过程中的当前 `DOM` 元素
`e.delegateTarget`	当前正在调用 `jQuery` 事件处理器的元素
`e.type`	事件的类型
`e.data`	添加事件监听时传递给的数据对象
`e.metaKey`	事件触发时按下的 `Meta` 键
`e.which`	针对键盘和鼠标事件，指示到底按的是哪个键
`e.timeStamp`	事件触发时距离 1970-01-01 的毫秒数
`e.namespace`	当事件被触发时此属性包含指定的命名空间
`e.pageX`	鼠标相对于文档的左边缘的位置（左边）
`e.pageY`	鼠标相对于文档的顶部边缘的位置（坐标）
`e.result`	事件被触发的一个事件处理程序的最后返回值，除非值是 `undefined`
`e.preventDefault`	取消事件默认行为
`e.stopPropagation()`	取消事件冒泡
`e.stopImmediatePropagation()`	阻止剩余的事件处理函数执行并且取消事件冒泡
`e.isDefaultPrevented()`	指示事件对象是否调用过 `event.preventDefault()`
`e.isPropagationStopped()`	指示事件对象是否调用过 `event.stopPropagation()`
`e.isImmediatePropagationStopped()`	指示事件对象是否调用过 `event.stopImmediatePropagation()`

事件类型：

语法	说明
文档加载
`.load()`	为 javascript 的 `load` 事件添加监听
`.unload()`	为 javascript 的 `unload` 事件添加监听
`.ready()`	当 `DOM` 准备就绪时执行回调函数
浏览器事件
`.resize()`	为 javascript 的 `resize` 事件添加监听，或触发该事件
`.scroll()`	为 javascript 的 `scroll` 事件添加监听，或触发该事件
`.error()`	为 javascript 的 `error` 事件添加监听
表单事件
`.blur()`	为 javascript 的 `blur` 事件添加监听，或触发该事件
`.focus()`	为 javascript 的 `focus` 事件添加监听，或触发该事件
`.focusin()`	将一个事件函数绑定到 `focusin` 事件
`.focusout()`	将一个事件函数绑定到 `focusout` 事件
`.change()`	为 javascript 的 `change` 事件添加监听，或触发该事件
`.select()`	为 javascript 的 `select` 事件添加监听，或触发该事件
`.submit()`	为 javascript 的 `submit` 事件添加监听，或触发该事件
键盘事件
`.keydown()`	为 javascript 的 `keydown` 事件添加监听，或触发该事件
`.keypress()`	为 javascript 的 `keypress` 事件添加监听，或触发该事件
`.keyup()`	为 javascript 的 `keyup` 事件添加监听，或触发该事件
鼠标事件
`.hover()`	为 hover 行为添加事件监听
`.contextmenu()`	为 javascript 的 `contextmenu` 事件添加监听，或触发该事件
`.click()`	为 javascript 的 `click` 事件添加监听，或触发该事件
`.dbclick()`	为 javascript 的 `dbclick` 事件添加监听，或触发该事件
`.mousedown()`	为 javascript 的 `mousedown` 事件添加监听，或触发该事件
`.mouseup()`	为 javascript 的 `mouseup` 事件添加监听，或触发该事件
`.mouseenter()`	为 javascript 的 `mouseenter` 事件添加监听，或触发该事件
`.mouseleave()`	为 javascript 的 `mouseleave` 事件添加监听，或触发该事件
`.mouseout()`	为 javascript 的 `mouseout` 事件添加监听，或触发该事件
`.mouseover()`	为 javascript 的 `mouseover` 事件添加监听，或触发该事件
`.mousemove()`	为 javascript 的 `mousemove` 事件添加监听，或触发该事件

回到顶部

其他

语法	说明
`jQuery.proxy()`	接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境
`jQuery.ready()`	当文档对象可用时
`jQuery.holdReady()`	暂停或恢复 `ready()` 事件的执行
`jQuery.noConflict()`	命令冲突时为 `jQuery` 设置别名

回到顶部

以上是关于jQuery API 参考的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

jQuery API 参考

目录