JQuery
- 选择器
- 基本
#id
选择所有id为id的元素,一般id唯一.class
选择所有class为class的元素,多class的元素,符合其中一个即可*
选择所有元素selector1,selector2,selectorN
返回多个选择器的结果集,OR关系
- 层级
form input
选择form
下所有input
元素parent > child
选择parent下的所有匹配子元素,不包括子元素的子元素prev + next
匹配所有紧接在 prev 元素后的* next 元素*prev ~ siblings
匹配 prev 元素之后的所有兄弟 siblings 元素
- 基本筛选器
:first
获取第一个元素:not(selector)
选择非匹配的元素,即除selector以外的元素:even
匹配所有索引值为偶数的元素:odd
匹配所有索引值为奇数的元素:eq(index)
匹配索引等于index的元素, 索引从0开始:gt(index)
匹配索引大于index的元素:last()
匹配最后一个元素:lt(index)
匹配索引小于index的元素:header
匹配h1,h2之类的标题元素:animated
匹配正在执行动画的元素:focus
匹配当前获取焦点的元素。:root
选择该文档的根元素。一般都是<html>
元素:target
选择由文档URI的格式化识别码表示的目标元素。如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。 例如,给定的URIhttp://example.com/#foo
,$( "p:target" )
,将选择<p id="foo">
元素。
- 内容
:contains(text)
匹配包含给定文本的元素:empty
匹配所有不包含子元素或者文本的空元素:has(selector)
匹配含有选择器所匹配的元素的元素:parent
匹配含有子元素或者文本的元素
- 可见性
:hidden
匹配所有不可见元素,或者type为hidden的元素:visible
匹配所有可见元素
- 属性
[attribute]
匹配包含给定属性的元素[attribute=value]
匹配给定的属性是某个特定值的元素[attribute!=value]
等价于:not([attribute=value])
匹配所有不含有指定的属性,或者属性不等于特定值的元素。[attribute^=value]
匹配给定的属性是以某些值开始的元素[attribute$=value]
匹配给定的属性是以某些值结尾的元素[attribute*=value]
匹配给定的属性包含某些值的元素[selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用。AND关系
- 子元素
:first-child
等价:nth-child(1)
匹配所给选择器的第一个子元素,:first
只匹配第一个元素,这个可以匹配符合条件的所有元素的第一个子元素:first-of-type
等价:nth-of-type(1)
匹配的是某父元素下相同类型子元素中的第一个:last-child
匹配最后一个子元素,:last
只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素:last-of-type
匹配的是某父元素下相同类型子元素中的最后一个:nth-child(index|odd|even|formula)
匹配其父元素下的第N个子或奇偶元素,索引从1开始:nth-last-child(index|even|odd|formula)
匹配其父元素下最后一个元素 索引从1开始:nth-last-of-type(index|even|odd|formula)
选择的所有他们的父级元素的第index个子元素,计数从最后一个元素到第一个。nth-of-type(n|even|odd|formula)
选择同属于一个父元素之下,并且标签名相同的子元素中的第index个:only-child
如果某个元素是父元素中唯一的子元素,那将会被匹配:only-of-type
选择所有没有兄弟元素,且具有相同的元素名称的元素。
- 表单
:input
匹配所有 input, textarea, select 和 button 元素:text
查询所有文本框:password
匹配所有密码框:radio
匹配所有单选按钮:checkbox
匹配所有复选框:submit
匹配所有提交按钮:image
匹配所有图像域:reset
匹配所有重置按钮:button
匹配所有按钮:file
匹配所有文件域
- 表单对象属性
:enabled
匹配所有可用元素:disabled
匹配所有不可用元素:checked
匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用:selected
:selected
匹配所有选中的option元素
- 混淆选择器
$.escapeSelector(selector)
转义CSS选择器中有特殊意义的字符或字符串,比如带#的class
- 基本
- 核心
jQuery(callback)
$(document).ready()的简写。each(callback)
以每一个匹配的元素作为上下文来执行一个函数。return 跳出循环length
jQuery 对象中元素的个数。等价于size()
已废弃selector
返回传给jQuery()的原始选择器。get([index])
取得其中一个匹配的元素。从0开始,返回的是DOM对象,类似的有eq(index)
,返回的是jQuery对象。index([selector|element])
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。找不着返回-1data([key],[value])
$.data("#a")
取id为a的元素值$.data("#a", 1)
为id为a的元素赋值为1$.removeData("#a")
删除id为a的元素的值
jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。jQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数
- 工具
jQuery.each(object, [callback])
通用遍历方法,可用于遍历对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。return false
退出循环jQuery.grep(array, callback, [invert])
使用过滤函数过滤数组元素。必须返回 true 以保留元素或 false 以删除元素。jQuery.makeArray(obj)
将类数组对象转换为数组对象。jQuery.map(arr|obj,callback)
将一个数组中的元素转换到另一个数组中。jQuery.inArray(value,array,[fromIndex])
查找元素在数组中的位置jQuery.toArray()
把jQuery集合中所有DOM元素恢复成一个数组。jQuery.merge(first,second)
合并两个数组,返回的结果会修改第一个数组的内容jQuery.unique(array)
删除数组中重复元素。 3.0以上版本已被弃用jQuery.uniqueSort(array)
通过搜索的数组对象,排序数组,并移除任何重复的节点jQuery.parseXML(data)
解析字符串到XML文件jQuery.contains(container,contained)
一个DOM节点是否包含另一个DOM节点。jQuery.type(obj)
检测obj的数据类型。jQuery.trim(str)
去掉字符串起始和结尾的空格。jQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。是.serialize()的核心方法。
- 效果
show([speed,[easing],[fn]])
显示隐藏的匹配元素。hide([speed,[easing],[fn]])
隐藏匹配元素。toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。slideDown([speed],[easing],[fn])
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。slideUp([speed,[easing],[fn]])
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。fadeOut([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。fadeToggle([speed,[easing],[fn]])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数stop([clearQueue],[jumpToEnd])
停止所有在指定元素上正在运行的动画。delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。finish( [queue ] )
停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。jQuery.fx.off
关闭页面上所有的动画。
- 事件和对象
event.pageX
鼠标相对于文档的左边缘的位置。event.pageY
鼠标相对于文档的右边缘的位置。event.timeStamp
这个属性返回事件触发时距离1970年1月1日的毫秒数。
- 回调函数
callbacks.add(callbacks)
回调列表中添加一个回调或回调的集合。callbacks.disable()
禁用回调列表中的回调callbacks.empty()
从列表中删除所有的回调.callbacks.fire()
用于传入指定的参数调用所有的回调。callbacks.remove(callbacks)
删除回调或回调回调列表的集合。
- 文档处理
replaceWith(content|fn)
将所有匹配的元素替换成指定的HTML或DOM元素。移动到目标位置来替换,而不是复制一份来替换。detach()
移除被选元素,会保留 jQuery 对象中的匹配的元素- closest和parents的主要区别是:
- 前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
- 前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
- 前者返回0或1个元素,后者可能包含0个,1个,或者多个元素
ajax
jQuery.ajax(url,[settings])
- url 请求地址
- settings 选项,皆可选
- accepts 请求的数据类型
- async 默认true 异步请求 false 同步请求
- beforeSend(XHR) 请求之前的操作,比如禁用submit按钮防止多次提交等
- cache 默认true 缓存该页面
- complete(XHR, TS) 请求完成后回调函数 (请求成功或失败之后均调用)。
- contentType 默认: “application/x-www-form-urlencoded”发送信息至服务器时内容编码类型。
- context 设置Ajax相关回调函数的上下文
- crossDomain 默认: 同域请求为false
- data 发送到服务器的数据。
- dataType 预期服务器返回的数据类型。
- error (默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。
- global (默认: true) 是否触发全局 AJAX 事件
- headers 默认 Default: {},此设置被设置之前beforeSend函数被调用;因此,消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。
- ifModified (默认: false) 仅在服务器数据改变时获取新数据。
- isLocal 默认: 取决于当前的位置协议
- jsonp 在一个jsonp请求中重写回调函数的名字。
- jsonpCallback 为jsonp请求指定一个回调函数名。
- mimeType 一个mime类型用来覆盖XHR的 MIME类型。
- password 用于响应HTTP访问认证请求的密码
- statusCode 默认: {}一组数值的HTTP代码和函数对象,当响应时调用了相应的代码。
- success(data, textStatus, jqXHR) 请求成功后的回调函数。
- traditional 用传统的方式来序列化数据,则设置为true,可传递对象
- timeout 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
- type (默认: “GET”) 请求方式 (“POST” 或 “GET”),PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
- url (默认: 当前页地址) 发送请求的地址。
- username 用于响应HTTP访问认证请求的用户名
jQuery.load(url, [data], [callback])
载入远程 HTML 文件代码并插入至 DOM 中。
- url:待装入 HTML 网页网址。
- data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
- callback:载入成功时回调函数。
jQuery.get(url, [data], [callback], [type])
- url:待载入页面的URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
jQuery.getJSON(url, [data], [callback])
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
jQuery.post(url, [data], [callback], [type])
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:发送成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
serialize()
序列表表格内容为字符串。$("form").serialize()
serializeArray()
序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。即JSON对象而非JSON字符串。