JQuery总结

转载自http://dwqs.github.io/resume/，

目录系列：http://www.ido321.com/1602.html,http://www.ido321.com/1607.html,http://www.ido321.com/1610.html,http://www.ido321.com/1626.html

 

一：选择器归纳

1、基本选择器

选择符	匹配元素
*	所有元素
id	给定ID的元素
element	给定类型的所有元素
.class	给定类的所有元素
a,b	与a或b匹配的元素
a b	a的后代元素中与b匹配的元素
a>b	a的直接子元素中与b匹配的元素
a+b	a的直接同辈元素中与b匹配的元素
a~b	a的同辈元素中与b匹配的元素

 

2、位置选择器

选择符	匹配元素
a b:nth-child(index)	a的子元素中，第index个与b匹配的元素（从1开始计数）
a b:nth-child(even)	a的子元素中，第偶数个与b匹配的元素（从1开始计数）
a b:nth-child(odd)	a的子元素中，第奇数个与b匹配的元素（从1开始计数）
a b:nth-child(2n+2)	a的子元素中，第2n+2个与b匹配的元素（从1开始计数）,n为自然数
a b:nth-last-child()	同:nth-child()，从最后一个元素开始计数
a b:first-child	a的子元素中，第1个与b匹配的元素
a b:last-child	a的子元素中，最后一个个与b匹配的元素
:only-child	作为其父元素唯一一个子元素的元素
a b:nth-of-type()	同:nth-child()，只计同类元素
a b:nth-last-of-type()	同:nth-last-child()，只计同类元素
a b:first-of-type()	同:first-child()，只计同类元素
a b:last-of-type()	同:last-child()，只计同类元素
a b:only-of-type()	没有同名元素的元素

 

3、属性选择器

选择符	匹配元素
[attr]	带有属性attr的元素
[attr="value"]	attr属性值为value的元素
[attr!="value"]	attr属性值不为value的元素）
[attr^="value"]	attr属性值以value开头的元素
[attr$="value"]	attr属性值以value结尾的元素
[attr*="value"]	attr属性值包含value字符串的元素
[attr~="value"]	attr属性值是空格分隔的字符串，其中一个字符串值是value的元素
[attr|="value"]	attr属性值等于value或value后跟一个连字符(-)的元素

 

4、表单选择器

选择符	匹配元素
:input	所有<input>、<textarea>、<select>和<button>元素
:text	type=”text”的<input>元素
:password	type=”password”的<input>元素
:file	type=”file”的<input>元素
:radio	type=”radio”的<input>元素
:checkbox	type=”checkbox”的<input>元素
:submit	type=”submit”的<input>元素
:image	type=”image”的<input>元素
:reset	type=”reset”的<input>元素
:button	type=”button”的<input>元素
:enabled	启用的表单元素
:disabled	禁用的表单元素
:checked	选中的复选框和单选按钮
:selected	选中的<option>元素

 

5、过滤选择器

选择符	匹配元素
:root	文档根元素
:header	标题元素，h1~h6
:animated	动画正在运行的元素
:contains(text)	包含文本text的元素
a:empty	不包含子节点的a元素
a:has(b)	至少包含一个b元素匹配的a元素(返回父元素a而非子元素b)
:parent	与:empty相反，返回包含子节点的元素
:hidden	隐藏的元素，包括<input type="hidden">
:visible	可见元素
:focus	获得焦点的元素
:lang(language)	给定语言代码的元素
:target	URI标识符指向的目标元素，具体见：:target用法

 

6、用于结果集中的选择器

这类选择器在CSS中不存在，但可以用于JQuery的结果中进行筛选。

