Jquery整理

说明:本篇内容是参考api以及jQuery书籍记录的。仅用于个人复习以及开发时遇到问题时查询使用。不喜勿喷。后续如有时间会适当增加例子

jQuery对象和DOM对象相互转换

正常情况下,在$(function(…)),…中的this;

  1. this代表的是jS对象
  2. $(this)代表的是jQuery对象
  3. jQuery对象[下标]即可转换成JS对象
  4. $(JS对象)即可转换成jQuery对象
  5. JS对象不能调用jQuery的方法

jQuery选择器

基本选择器
选择符匹配
*选取所有元素
#id选取给定id元素
.class根据给定类名匹配元素
element根据标签名选取元素
selector1,select2匹配任意一个选择器匹配到的元素
层次选择器
选择符匹配
ancestor descendant在给定祖先元素下匹配所有后代元素
parent>child在给定的父元素下匹配所有的子元素
prev+next匹配紧接在prev元素后的next元素
prev~siblings匹配prev元素之后的所有siblings元素
基本过滤选择器
选择符匹配
:first获取第一个元素
:last获取最后一个元素
:not(selector)去除所有给定选择器匹配的元素
:even匹配所有索引值为偶数的元素,从0开始
:odd匹配所有索引值为奇数的元素,从0开始
:eq(index)选取索引值等于index的元素
:gt(index)选取索引值大于index的元素
:lt(index)选取索引值小于index的元素
:header选取所有的标题元素
:animated选取当前正在执行的动画的所有元素
:lang选取指定语言下的所有元素
:focus选取当前获取焦点的元素
:root选取该文档的根元素
:target选取由文档URI的格式化识别码表示的目标元素
内容过滤选择器
选择符匹配
:contains(text)选取含有文本内容为"text"的元素
:empty选取不包含子元素或文本元素的空元素
:has(selector)获取含有选择器所匹配的元素的元素
:parent获取含有子元素或者文本元素的非空元素
可见性过滤选择器
选择符匹配
:hidden获取所有的不可见元素,包括CSS属性中的display:none和visibility:hidden,input中的type:hidden
属性过滤选择器
选择符匹配
[attribute]选取包含此属性的元素
[attribute=value]选取属性的值为value的元素
[attribute!=value]选取属性的值不为value的元素
[attribute^=value]选取属性的值以value开头的元素
[attribute$=value]选取属性的值以value结尾的元素
[attribute*=value]选取属性的值包含value的元素
[attribute1][attribute2]选取同时满足多个属性的元素
子元素过滤过滤选择器
选择符匹配
:first-child获取每个父元素的第一个子元素
:last-child获取每个父元素的最后一个子元素
first-of-type获取每个元素的所有同级同名元素的第一个兄弟元素
:last-of-type获取每个元素的所有同级同名元素的最后一个兄弟元素
:nth-child(index/even/odd/3n+1)获取每个父元素下的第index个子元素(从1开始);获取每个父元素下的奇偶子元素;获取每个父元素下满足3n+1的子元素
:nth-last-child(index/even/odd/3n+1)同:nth-child,不同点是其计数顺序是从最后一个开始
:nth-of-type(n/even/odd/formula)选择同属于一个父元素之下,并且标签名相同的子元素中的第n个.
:nth-last-of-type(n/even/odd/formula)选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个。
:only-child如果某个元素是父元素中唯一的子元素,那将会被匹配
:only-of-type选择所有没有兄弟元素,且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配。
表单对象属性过滤过滤选择器
选择符匹配
:enabled获取所有可用元素
:disabled获取所有不可用元素
:check获取所有被选中的元素
:selected获取所有选中的选项元素
表单选择器
选择符匹配
:input选取所有的<input><textarea><select><button>元素
:text选取所有的单行文本框
:password选取所有的密码框
:radio选取所有单选框
:checkbox选取所有的复选框
:image选取所有的图片按钮
:reset选取所有的重置按钮
:file选取所有的上传域
:hidden选取所有的不可见元素
:image选取所有的图片按钮
:submit选取所有的提交按钮
其他选择过滤方法
选择符匹配
$.escapeSelector(selector)这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候,这个方法基本上与CSS中CSS.escape()方法类似,唯一的区别是jquery中的这个方法支持所有浏览器.
find(expr|obj|ele)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
slice(start, [end])选取一个匹配的子集与原来的slice方法类似
is(expr|obj|ele|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合,或者表达式无效,都返回’false’。 ‘’‘注意:’’'在jQuery 1.3中才对所有表达式提供了支持。在先前版本中,如果提供了复杂的表达式,比如层级选择器(比如 + , ~ 和 > ),始终会返回true
filter(expr|obj|ele|fn)筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
map(callback)将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用’$.map()'来方便的建立。
first()获取第一个元素
last()获取最后一个元素

Jquery的DOM操作

元素节点操作

插入元素节点
方法功能描述
append(content)在每个匹配的元素节点内部追加content内容
appendTo把内容追加到每个匹配的content元素节点中
prepend(content)在每个匹配的元素节点内部前置content内容
prependTo把内容前置到每个匹配的content元素节点中
atfer(content)在每个元素节点之后插入content内容
insertAfter(content)把内容插入到每个匹配的content元素节点之后
before(content)在每个匹配的元素节点之前插入content内容
insertBefore(content)把内容插入到每个匹配的content元素节点之前
add(expr|ele|html|obj[,con])把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。jQuery 1.4 中, .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序,而不再是简单的添加。jQuery 1.9 中, .add()方法返回的结果总是按照节点在document(文档)中的顺序排列。在1.9之前,如果上下文或输入的集合中任何一个以脱离文档的节点(未在文档中)开始,使用.add()方法节点不会按照document(文档)中的顺序排序。现在,返回的节点按照文档中的顺序排序,并且脱离文档的节点被放置在集合的末尾。
end()回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数–‘add’,‘andSelf’, ‘children’, ‘filter’, ‘find’, ‘map’, ‘next’, ‘nextAll’, ‘not’, ‘parent’, ‘parents’,‘prev’, ‘prevAll’, ‘siblings’ and ‘slice’–再加上 Manipulation 中的 ‘clone’。
addBack()添加堆栈中元素集合到当前集合,一个选择性的过滤选择器。如上所述在讨论中的.end(), jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时,新的元素集合推入到堆栈中。如果还需要包含先前的元素集合,.addBack() 可以提供帮助。
包裹元素节点
方法功能描述
wrap(html|element|fn)把所有匹配的元素节点用其他元素节点的结构化标记包裹起来
unwrap()移除所有元素节点对应的父元素节点
wrapAll(html|element)将所有匹配的元素用单个元素节点包裹起来
wrapInner(html|element|fn)将每个匹配的元素节点的子内容(包括文本节点)用一个html结构包裹起来
替换元素节点
方法功能描述
replaceWith()将所有匹配的元素节点替换成指定的HTML或DOM元素节点
replaceAll()用匹配的元素节点替换所有selector匹配到的元素节点
删除元素节点
方法功能描述
empty()删除匹配的元素集合中所有的子元素节点(删除的元素保留)
remove()从DOM树中删除所有匹配的元素节点,但是jQuery对象保留, jQury对象绑定的方法全部移除
datch()从DOM树中删除所有匹配的元素节点,并保留jQuery对象和绑定的方法
not(expr|ele|fn)从匹配元素的集合中删除与指定表达式匹配的元素
复制元素节点
方法功能描述
clone()复制匹配的元素,不会复制其子元素
clone(true)复制匹配的元素及其子元素
遍历元素操作
方法功能描述
children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合.
find(expr|obj|ele)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合.这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。
nextUntil([exp|ele][,fil])查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。expr: 用于筛选祖先元素的表达式。filter: 一个字符串,其中包含一个选择表达式匹配元素。
parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
closest(expr|object|element)closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素.
prevUntil([exp|ele][,fil])如果提供的jQuery代表了一组DOM元素,.prevUntil()方法也能让我们找遍所有元素所在的DOM树,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素,但不包括那个选择器匹配到的元素。
siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选.
offsetParent()返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
contents()查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

属性节点操作

普通属性节点操作
方法功能描述
attr(name|properties|key,value|fn)当实参为name时,获取匹配元素的对应的属性值;当实参为properties,传入一个键值对的对象,可以批量设置元素的属性;当传入key,value,可以一个设置元素的某一属性;当实参为fn时,传入一个回调函数,可以更加灵活地设置其属性
removeAttr(name)从每个匹配的元素中删除属性name
prop(name|properties|key,value|fn)类似attr,但是checked,selected,disabled状态属性等的访问和设置必须使用prop()方法
removeProp(name)从每个匹配的元素中删除属性name
操作class属性
方法功能描述
addClass(name|fn)为每个匹配的元素添加指定的类名。
remove(name|fn)不传参数时会删除所有类,设置参数时会删除指定的参数对应的类
toggleClass(name|fn)如果存在就删除,不存在就增加
css(name|properities|name,value|fn)用css方法对类样式操作,无参数获取,有参时设置
hasClass(class)检查当前的元素是否含有某个特定的类,如果有,则返回true。这其实就是 is("." + class)。
常用元素定位方法
方法功能描述
offset([coordinates])无实参时,获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效;有实参时,设置匹配元素在当前视口的相对偏移。
position()获取匹配元素相对于父元素的偏移量(用了定位的)
scrollTop(var|fn),scrollLeft(var|fn)获取或设置匹配元素相对于滚动条顶部或左边的偏移量
width([var|fn]),height(var|fn)获取或设置匹配元素当前计算的宽度值或高度值
innerHeight()获取第一个匹配元素内部区域高度(包括补白、不包括边框).此方法对可见和隐藏元素均有效。
innerWidth()获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。方法对可见和隐藏元素均有效。
outerHeight([options])获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。
outerWidth([options])获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。
文本节点操作
方法功能描述
html([val|fn])获取或设置第一个匹配元素的HTML内容(可以是单纯的文本节点,也可以是元素节点)
text([valfn])
val([val|fn|arr])获取或设置表单元素的值

备注:只要是表单元素都会用到val(),text()只是html()的一部分

JQuery事件处理

事件
事件名称功能描述
ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。fn是要在DOM就绪时执行的函数
on(events,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数。events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。data:当一个事件被触发时要传递event.data给事件处理函数。fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
off(events,[selector],[fn])在选择元素上移除一个或多个事件的事件处理函数。events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", “keydown.myPlugin”, 或者 “.myPlugin”.selector:一个最初传递到.on()事件处理程序附加的选择器。fn:事件处理程序函数以前附加事件上,或特殊值false.
bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。data:作为event.data属性值传递给事件对象的额外数据对象。fn:绑定到每个匹配元素的事件上面的处理函数
unbind(type,[data|fn]])bind()的反向操作,从每一个匹配的元素中删除绑定的事件。type:删除元素的一个或多个事件,由空格分隔多个事件值。fn:要从每个匹配元素的事件中反绑定的事件处理函数
one(type,[data],fn)为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
trigger(type,[data])在每一个匹配的元素上触发某类事件。type:一个事件对象或者要触发的事件类型data:传递给事件处理函数的附加参数.实例:提交第一个表单,但不用submit() $(“form:first”).trigger(“submit”)
triggerHandler(type, [data])这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。这个方法的行为表现与trigger类似,但有以下三个主要区别:第一,他不会触发浏览器默认事件。第二,只触发jQuery对象集合中第一个元素的事件处理函数。第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
hover([over,]out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。over:鼠标移到元素上要触发的函数out:鼠标移出元素要触发的函数
toggle([speed],[easing],[fn])用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
blur([[data],fn])当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
change([[data],fn])当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
click([[data],fn])触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
dblclick([[data],fn])当双击元素时,会发生 dblclick 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。
error([[data],fn])当元素遇到错误(没有正确载入)时,发生 error 事件。error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
focus([[data],fn])当元素获得焦点时,触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。
focusin([data],fn)当元素获得焦点时,触发 focusin 事件。focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn)当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn])当键盘或按钮被按下时,发生 keydown 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
keypress([[data],fn])当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
keyup([[data],fn])当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
mousedown([[data],fn])当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
mouseenter([[data],fn])当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件
mouseleave([[data],fn])当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
mousemove([[data],fn])当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout([[data],fn])当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。 注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
mouseover([[data],fn])当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。 注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseup([[data],fn])当在元素上放松鼠标按钮时,会发生 mouseup 事件。与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
resize([[data],fn])当调整浏览器窗口的大小时,发生 resize 事件。
scroll([[data],fn])当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
select([[data],fn])当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件.这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
submit([[data],fn])当提交表单时,会发生 submit 事件。该事件只适用于表单元素。
unload([[data],fn])在当用户离开页面时,会发生 unload 事件。具体来说,当发生以下情况时,会发出 unload 事件:1点击某个离开页面的链接 2在地址栏中键入了新的URL 3 使用前进或后退按钮 4关闭浏览器 5重新加载页面
事件对象常用属性和方法
名称功能描述
event.currentTarget在事件冒泡阶段中的当前DOM元素
event.data当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind。
event.delegateTarget当currently-called的jQuery事件处理程序附加元素。 此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件,事件处理程序附加在正在处理的元素的祖先上。它可用于,例如,指明委派识别和删除事件处理程序。 This property is most often useful in delegated events attached by .delegate() or .on(), where the event handler is attached at anancestor of the element being processed. It can be used, for example, to identify and removeevent handlers at the delegation point.对于非授权的事件处理程序,直接连接到一个元素,event.delegateTarget 总是等价于event.currentTarget.
event.isDefaultPrevented()根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。
event.isImmediatePropagationStopped()根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。
event.isPropagationStopped()根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。
event.namespace当事件被触发时此属性包含指定的命名空间。
event.pageX鼠标相对于文档的左边缘的位置。
event.pageY鼠标相对于文档的上边缘的位置。
event.preventDefault()阻止默认事件行为的触发。
event.relatedTarget在事件中涉及的其它任何DOM元素。对于 mouseout 事件,它指向被进入的元素;对于 mousein 事件,它指向被离开的元素。
event.result这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined 。
event.stopPropagation()防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。 这个方法对 trigger() 来自定义的事件同样有效。注意,这不会阻止同一个元素上的其它事件处理函数的运行。
event.target最初触发事件的DOM元素。这是注册事件时的对象,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
event.timeStamp这个属性返回事件触发时距离1970年1月1日的毫秒数。这可以很方便的检测某个jQuery函数的性能
event.type获取事件类型
event.which针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入

