jQuery总结

Posted 2020-11-18 aland-1415

一、基本介绍
1、jQuery是个javascript函数库，它很大程度的简化了JavaScript的编程；
2、主要包括：html元素选择和操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX、Utilities等功能，同时还提供大量插件；
3、基础语法：$(selector).action()        $是固定选择符号，selector是要操作的元素， 选择方法是XPath 与 CSS 选择器语法的组合，action()是选择到元素后要执行的方法；
4、一般所有的操作都位于$(document).ready(function){/*操作方法*/}}之内，表示在文档DOM加载完成之后才执行jQuery代码；
5、选择器$()，可以对单个或多个HTML元素进行选择，选择基于元素的id,类，类型，属性，属性值等，也基于Css选择器；同时它也可以自定义选择器；

二、效果

hide(speed,callback)          隐藏元素；speed可为毫秒或slow,fast;callback为隐藏完成后执行的函数名称；两个参数都是可选的，下同；
show(speed,callback)          显示元素；
toggle(speed,callback)        显示/隐藏元素；
fadeIn(speed,callback)        淡入已隐藏的元素；
fadeOut(speed,callback)       淡出已显示的元素；
fadeToggle(speed,callback)    淡入/淡出元素；
fadeTo(speed,opacity,callback)渐变为指定透明度,opacity为透明度，必须介于0-1之间；
slideDown(speed,callback)     向下滑动展开元素；
slideUP(speed,callback)       向上滑动收拢元素；
slideToggle(speed,callback)   向下展开/向上收拢元素；
animate({params},speed,callback)创建自定义动画；params为将要达到效果的属性，动画会从原属性渐变到此属性的；
stop(stopAll,goToEnd)         停止动画效果，两个参数都是bool值，第一个是否清除动画队列，第二个为是否立即停止当前动画；

 

三、对DOM的操作