选择符	匹配元素
:first	结果集中的第一个元素，对应方法为first(),如$("a b:first")<==>$("a b").first()
:last	结果集中的最后一个元素，对应方法为last(),如$("a b:last")<==>$("a b").last()
:not(a)	结果集中不与a匹配的元素，对应方法为not(),如$("a b:not(c)")<==>$("a b").not(c)
:even	结果集中索引是偶数的元素(从0开始),如$("a b:even")
:odd	结果集中索引是奇数的元素(从0开始),如$("a b:odd")
:eq(index)	结果集中索引是index的元素(从0开始),对应方法是eq(index),如$("a b:eq(2)")<==>$("a b").eq(2)
:gt(index)	结果集中索引大于index的元素(从0开始),如$("a b:gt(2)")
:lt(index)	结果集中索引小于index的元素(从0开始),如$("a b:lt(2)")

 

二：DOM遍历和事件处理

1.筛选元素

方法	返回的元素
.filter(selector)	与selector匹配的元素
.filter(callbaxk)	callback中返回true的元素
.eq(index)	从0开始计数的第index个选中元素
.first()	选中元素中的第一个元素
.last()	选中元素的最后一个元素
.slice(start[,end])	从0开始计数的给定范围内的选中元素
.not(selector)	与selector不匹配的元素
.has(selector)	与selector匹配的的后代元素

 

2.后代元素

方法	返回的元素
.find(selector)	与selector匹配的后代元素
.contents()	子节点（包括文本节点）
.children([selector])	子节点，可传入selector进行筛选

 

3.同辈元素

方法	返回的元素
.next([selector])	每个选中元素紧邻的下一个元素，可传入selector进行筛选
.nextAll([selector])	每个选中元素后的所有同辈元素，可传入selector进行筛选
.nextUntil([selector],[filter])	每个选中元素之后、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选
.prev([selector])	每个选中元素紧邻的上一个元素，可传入selector进行筛选
.prevAll([selector])	每个选中元素前的所有同辈元素，可传入selector进行筛选
.prevUntil([selector],[filter])	每个选中元素之前、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选
.siblings([selector])	所有同辈元素，可传入selector进行筛选

 

4.祖先元素

方法	返回的元素
.parent([selector])	每个选中元素的父元素，可传入selector进行筛选
.parents([selector])	每个选中元素的所有祖先元素，可传入selector进行筛选
.parentsUntil([selector],[filter])	每个选中元素的所有祖先元素、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选
.closest(selector)	与selector匹配的第一个元素，从元素自身开始沿DOM数向上搜索祖先元素
.offsetParent()	选中元素的第一个被定为的父元素(relative或absolute)

 

5.集合操作

方法	说明
.add([selector])	将与selector匹配的元素添加原对象集合中
.addBack()	选中的元素加上JQuery内部栈中之前选中的元素
.end()	内部JQuery栈中之前选中的元素
.map(callback)	对每个选中调用回调函数callback之后的结果
.pushStack()	指定的元素

 

6.操作选中的元素

方法	说明
.is(selector)	确定匹配的元素中是否有传入的与selector匹配的元素
.index()	取得匹配元素相对其同辈元素的索引
.index(element)	取得匹配元素中与指定元素对象的DOM节点的索引
$.contains(a,b)	确定DOM节点a是否包含DOM节点b
.each(callback)	迭代匹配元素，对每个元素执行callback
.length	取得匹配元素的数量
.get()	取得与匹配元素对应的DOM节点列表
.get(index)	取得匹配元素中与指定索引对应的DOM节点
.toArray()	取得与匹配元素对应的DOM节点列表

 

7.事件绑定

方法	说明
.ready(handler)	DOM和CSS完全加载后之间handler
.on(type,[selector],[data],handler)	绑定type事件，并指定事件处理程序handler;如果指定selector则执行事件委托
.on(events,[selector],[data])	根据events对象的事件绑定多个事件处理程序
.off(type,[selector],handler)	解除on给元素绑定的事件处理程序
.bind(type,[data],handler)	绑定type事件，并指定事件处理程序handler
.one(type,[data],handler)	绑定type事件，并指定事件处理程序handler,handler被调用后立即解除绑定
.unbind([type],[handler])	解除bind给元素绑定的指定事件处理程序(不指定则解除所有指定)
.delegate(selector,type,[data],handler)	给与selector匹配的元素绑定type事件，并指定事件处理程序handler
.delegate(selector,handlers)	给与selector匹配的元素绑定type事件，并指定事件处理程序handlers
.undelegate(selector,type,[handler])	解除delegate给元素绑定的指定事件处理程序

 

