jQuery_06参考手册
2023-11-17 本文已影响0人
tzktzk1
jQuery 参考手册
包含完整的jQuery参考文档。
jQuery参考
jQuery参考包含所有jQuery选择器，方法，属性和事件的列表以及示例。
jQuery 选择器参考手册
jQuery选择器允许您选择和操作HTML元素。
jQuery选择器
本节包含属于最新jQuery JavaScript库的选择器的完整列表。
所有选择器都分为几类。
元素选择器
选择器 例 说明
* $("*") 选择所有元素（通用选择器）
#id $("#demo") 选择一个具有id="demo"的元素
.class $(".demo") 选择所有具有class="demo"的元素
element $("p") 选择所有<p>元素
selector1, selector2 $("p, div") 选择所有<p>元素和所有<div>元素
层级选择器
选择器 例 说明
ancestor descendant $("div p") 选择<div>元素内的所有<p>元素
parent > child $("div > p") 选择所有<p>元素，其中父元素是<div>元素
prev + next $("div + p") 选择紧接在<div>元素之后的所有<p>元素
prev ~ siblings $("div ~ p") 选择作为<div>元素同级的所有<p>元素
属性选择器
选择器 例 说明
[attribute] $("[target]") 选择具有target属性的所有元素
[attribute=value] $("a[href='CSS3']") 选择所有href属性值等于“ CSS3”的<a>元素
[attribute!=value] $("a[href!='CSS3']") 选择所有href属性值不等于“ CSS3”的<a>元素
[attribute~=value] $("[alt~=Parrot]") 选择所有具有alt属性且包含单词“ Parrot”的元素
[attribute|=value] $("[lang|=en]") 选择所有以“ en”开头的lang属性值的元素
[attribute^=value] $("a[href^=https]") 选择每个<a>元素其href属性值以“ https”开头
[attribute$=value] $("a[href$='.org']") 选择每个<a>元素其href属性值以“ .org”结尾
[attribute*=value] $("a[href*=example]") 选择每个<a>元素其href属性值包含子字符串“ example”
基本过滤器选择器
选择器 例 说明
:first $("p:first") 选择第一个<p>元素
:last $("p:last") 选择最后一个<p>元素
:even $("tr:even") 选择所有偶数<tr>元素，零索引
:odd $("tr:odd") 选择所有零索引的奇数<tr>元素
:not() $("p:not(.demo)") 选择除具有class="demo"的元素以外的所有<p>元素
:eq() $("tr:eq(2)") 在匹配的集合中从零开始的索引中选择第三个<tr>元素
:lt() $("tr:lt(5)") 选择所有索引号小于5的<tr>元素，从零开始的索引
:gt() $("tr:gt(5)") 选择所有索引号大于5的<tr>元素，从零开始的索引
:header $(":header") 选择所有标头元素，例如<h1>，<h2>，<h3>等
:lang() $("div:lang(en)") 选择所有具有语言值“ en”的<div>元素，即lang="en"，lang="en-us"等
:root $(":root") 选择文档的根元素，该元素始终是HTML文档中的<html>元素
:animated $(":animated") 选择器在运行选择器时选择所有动画元素
后代选择器
选择器 例 说明
:first-child $("p:first-child") 选择属于其父级的第一个子级的所有<p>元素
:last-child $("p:last-child") 选择属于其父级的最后一个子级的所有<p>元素
:only-child $("p:only-child") 选择属于其父级唯一子级的所有<p>元素
:first-of-type $("p:first-of-type") 选择属于其父级的第一个<p>元素的所有<p>元素
:last-of-type $("p:last-of-type") 选择属于其父级的最后一个<p>元素的所有<p>元素
:only-of-type $("p:only-of-type") 选择所有没有同级且具有相同元素名称的<p>元素
:nth-child(n) $("p:nth-child(3)") 选择属于其父级的第三个子级的所有<p>元素
:nth-last-child(n) $("p:nth-last-child(4)") 选择从上一个元素到第一个元素的所有<p>元素，它们是其父元素的第四个子元素
:nth-of-type(n) $("span:nth-of-type(3)") 选择属于其父级的第三个<span>元素的所有<span>元素
:nth-last-of-type(n) $("span:nth-last-of-type(4)") 选择属于其父元素的第4个<span>元素的所有<span>元素，从最后一个元素到第一个元素进行计数
内容过滤器选择器
选择器 例 说明
:contains() $("p:contains('is')") 选择所有包含文本“ is”的<p>元素
:empty $(":empty") 选择所有空元素，即没有子元素（包括文本）的元素
:has() $("p:has(span)") 选择所有包含至少一个<span>元素的<p>元素
:parent $(":parent") 选择具有至少一个子节点的所有元素（元素或文本）
表格选择器
选择器 例 说明
:input $(":input") 选择所有输入，文本区域，选择和按钮元素
:text $(":text") 选择所有类型为type="text"的输入元素
:password $(":password") 选择所有类型为type="password"的输入元素
:radio $(":radio") 选择所有类型为“ radio”的输入元素
:checkbox $(":checkbox") 选择类型为“checkbox”的所有输入元素
:button $(":button") 选择类型为“ button”的所有输入和按钮元素
:submit $(":submit") 选择所有类型为“ submit”的输入和按钮元素
:reset $(":reset") 选择所有类型为“ reset”的输入和按钮元素
:image $(":image") 选择类型为“ image”的所有输入元素
:file $(":file") 选择所有类型为type="file"的输入元素
:enabled $(":enabled") 选择所有启用的元素
:disabled $(":disabled") 选择所有禁用的元素
:selected $(":selected") 选择所有选定的元素，仅适用于<option>元素
:checked $(":checked") 选择所有选中或选中的元素，适用于复选框，单选按钮和选择元素
:focus $(":focus") 选择当前处于焦点状态的元素
可见性选择器
选择器 例 说明
:hidden $("p:hidden") 选择所有隐藏的<p>元素
:visible $("p:visible") 选择所有可见的<p>元素
jQuery 事件参考手册
事件是Web应用程序可以检测到的操作。
jQuery事件方法
jQuery提供了将事件处理程序附加到选择的简单方法。
下表列出了用于处理事件的所有jQuery方法/属性：
方法/属性 描述
bind() 版本3.0中不推荐使用on()方法代替
blur() 附加/触发失去焦点事件
change() 附加/触发更改事件
click() 附加/触发click点击事件
contextmenu() 附加/触发contextmenu事件
dblclick() 附加/触发双击事件
delegate() 版本3.0中不推荐使用on()方法代替
die() 在1.9版中删除，删除所有使用live()方法添加的事件处理程序
error() 在版本3.0中删除了附加/触发错误事件
event.currentTarget 事件冒泡阶段中的当前DOM元素
event.data 包含绑定当前执行处理程序时传递给事件方法的可选数据
event.delegateTarget 返回附加当前调用的jQuery事件处理程序的元素
event.isDefaultPrevented() 返回是否为事件对象调用event.preventDefault()
event.isImmediatePropagationStopped() 返回是否为事件对象调用event.stopImmediatePropagation()
event.isPropagationStopped() 返回是否为事件对象调用event.stopPropagation()
event.metakey 指示事件触发时是否按下了META键
event.namespace 返回触发事件时指定的名称空间
event.pageX 返回鼠标相对于文档左边缘的位置
event.pageY 返回相对于文档顶部边缘的鼠标位置
event.preventDefault() 阻止浏览器执行所选元素的默认操作
event.relatedTarget 返回鼠标移动时要输入或退出的元素
event.result 包含由指定事件触发的事件处理程序返回的最后一个/上一个值
event.stopImmediatePropagation() 防止其他事件处理程序被调用
event.stopPropagation() 防止事件使DOM树冒泡，防止任何父处理程序收到该事件的通知
event.target 返回哪个DOM元素触发了事件
event.timeStamp 返回创建事件的时间（相对于纪元的毫秒数）
event.type 返回触发了哪种事件类型
event.which 返回事件按下的键盘键或鼠标按钮
focus() 附加/触发焦点事件
focusin() 将事件处理程序附加到focusin事件
focusout() 将事件处理程序附加到焦点事件
hover() 将两个事件处理程序附加到悬停事件
keydown() 附加/触发keydown事件
keypress() 附加/触发按键事件
keyup() 附加/触发keyup事件
live() 在1.9版中已删除在当前或将来的选定元素中添加一个或多个事件处理程序
load() 在3.0版中删除将事件处理程序附加到load事件
mousedown() 附加/触发mousedown事件
mouseenter() 附加/触发mouseenter事件
mouseleave() 附加/触发mouseleave事件
mousemove() 附加/触发mousemove事件
mouseout() 附加/触发mouseout事件
mouseover() 附加/触发mouseover事件
mouseup() 附加/触发mouseup事件
off() 删除附加在on()方法上的事件处理程序
on() 将事件处理程序附加到元素
one() 将一个或多个事件处理程序添加到选定的元素。每个元素只能触发一次此处理程序
$.proxy() 接受现有函数并返回具有特定上下文的新函数
ready() 指定在DOM完全加载时要执行的函数
resize() 附加/触发调整大小事件
scroll() 附加/触发滚动事件
select() 附加/触发选择事件
submit() 附加/触发提交事件
toggle() 在1.9版中删除。附加了两个或多个功能，可在单击事件之间切换
trigger() 触发绑定到选定元素的所有事件
triggerHandler() 为所选元素触发绑定到指定事件的所有函数
unbind() 在3.0版中不推荐使用off()方法代替
undelegate() 在3.0版中不推荐使用off()方法代替
unload() 在版本3.0中删除将事件处理程序附加到卸载事件
jQuery 效果方法
jQuery库提供了几种添加各种惊人效果的技术。
jQuery效果方法使我们能够以最少的配置快速应用常用的效果。
jQuery效果方法
下表列出了所有用于创建动画效果的jQuery方法：
方法 描述
animate() 对一组CSS属性执行自定义动画
clearQueue() 删除所有剩余的尚未运行的排队函数
delay() 设置计时器以延迟排队功能中后续项目的执行
dequeue() 从队列中删除下一个函数，然后执行该函数
fadeIn() 淡入所选元素
fadeOut() 淡出所选元素
fadeTo() 淡入/淡出所选元素至给定的不透明度
fadeToggle() 在fadeIn()和fadeOut()方法之间切换
finish() 停止当前正在运行的动画，删除所有排队的动画，然后完成所有动画
hide() 隐藏所选元素
queue() 显示或操纵要在选定元素上执行的函数队列
show() 显示选定的元素
slideDown() 滑动显示所选元素
slideToggle() 在slideUp()和slideDown()方法之间切换
slideUp() 通过滑动隐藏选择的元素
stop() 停止所选元素的当前正在运行的动画
toggle() 在hide()和show()方法之间切换
jQuery HTML/CSS 方法
jQuery的一个非常重要的部分是可以操纵DOM元素。
jQuery提供了有效地操作HTML元素，属性和CSS的方法。
类属性
这些方法检查和操作分配给元素的类属性：
方法 描述
addClass() 将一个或多个类名称添加到所选元素
hasClass() 检查是否有任何选定的元素具有指定的类名
removeClass() 从所选元素中删除一个或多个类
toggleClass() 在添加/删除所选元素中的一个或多个类之间切换
复制中
这种方法使我们可以复制元素：
方法 描述
clone() 创建所选元素的深层副本
DOM插入-周围
这些方法使我们可以在现有内容周围插入新内容：
方法 描述
wrap() 将HTML元素环绕每个选定的元素
wrapAll() 将HTML元素环绕所有选定的元素
wrapInner() 将HTML元素环绕每个选定元素的内容
DOM插入-内部
这些方法使我们可以在现有元素中插入新内容：
方法 描述
append() 在所选元素的末尾插入内容
appendTo() 在所选元素的末尾插入HTML元素
html() 设置或获取所选元素的HTML内容
prepend() 在所选元素的开头插入内容
prependTo() 在所选元素的开头插入HTML元素
text() 设置或获取所选元素的文本内容
DOM插入-外部
这些方法使我们可以在现有元素之外插入新内容：
方法 描述
after() 在所选元素之后插入内容
before() 在所选元素之前插入内容
insertAfter() 在所选元素之后插入HTML元素
insertBefore() 在所选元素之前插入HTML元素
DOM移除
这些方法使我们可以从DOM中删除元素：
方法 描述
detach() 删除选定的元素（保留数据和事件）
empty() 从所选元素中删除所有子节点（包括文本节点）
remove() 删除选定的元素（包括数据和事件）
unwrap() 删除所选元素的父元素
DOM替换
这些方法用于从DOM中删除内容并将其替换为新内容：
方法 描述
replaceAll() 用新的HTML元素替换选定的元素
replaceWith() 用新内容替换所选元素
一般属性
这些方法获取并设置元素的DOM属性：
方法 描述
attr() 设置或返回所选元素的属性/值
prop() 设置或返回所选元素的属性/值
removeAttr() 从所选元素中删除一个或多个属性
removeProp() 删除prop()方法设置的属性
val() 设置或返回所选元素的value属性（对于表单元素）
样式方法
这些方法获取并设置元素的CSS相关属性：
方法 描述
css() 为所选元素设置或返回一个或多个样式属性
height() 设置或返回选定元素的高度
innerHeight() 设置或返回元素的高度（包括填充，但不包括边框）
innerWidth() 设置或返回元素的宽度（包括填充，但不包括边框）
offset() 设置或返回所选元素的偏移坐标（相对于文档）
offsetParent() 返回第一个定位的父元素
outerHeight() 设置或返回元素的高度（包括填充，边框和可选的边距）
outerWidth() 设置或返回元素的宽度（包括填充，边框和可选的边距）
position() 返回元素相对于偏移父级的位置
scrollLeft() 设置或返回所选元素的水平滚动条位置
scrollTop() 设置或返回所选元素的垂直滚动条位置
width() 设置或返回所选元素的宽度
jQuery 遍历方法
jQuery使我们可以“遍历”或遍历构成页面的HTML元素。
首先，我们进行初始选择，然后相对于该选择遍历DOM。
在浏览DOM时，我们正在更改原始选择。
jQuery提供了多种方法来允许我们遍历DOM。
遍历方法的最大类别是树遍历。
筛选
下表列出了所有过滤方法，可用于从DOM元素列表中过滤出各种元素：
方法 描述
eq() 返回具有选定元素的特定索引号的元素
filter() 将匹配元素的集合减少到与选择器匹配或通过功能测试的元素
first() 返回所选元素的第一个元素
has() 返回其中包含一个或多个元素的所有元素
is() 根据选择器/元素/ jQuery对象检查匹配的元素集，如果这些元素中的至少一个与给定参数匹配，则返回true
last() 返回所选元素的最后一个元素
map() 通过函数传递当前匹配集中的每个元素，产生一个包含返回值的新jQuery对象
not() 返回不符合特定条件的元素
slice() 将匹配元素的集合减少为由一系列索引指定的子集
树遍历
下表列出了用于遍历DOM的所有树遍历方法：
方法 描述
children() 返回所选元素的所有直接子级
closest() 返回所选元素的第一个祖先
each() 为每个匹配的元素执行一个函数
find() 返回所选元素的后代元素
next() 返回所选元素的下一个同级元素
nextAll() 返回所选元素的所有下一个同级元素
nextUntil() 返回两个给定参数之间的所有下一个同级元素
offsetParent() 返回第一个定位的父元素
parent() 返回所选元素的直接父元素
parents() 返回选定元素的所有祖先元素
parentsUntil() 返回两个给定参数之间的所有祖先元素
prev() 返回所选元素的上一个同级元素
prevAll() 返回所选元素的所有先前的同级元素
prevUntil() 返回两个给定参数之间的所有先前的同级元素
siblings() 返回所选元素的所有同级元素
杂项遍历
下表列出了所有其他遍历方法：
方法 描述
add() 将元素添加到匹配的元素集中
addBack() 将上一组元素添加到当前集中
andSelf() 版本1.8中已弃用 addBack()的别名
contents() 返回所选元素的所有直接子级（包括文本和注释节点）
end() 结束当前链中的最新过滤操作，并将匹配的元素集返回到其先前状态
jQuery AJAX 方法
AJAX允许通过与后台的Web服务器交换数据来“异步”更新网页。
这意味着可以更新网页的某些部分，而无需重新加载整个页面，也给用户更好体验，提高数据传输速度。
jQuery库具有全套的Ajax功能。
其中的功能和方法使我们无需刷新浏览器页面即可从服务器加载数据。
全局Ajax事件处理程序
当页面上的任何Ajax请求发生某些Ajax事件（例如初始化或完成）时，这些方法将附加一个要调用的函数：
方法 描述
ajaxComplete() 附加一个在Ajax请求完成时要调用的函数。这是一个AjaxEvent
ajaxError() 附加一个在Ajax请求完成并出现错误时要调用的函数。这是一个Ajax事件
ajaxSend() 发送Ajax请求之前，附加一个要调用的函数。这是一个Ajax事件
ajaxStart() 附加第一个Ajax请求开始时要调用的函数。这是一个Ajax事件
ajaxStop() 当所有Ajax请求都完成时，附加一个要调用的函数。这是一个Ajax事件
ajaxSuccess() 每当Ajax请求成功完成时，都附加一个要调用的函数。这是一个Ajax事件
辅助功能
这些功能有助于执行Ajax任务时遇到的常见习惯用法：
方法 描述
$.param() 创建数组或对象的序列化表示形式（可用作AJAX请求的URL查询字符串）
serialize() 将一组表单元素编码为要提交的字符串
serializeArray() 将一组表单元素编码为名称和值的数组
底层接口
这些方法可用于发出任意Ajax请求：
方法 描述
$.ajax() 执行异步HTTP（AJAX）请求
$.ajaxPrefilter() 在发送每个请求之前以及在$ .ajax()处理它们之前，处理自定义Ajax选项或修改现有选项。
$.ajaxSetup() 设置将来的AJAX请求的默认值。不建议使用
$.ajaxTransport() 创建一个处理Ajax数据实际传输的对象
速记方法
这些方法以较少的代码执行更常见的Ajax请求类型：
方法 描述
$.get() 使用HTTP GET请求从服务器加载数据
$.getJSON() 使用GET HTTP请求从服务器加载JSON编码的数据
$.getScript() 使用GET HTTP请求从服务器加载（并执行）JavaScript文件
$.post() 使用HTTP POST请求从服务器加载数据
load() 从服务器加载数据并将返回的HTML放入所选元素
jQuery 杂项方法
集合操作
方法 描述
each() 遍历jQuery对象，为每个匹配的元素执行一个函数
$.param() 创建数组或对象的序列化表示形式（可用作AJAX请求的URL查询字符串）
数据存储
方法 描述
data() 将任意数据存储到选定元素或从中获取数据
removeData() 删除以前存储的数据
DOM元素方法
方法 描述
get() 获取选择器匹配的DOM元素
index() 从匹配的元素中搜索给定的元素
size() 在3.0版中已删除，请改用length属性
toArray() 检索jQuery集中包含的所有DOM元素（作为数组）
设定方法
方法 描述
$.noConflict() 放弃jQuery对$变量的指定
jQuery 属性
jQuery对象示例的属性
使用jQuery()函数创建的每个jQuery对象在其方法旁边都包含许多属性。
这些属性使我们可以检查对象的各种属性。
属性 描述
context 在版本3.0中删除包含传递给jQuery()的原始上下文
jquery 包含jQuery版本号
length 包含jQuery对象中的元素数
selector 在版本1.7中已弃用当创建原始集时，表示传递给jQuery()的选择器的选择器（如果有）
全局jQuery对象的属性
这些属性与全局jQuery对象相关联：
属性 描述
jQuery.browser 在1.3版中弃用的包含从navigator.userAgent中读取的useragent的标志
jQuery.fx.interval 在3.0版中已弃用，并且在支持requestAnimationFrame方法的浏览器中无效。更改动画触发率（以毫秒为单位）
jQuery.fx.off 全局禁用/启用所有动画
jQuery.holdReady() 保留或释放jQuery ready事件的执行
jQuery.ready 类似于Promise的对象（或“ thenable”），可在文档准备就绪时进行解析
jQuery.support 1.9版弃用的表示不同浏览器功能或错误的属性集合