动画效果

名称功能描述
show([speed,[easing],[fn]])显示隐藏的匹配元素。这个就是 ‘show( speed, [callback] )’ 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
hide([speed,[easing],[fn]])隐藏显示的元素这个就是 ‘hide( speed, [callback] )’ 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。
toggle([speed],[easing],[fn])用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
slideDown([speed],[easing],[fn])通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。
slideUp([speed,[easing],[fn]])通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。
slideToggle([speed],[easing],[fn])通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。
fadeIn([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo([[speed],opacity,[easing],[fn]])把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeToggle([speed,[easing],[fn]])通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
animate(params,[speed],[easing],[fn])用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 “+=” 或 “-=” 来让元素做相对运动。jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如(“user-select”,“none”); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select",IE10将使用"-ms-user-select". params:一组包含作为动画属性和终值的样式属性和及其值的集合speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.fn:在动画完成时执行的函数,每个元素执行一次。
stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行,也可以用于自定义队列。
finish( [queue ] )停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。当.finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(所有动画的目标值)。所有排队的动画将被删除。
jQuery.fx.off关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。
jQuery.fx.interval设置动画的显示帧速。

延时函数

名称功能描述
deferred.done(doneCallbacks[,doneCallbacks])当延迟成功时调用一个函数或者数组函数.该参数可以是一个函数或一个函数的数组。当延迟成功时,doneCallbacks被调用。回调执行是依照他们添加的顺序。一旦deferred.done()返回延迟对象,延迟对象的其它方法也可以链接到了这里,包括增加.done()方法。当延迟解决,doneCallbacks执行使用参数提供给resolve或resolveWith方法依照添加的顺序调用。有关详细信息,请参阅Deferred object 。
deferred.fail(failCallbacks[,failCallbacks])当延迟失败时调用一个函数或者数组函数.。该参数可以是一个函数或一个函数的数组。当延迟失败时,doneCallbacks被调用。回调执行是依照他们添加的顺序。一旦deferred.fail()返回延迟对象,延迟对象的其它方法也可以链接到了这里,包括增加.done()方法。当延迟解决,doneCallbacks执行使用参数提供给resolve或resolveWith方法依照添加的顺序调用。有关详细信息,请参阅Deferred object 。
deferred.reject(args)拒绝延迟对象,并根据给定的参数调用任何失败的回调函数。当延迟被拒绝,任何failCallbacks添加的deferred.then或deferred.fail被调用。回调按他们添加的顺序执行。每个回调传递的args在deferred.reject()中调用。之后添加任何failCallbacks递延被拒绝进入状态时,立即执行添加,使用的参数被传递给.reject()调用。
deferred.rejectWith(context,[args])拒绝延迟的对象,并根据给定的上下文和参数调用任何失败的回调函数。。当延迟被拒绝,任何doneCallbacks添加的deferred.then或deferred.fail被调用。回调按他们添加的顺序执行。每个回调传递的args在deferred.reject()中调用。之后添加任何failCallbacks递延被拒绝进入状态时,立即执行添加,使用的参数被传递给.reject()调用。
deferred.resolve(args)解决递延对象,并根据给定的参数调用任何完成的回调函数。当递延被解决,任何failCallbacks添加的deferred.then或deferred.fail被调用。回调按他们添加的顺序执行。每个回调传递的args在deferred.reject()中调用。之后添加任何failCallbacks递延被拒绝进入状态时,立即执行添加,使用的参数被传递给.reject()调用。
deferred.resolveWith(context,[args])解决递延对象,并根据给定的上下文和参数调用任何完成的回调函数。当递延被解决,任何doneCallbacks 添加的deferred.then或deferred.fail被调用。回调按他们添加的顺序执行。每个回调传递的args在deferred.reject()中调用。之后添加任何failCallbacks递延被拒绝进入状态时,立即执行添加,使用的参数被传递给.reject()调用。
deferred.then(doneFilter [, failFilter ] [, progressFilter ])添加处理程序被调用时,递延对象得到解决或者拒绝。所有三个参数(包括progressCallbacks ,在jQuery的1.7 )可以是一个单独的函数或一个函数的数组。其中一个参数,也可以为空,如果没有该类型的回调是需要的。或者,使用.done()或.fail()仅设置doneCallbacks或failCallbacks。当递延解决,doneCallbacks被调用。若递延代替拒绝,failCallbacks被调用。回调按他们添加的顺序执行。一旦deferred.then返回延迟对象,延迟对象的其它方法也可以链接到了这里,包括增加.then()方法。doneFilter: 当Deferred(延迟)对象得到解决时被调用的一个函数。failFilter: [可选]当Deferred(延迟)对象拒绝时被调用的一个函数。progressFilter:[可选]当Deferred(延迟)对象生成进度通知时被调用的一个函数。
deferred.promise([type],[target])返回一个 Promise 对象用来观察当某种类型的所有行动绑定到集合,排队与否还是已经完成。.promise()方法返回一个动态生成的Promise对象用来观察当某种类型的所有行动绑定到集合,排队与否还是已经完成。默认情况下, type是"fx" ,这意味着当选定的元素已完成所有动画是返回的Promise是解决的。 解决上下文和唯一的参数是哪个集合到.promise()被调用。 如果target是提供,.promise()将附加到它的方法,然后返回这个对象,而不是创建一个新的。这对在已经存在的对象上附加Promise的行为非常有用。
deferred.always(alwaysCallbacks,[alwaysCallbacks])当递延对象是解决或拒绝时被调用添加处理程序。
deferred.notify(args)调用一个给定args的递延对象上的进行中的回调 (progressCallbacks)通常情况下,只有一个递延的创建者,应调用此方法;你可以防止其他代码改变Deferred的状态或者通过deferred.promise()返回一个受限制的承诺对象报告状态当 deferred.notify 被访问, 任何progressCallbacks 可以通过访问deferred.then 好或者 deferred.progress来添加。回调是在它们被添加的顺序执行。每次通过来自.notify()的args回调。任何为.notify()后递延是解决或拒绝(或之后添加任何progressCallbacks )被忽略。
deferred.notifyWith(context,[args])去掉字符串起始和结尾的空格。当deferred.notifyWith,任何doneCallbacks 添加的 progressCallbacks,deferred.then或deferred.fail被调用。回调按他们添加的顺序执行。每个回调传递的args在deferred.reject()中调用。notifyWith()延迟后解决或拒绝( 或添加任何progressCallbacks后)被忽略。
deferred.progress(progressCallbacks)当Deferred对象时生成进度通知时添加被访问处理程序。 这个参数可以是一个单一的功能或功能的阵列。当递延通过调用生成的进度通知notify或notifyWith,progressCallbacks 被访问。后来deferred.progress()返回Deferred对象。Deferred对象有方法可以链接到这一个。当递延解决或拒绝,进展回调将不再被调用。
deferred.state()确定一个Deferred对象的当前状态。deferred.state()方法返回一个字符串,代表Deferred对象的当前状态。1pending: Deferred对象是尚未完成状态 (不是 “rejected” 或 “resolved”).2resolved: Deferred对象是在解决状态,这意味着,deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问(或在被调用的过程中)3rejected: Deferred对象是在被拒绝的状态,这意味着,deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问(或在被调用的过程中)。这种方法主要是有用的调试,以确定的,例如,递延是否已经得到解决,即使你打算拒绝它的内部代码。

回调函数

名称功能描述
callbacks.add(callbacks)回调列表中添加一个回调或回调的集合。
callbacks.disable()禁用回调列表中的回调
callbacks.empty()从列表中删除所有的回调.
callbacks.fire(arguments)禁用回调列表中的回调
callbacks.fired()用给定的参数调用所有的回调。
callbacks.fireWith([context][,args])访问给定的上下文和参数列表中的所有回调
callbacks.has(callback)确定是否提供的回调列表
callbacks.lock()锁定在其当前状态的回调列表。
callbacks.locked()确定是否已被锁定的回调列表。
callbacks.remove(callbacks)删除回调或回调回调列表的集合。
jQuery.callbacks(flags)一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表。 $.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能组件。它可以用来作为类似基础定义的新组件的功能。$.Callbacks() 支持的方法,包括 callbacks.add(),callbacks.remove(), callbacks.fire() and callbacks.disable().

jQuery AJAX

名称功能描述
jQuery.ajax(url,[settings])通过 HTTP 请求加载远程数据。url:一个用来包含发送请求的URL字符串。settings:AJAX 请求设置。所有选项都是可选的。
load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。
jQuery.get(url, [data], [callback], [type])通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。jQuery 1.12 中 jQuery.post 和 jQuery.get 支持对象参数,这样一来好处还比较多,比如设置回调函数的context,或者跨域 post 时可以withCredential: true。
jQuery.getJSON(url, [data], [callback])通过 HTTP GET 请求载入 JSON 数据。在 jQuery 1.2 中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据,如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。
jQuery.getScript(url, [callback])通过 HTTP GET 请求载入并执行一个 JavaScript 文件。jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。
jQuery.post(url, [data], [callback], [type])通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。jQuery 1.12 中 jQuery.post 和 jQuery.get 支持对象参数,这样一来好处还比较多,比如设置回调函数的context,或者跨域 post 时可以withCredential: true。
ajaxComplete(callback)AJAX 请求完成时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。
ajaxError(callback)AJAX 请求发生错误时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。
ajaxSend(callback)AJAX 请求发送前执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。
ajaxStart(callback)AJAX 请求开始时执行函数。Ajax 事件。
ajaxStop(callback)AJAX 请求结束时执行函数。Ajax 事件。
ajaxSuccess(callback)AJAX 请求成功时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。
jQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )Handle custom Ajax options or modify existing options before each request is sent and before they areprocessed by $.ajax().
jQuery.ajaxSetup([options])设置全局 AJAX 默认选项。
serialize()序列表表格内容为字符串。
serializeArray()序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。 返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。

jQuery工具

名称功能描述
jQuery.browser.version在jQuery 1.3中不建议使用。浏览器渲染引擎版本号。
jQuery.each(object, [callback])通用遍历方法,可用于遍历对象和数组。不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
jQuery.extend([deep], target, object1, [objectN])用一个或多个其他对象来扩展一个对象,返回被扩展的对象。如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。deep:如果设为true,则递归合并。target:待修改对象。object1:待合并到第一个对象的对象。objectN:待合并到第一个对象的对象。
jQuery.grep(array, callback, [invert])使用过滤函数过滤数组元素。此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
jQuery.when(deferreds)提供一种方法来执行一个或多个对象的回调函数,延迟对象通常表示异步事件。 如果单一延迟传递给jQuery.when ,它是通过这个方法和延迟对象附加的其他方法可访问绑定的回调函数返回的,如defered.then 。当延迟得到解决或者拒绝,通常的代码创建了原来的延迟,适当的回调将被调用。
jQuery.makeArray(obj)将类数组对象转换为数组对象。类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。
jQuery.map(arrobj,callback)
jQuery.inArray(value,array,[fromIndex])确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )。value:用于在数组中查找是否存在array:待处理数组。fromIndex:用来搜索数组队列,默认值为0。
jQuery.toArray()把jQuery集合中所有DOM元素恢复成一个数组。
jQuery.merge(first,second)合并两个数组返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()
jQuery.unique(array)删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。在jQuery 3.0以上版本该方法已被弃用,请使用jQuery.uniqueSort()方法
jQuery.uniqueSort(array)$.uniqueSort()函数通过搜索的数组对象,排序数组,并移除任何重复的节点。 如果一个节点和已经在数组中的节点完全相同,那么它被认为是重复的; 两个不同的节点具有相同的属性是被认为不重复的。此功能只适用于普通的JavaScript DOM元素的数组,主要是jQuery内部使用。你可能永远都不需要使用它。
jQuery.parseJSON(str)接受一个JSON字符串,返回解析后的对象。在jQuery 3.0 及以后版本中,该方法已被删除,请使用原生方法 JSON.parse(str)
jQuery.parseXML(data)解析一个字符串到一个XML文件。jQuery.parseXML使用原生解析函数浏览器创建一个有效的XML文档。这文档可以被传递给jQuery创建一个典型的jQuery对象,可以查询及操作。
jQuery.noop一个空函数当你仅仅想要传递一个空函数的时候,就用他吧。这对一些插件作者很有用,当插件提供了一个可选的回调函数接口,那么如果调用的时候没有传递这个回调函数,就用jQuery.noop来代替执行。
jQuery.proxy(function,context)jQuery 1.4 新增。返回一个新函数,并且这个函数始终保持了特定的作用域。当有事件处理函数要附加到元素上,但他们的作用域实际是指向另一个对象时,这个方法最有用了。此外,最妙的是,jQuery能够确保即便你绑定的函数是经过jQuery.proxy()处理过的函数,你依然可以传递原先的函数来准确无误地取消绑定。请参考下面的例子。这个函数还有另一种用法,jQuery.proxy( scope, name )。第一个参数是要设定的作用域对象。第二个参数是将要设置作用域的函数名(必须是第一个作用域对象的一个属性)。
jQuery.contains(container,contained)一个DOM节点是否包含另一个DOM节点。
jQuery.type(obj)检测obj的数据类型。
jQuery.isArray(obj)jQuery 1.3 新增。测试对象是否为数组。jQuery 3.2中已废弃
jQuery.isFunction(obj)测试对象是否为函数。注意:jQuery 1.3以后,在IE浏览器里,浏览器提供的函数比如’alert’还有 DOM 元素的方法比如 ‘getAttribute’ 将不认为是函数 jQuery 3.3中已废弃
jQuery.isEmptyObject(obj)jQuery 1.4 新增。测试对象是否是空对象(不包含任何属性)。jQuery 1.4 中,这个方法既检测对象本身的属性,也检测从原型继承的属性(因此没有使用hasOwnProperty)。
jQuery.isPlainObject(obj)测试对象是否是纯粹的对象(通过 “{}” 或者 “new Object” 创建的)。
jQuery.isWindow(obj)测试对象是否是窗口(有可能是Frame)。jQuery 3.3中已废弃
jQuery.isNumeric(value)确定它的参数是否是一个数字。$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样,它返回 true。否则,它返回false。该参数可以是任何类型的
jQuery.trim(str)去掉字符串起始和结尾的空格。
jQuery.param(obj,[traditional])将表单元素数组或者对象序列化。是.serialize()的核心方法。在jQuery 1.3中,如果传递的参数是一个函数,那么用.param()会得到这个函数的返回值,而不是把这个函数作为一个字符串来返回。在jQuery 1.4中,.param()会深度递归一个对象来满足现在脚本语言和框架,比如PHP, Ruby onRails等。你可以通过jQuery.ajaxSettings.traditional = true; 来全局得禁用这个功能。注意:因为有些框架在解析序列化数字的时候能力有限,所以当传递一些含有嵌套对象、数组的对象作为参数时,请务必小心!在jQuery 1.4中,HTML5的input元素也会被序列化。
jQuery.error(message)接受一个字符串,并且直接抛出一个包含这个字符串的异常。这个方法的主要目的是提供给插件开发人员,让他们可以重载这个方法,并以更好的方式显示错误,或者提供更多信息。
$.fn.jquery代表 jQuery 版本号的字符串。.jquery 属性是通过 jQuery 原型赋值的,通过使用它的别名 $.fn 进行引用。它是一个含有 jQuery 版本号的字符串,例如 “1.5.0” 或 “1.4.4”.

jQuery核心函数

名称功能描述
data([key],[value])在元素上存放或读取数据,返回jQuery对象。当参数只有一个key的时候,为读取该jQuery对象对应DOM中存储的key对应的值,值得注意的是,如果浏览器支持HTML5,同样可以读取该DOM中使用 data-[key] = [value] 所存储的值。参见最后一个示例。当参数为两个时,为像该jQuery对象对应的DOM中存储key-value键值对的数据。如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。V1.4.3 新增用法, data(obj) 可传入key-value形式的数据。
removeData([namelist])
queue(element,[queueName])显示或操作在匹配元素上执行的函数队列
dequeue([queueName])从队列最前端移除一个队列函数,并执行他。
clearQueue([queueName])清空对象上尚未执行的所有队列如果不带参数,则默认清空的是动画队列。这跟 stop(true)类似,但 stop(true)只能清空动画队列,而这个可以清空所有通过 .queue() 创建的队列。
jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
jQuery.extend(object)扩展jQuery对象本身。
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值