8.其它方法

方法	说明
.trigger(type,[data])	触发元素上的事件并执行事件的默认操作
.triggerHandler(type,[data])	触发元素上的事件，但不执行事件的默认操作
$.proxy(fn,context)	创建一个新的在指定上下文中执行的函数。

 

三：DOM完全操作和动画

特性和属性

方法	说明
.attr(key)	取得特性key的值
.attr(key，value)	设置特性key的值为value
.attr(key，fn)	将fn的返回值作为key的值
.attr(obj)	根据传入的键值对象参数设置特性的值
.removeAttr(key)	删除特性key的值
.prop(key)	取得属性key的值
.prop(key，value)	设置属性key的值为value
.prop(key，fn)	将fn的返回值作为key的值
.prop(obj)	根据传入的键值对象参数设置属性的值
.removeProp(key)	删除属性key的值
.addClass(class)	为匹配元素添加传入的类
.removeClass(class)	为匹配元素删除传入的类
.toggleClass(class)	对于匹配元素，如果存在类则删除，不存在则添加
.hasClass(class)	匹配元素中至少一个包含传入的类则返回true
.val()	获取第一个匹配元素的value属性值
.val(value)	设置每个匹配元素的value属性

关于特性和属性：DOM元素的特性（Attribute）和属性（Property）

 

内容操作

方法	说明
.html()	获取第一个匹配元素的HTML内容
.html(value)	将每个匹配元素的HTML内容设置为value
.text()	获取所有匹配元素的文本，以字符串返回
.text(value)	将每个匹配元素的文本设置为value

 

CSS和尺寸相关

方法	说明
.css(key)	取得属性key的值
.css(key,value)	设置key的值为value
.css(obj)	根据传入的键值参数设置CSS的属性值
offset()	返回第一个匹配元素相对于视口的坐标（单位是像素）
.position()	返回第一个匹配元素相对.offsetParent()返回元素的坐标（单位是像素）
.scrollTop()	返回第一个匹配元素的垂直滚动位置
.scrollTop(value)	设置每个匹配元素的垂直滚动位置
.scrollLeft()	返回第一个匹配元素的水平滚动位置
.scrollLeft(value)	设置每个匹配元素的水平滚动位置
.height()	返回第一个匹配元素的高度
.height(value)	设置每个元素的高度
.width()	返回第一个匹配元素的度
.width(value)	设置每个元素的宽度
.innerHeight()	返回第一个匹配元素的高度（包含内边距，不包含边框）
.innerWidth()	返回第一个匹配元素的宽度（包含内边距，不包含边框）
.outerHeight([includeMargin])	返回第一个匹配元素的高度（包含内边距和边框，bool为true，则包含外边距，反之不包含）
.outerWidth([includeMargin])	返回第一个匹配元素宽度（包含内边距和边框，bool为true，则包含外边距，反之不包含）

 

DOM插入

方法	说明
.append(content)	在每个匹配元素内部的末尾插入content
.appendTo(selector)	将匹配元素插入到与selector匹配的元素的内部的末尾
.prepend(content)	在每个匹配元素内部的开头插入content
.prependTo(selector)	将匹配元素插入到与selector匹配的元素的内部的开头
.after(content)	在每个匹配元素外部的后面插入content
.insertAfter(selector)	将匹配元素插入到与selector匹配的元素的外部的后面
.before(content)	在每个匹配元素部的前面插入content
.insertBefore(selector)	将匹配元素插入到与selector匹配的元素的外部的前面
.wrap(content)	匹配的每个元素包含在content中
.wrapAll(content)	匹配的每个元素作为一个整体包含在content中
.wrapInner(content)	匹配的每个元素的内部内容包含在content中
.unwrap()	删除元素的父元素（反操作）

 