text()        设置或返回所选元素的文本内容；
html()        设置或返回所选元素的内容，包括HTML标记；
val()         设置或返回表彰字段的值；
attr()        获取属性值；
append()      在元素结尾追加内容(标签内)；
prepend()     在元素开头插入元素(标签内）；
after()       在元素结尾追加内容(标签外）；
before()      在元素开头插入元素(标签外）；

remove()      删除已选择的元素，包括子元素，可接受一个选择器参数，以进行过滤；
empty()       删除已选择元素的所有子元素；
addClass()    向已选择元素添加一个或多个类属性；
removeClass() 删除已选择元素的一个或多个类属性；
removeAttr()  删除元素属性；
toggleClass() 对已选择元素进行添加/删除类属性的切换操作；
css()         设置或返回样式属性；参数为css的属性名和值；
width()       设置或返回元素的宽度（不包括内外边距和边框）；
height()      设置或返回元素的高度（不包括内外边距和边框）；
innerWidth()  设置或返回元素的宽度（包括内边距）；
innerHeight() 设置或返回元素的高度（包括内边距）；
outerWidth()  设置或返回元素的宽度（包括内边距和边框）；
outerHeight() 设置或返回元素的高度（包括内边距和边框）；

parent()      返回元素的直接父元素；
parents()     返回元素的所有上级元素；
parentsUntil()返回元素到给定元素之间的所有上级元素；
children()    返回元素的直接子元素；
find()        返回元素的所有下级元素；
siblings()    返回元素的所有同级元素；
next()        返回元素的下一个同级元素；
nextAll()     返回元素之后的所有同级元素；
nextUntil()   返回元素到给定元素之间的所有同级元素；
first()       返回选中元素中的第一个元素；
last()        返回元素中的最后一个元素；
eq()          返回选中元素中指定元素，接受一个索引参数，表示第几个；
filter()      对已选择元素进行过滤，接受一个选择器参数；
not()         反向过滤，结果与filter()相反；

 

四、jQuery-AJAX
AJAX是在不重载全部页面的情况下，实现对部分网页的更新的技术；
jQuery-AJAX中方法

load(URL,data,callback)        从服务器加载数据，并把返回数据放入被选元素中，data是请求参数，为键值对形式；callback是回调函数名；
$.get(URL,callback)            以get方法从服务器上请求数据；
$.post(URL,data,callback)      POST请求；
$.ajax()                       执行异步AJAX请求；
$.getJSON()                    使用get请求加载JSON数据；
$.getScript()                  使用get请求从服务器加载并执行JavaScript;
ajaxComplete()                 AJAX请求完成时执行的函数；
ajaxError()                    请求失败时执行的函数；
ajaxSend()                     发送请求之前运行的函数；
ajaxStart()                    规定第一个AJAX请求开始时执行的函数；
ajaxStop()                     所有AJAX请求成功完成时运行的函数；
serialize()                    编码表单元素为字符串；
serializeArray()               编码表单元素集为字符串；

 

五、常见DOM事件
鼠标：click,dbclick,mouseenter,mouseleave;
键盘：keypress,keydown,keyup;
表单：submit,change,focus,blur;
窗口：load,resize,scroll,unload;

六、常用方法

$.noConflict()        释放对$符号的控制，但能使用“jQuery”实现相同的功能；或者使用jQuery(document).ready(function($){//可以在这里边使用$符号})
$.contains()          判断另一个DOM元素是否是指定DOM元素的后代；
$.each()              遍历指定对象和数组；
$.extend()            将一个或多个对象的内容合并到目标对象；
$.globalEval()        全局性的执行一段JavaScript代码；
$.grep()              过滤并返回满足指定函数的数组元素；
$.inArray()           在数组中查找指定值并找返回它的索引值，如果没找到则返回-1；
$.isArray()           判断指定对象是否是一个数组；
$.isEmptyObject()     判断对象是否为空；
$.isFunction()        判断指定参数是否是一个函数；
$.isNumeric()         判断是否是数字；
$.isPlainObject()     判断是否是一个纯粹对象；
$.isWindow()          判断参数是否是一个窗口；
$.isXMLDoc()          判断一个DOM节点是否位于XML文档中；
$.makeArray()         将一个类数组对象转换为数组对象；
$.map()               指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回
$.merge()             合并两个数组内容到第一个数组
$.noop()              一个空函数
$.now()               返回当前时间
$.parseHTML()         将HTML字符串解析为对应的DOM节点数组
$.parseJSON()         将符合标准格式的JSON字符串转为与之对应的JavaScript对象
$.parseXML()          将字符串解析为对应的XML文档
$.trim()              去除字符串两端的空白字符
$.type()              确定JavaScript内置对象的类型
$.uniqueSort()        对DOM元素数组进行排序，并移除重复的元素
$.data()              在指定的元素上存取数据，并返回设置值
$.hasData()           确定一个元素是否有相关的jQuery数据
$.sub()               创建一个新的jQuery副本，其属性和方法可以修改，而不会影响原来的jQuery对象
$.speed               创建一个包含一组属性的对象用来定义自定义动画
$.htmlPrefilter()     通过jQuery操作方法修改和过滤HTML字符串
$.readyException()    处理包裹在jQuery()中函数同步抛出的错误

callbacks.add()       在回调列表中添加一个回调或回调的集合
callbacks.disable()   禁用回调列表中的回调函数
callbacks.disabled()  确定回调列表是否已被禁用
callbacks.empty()     从列表中清空所有的回调
callbacks.fire()      传入指定的参数调用所有的回调
callbacks.fired()     确定回调是否至少已经调用一次
callbacks.firewith()  给定的上下文和参数访问列表中的所有回调
callbacks.has()       判断回调列表中是否添加过某回调函数
callbacks.lock()      锁定当前状态的回调列表
callbacks.locked()    判断回调列表是否被锁定
callbacks.remove()    从回调列表中的删除一个回调或回调集合

$.Deferred()          返回一个链式实用对象方法来注册多个回调
deferred.always()     当Deferred（延迟）对象被受理或被拒绝时，调用添加的处理程序
deferred.done()       当Deferred（延迟）对象被受理时，调用添加的处理程序
deferred.fail()       当Deferred（延迟）对象被拒绝时，调用添加的处理程序
deferred.notify()     给定一个参数，调用正在延迟对象上进行的回调函数( progressCallbacks )
deferred.notifyWith() 给定上下文和参数，调用正在延迟对象上进行的回调函数( progressCallbacks )
deferred.pipe()       过滤 and/or 链式延迟对象的工具方法
deferred.progress()   当Deferred（延迟）对象生成进度通知时，调用添加处理程序
deferred.promise()    返回 Deferred(延迟)的 Promise 对象
deferred.reject()     拒绝 Deferred（延迟）对象，并根据给定的参数调用任何 failCallbacks 回调函数
deferred.rejectWith() 拒绝 Deferred（延迟）对象，并根据给定的 context 和 args 参数调用任何 failCallbacks 回调函数
deferred.resolve()    解决Deferred（延迟）对象，并根据给定的参数调用任何 doneCallbacks 回调函数
deferred.resolveWith()解决Deferred（延迟）对象，并根据给定的context 和 args 参数调用任何 doneCallbacks 回调函数
deferred.state()      确定一个Deferred（延迟）对象的当前状态
deferred.then()       当Deferred（延迟）对象解决，拒绝或仍在进行中时，调用添加处理程序
.promise()            返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中

 

七、插件及相关作用
jQuery Validate        为表单提供了强大的验证功能；
jQuery Prettydate    表单验证；
jQuery Accordion    用于创建折叠菜单；
jQuery Autocomplete    根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择；
jQuery Growl          用于在一个覆盖层显示反馈消息；常用消息提醒；
jQuery Password Validation    用于密码验证；
jQuery Tooltip         自定义工具提示框；
jQuery Treeview      树形菜单；