替换、删除和复制

方法	说明
.replaceWith(content)	将匹配的元素替换为content
.replaceAll(selector)	将与selector匹配的元素替换为匹配的元素
.empty()	删除每个元素的子节点
.remove([selector])	从DOM中删除节点，selector可以用于筛选
.detach([selector])	从DOM中删除节点，selector可以用于筛选，并保留JQuery给元素添加的数据
.clone([withHandlers],[deepWithHandlers])	返回匹配元素的副本，也可以复制事件处理程序

 

数据

方法	说明
.data(key)	获取第一个匹配元素的key键对应的数据
.data(key,value)	设置每个元素关联的key对应的数据值为value
.removeData(key)	删除每个元素与key键关联的数据

 

预定义动画

方法	说明
.show()	显示匹配元素
.show(speed,[callback])	通过高度、宽度和透明度动画显示匹配元素
.hide()	隐藏匹配元素
.hide(speed,[callback])	通过高度、宽度和透明度动画隐藏匹配元素
.toggle([speed],[callback])	显示或隐藏匹配元素
.slideDown([speed],[callback])	以滑入方式显示匹配元素
.slideUp([speed],[callback])	以滑出方式隐藏匹配元素
.slideToggle([speed],[callback])	以滑动方式显示或隐藏匹配元素
.fadeIn([speed],[callback])	以淡入方式显示匹配元素
.fadeOut([speed],[callback])	以淡出方式隐藏匹配元素
.fadeToggle([speed],[callback])	以淡入淡出方式显示或隐藏匹配元素
.fadeTo(speed,opacity,[callback])	调整匹配元素的透明度

 

自定义动画

方法	说明
.animate(attrs,[speed],[easing],[callback])	针对指定的css属性自定义动画
.animate(attrs,options)	.animate的底层接口，支持队列控制

 

队列操作

方法	说明
.queue([queueName])	返回第一个匹配元素上的动画队列
.queue([queueName]，callback)	在动画队列的最后添加回调函数
.queue([queueName]，newQueue)	以新队列替换旧队列
.dequeue([queueName])	执行动画队列的下一个动画
.clearQueue([queueName])	清除所有未执行函数
.stop([clearQueue],[jumpToEnd])	停止当前动画,启动排列动画（若有）
.finish([queueName])	停止当前动画并将所有排列的动画理解提前到它们的目标值
.delay(duration,[queueName])	延迟duration毫秒执行队列中的下一个动画
.promise([queueName],[target])	在集合中所有排队的操作完成后返回一个待解决的承诺对象

四：ajax和延迟加载

1.发送请求

Ajax方法	说明
$.ajax([url],options)	使用传入的options发送一次Ajax请求
.load(url,[data],[callback])	向传入的url生成一次Ajax请求，然后将响应放在匹配的元素中
$.get(url,[data],[callback],[returnType])	向传入的url发送一个get请求
$.getJSON(url,[data],[callback])	向传入的url发送一个Ajax请求，将响应作为JSON数据结构解析
$.getScript(url,[callback])	向传入的url发送一个Ajax请求，将响应作为Javascript解析
$.post(url,[data],[callback],[returnType])	向传入的url发送一个post请求

 

2.监视请求

Ajax方法	说明
.ajaxComplete(handler)	绑定Ajax请求完成后调用的处理程序
.ajaxError(handler)	绑定Ajax请求发生错误后调用的处理程序
.ajaxSend(handler)	绑定Ajax请求开始时调用的处理程序
.ajaxStart(handler)	绑定Ajax请求开始但没有其它Ajax请求时调用的处理程序
.ajaxStop(handler)	绑定Ajax请求结束但没有其它Ajax请求时调用的处理程序
.ajaxSuccess(handler)	绑定Ajax请求成功返回响应时调用的处理程序

 

3.配置

Ajax方法	说明
$.ajaxSetup(options)	为后续的Ajax请求设置选项
$.ajaxPrefilter([dataType],handler)	在$.ajax()处理请求之前，修改每个请求的选项
$.ajaxTransport(transportFunction)	为Ajax事务定义一个新的传输机制

 

4.实用方法

Ajax方法	说明
.serialize()	将一组表单控件的值编码为一个查询字符串
.serializeArray()	将一组表单控件的值编码为一个JSON数据结构
$.param(obj)	将任意值的对象编码为一个查询字符串
$.globalEval(code)	在全局上下文中求值给定的Javascipt字符串
$.parseJSON(json)	将JSON对象转为JavaScript对象
$.parseXML(xml)	将XML字符串转为XML文档
$.parseHTML(html)	将HTML元素转为DOM元素

 

二、延迟对象

 

1.创建对象

函数	说明
$.Deferred([setupFunction])	创建一个新的延迟对象
$.when(deferreds)	在给定的延迟对象解决了之后返回一个待解决的承诺对象

 

2.延迟对象的方法

方法	说明
.resolve([args])	解决延迟对象并使用给定的参数调用完成回调函数
.resolveWith(context,[args])	解决延迟对象并使用给定的参数调用完成回调函数,同时让关键字this引用回调函数中的context
.reject([args])	拒绝延迟对象并使用给定的参数调用失败回调函数
.rejectWith(context,[args])	拒绝延迟对象并使用给定的参数调用失败回调函数,同时让关键字this引用回调函数中的context
.notify([args])	执行progress回调
.notifyWith(context,[args])	执行progress回调,同时让关键字this引用回调函数中的context
.promise([target])	返回与当前延迟对象的承诺对象

 

3.承诺对象的方法

方法	说明
.done(callback)	当对象被解决之后调用callback
.fail(callback)	当对象被拒绝之后调用callback
.always(callback)	当对象被拒绝或被解决之后调用callback
.then(doneCallbacks,failCallbacks)	当对象被解决之后调用doneCallbacks,当对象被拒绝之后调用failCallbacks
.progress(callback)	当对象每次接到进度通知后调用callback
.isRejected()	如果对象被拒绝，返回true
.isResolved()	如果对象被解决，返回true
.state()	返回当前运行状态，”pending”、”rejected”和”resolved”
.pipe([doneFilter],[failFilter])	返回新的承诺对象

 

三、其它方法

 

1.JQuery对象的属性

属性	说明
$.support	返回一个属性对象，表示浏览器是否支持各种特性和标准

 

2.数组和对象

函数	说明
$.each(collection,callback)	迭代集合，对每一项执行callback
$.extend(target,obj1,obj2,….)	扩展target对象
$.grep(array,callback,[invert])	使用callback筛选数组
$.makeArray(obj)	将obj对象转换为数组
$.map(array,callback)	迭代集合，对每一项执行callback，将返回的结果作为一个新数组返回
$.inArray(value,array)	判断value是否在array中，不在返回-1
$.merge(array1,array2)	合并数组array1和array2
$.unique(array)	从数组中移除重复的DOM元素

 

3.对象判断

函数	说明
$.isArray(obj)	判断对象obj是否为数组
$.isEmptyObject(obj)	判断对象obj是否为空的
$.isFunction(obj)	判断对象obj是否为函数
$.isPlainObject(obj)	判断对象obj是否是通过字面量或new Object()创建的
$.isNumber(obj)	判断对象obj是否为数值
$.isWindow(obj)	判断对象obj是否为浏览器窗口
$.isXMLDoc(obj)	判断对象obj是否为XML节点
$.type(obj)	判断对象obj的JavaScript类

相关文章：javascript中对变量类型的判断

 

4.其他

函数	说明
$.trim(string)	移除字符串的前后空白符
$.noConflict([removeAll])	向其它库过渡$标识符
$.noop()	什么也不做的函数
$.now()	以秒为单位，返回当前时间
$.holdReay(hold)	防止触发ready事件或释放当前的保留

相关文章：如何控制jquery的ready事件