jQuery总结

一、基本介绍

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选择器;同时它也可以自定义选择器;
6、min版官方引用地址:<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

二、效果

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()相反;
replaceAll() 用指定的 HTML 内容或元素替换被选的每一个元素
replaceWith() 用指定的 HTML 内容或元素替换被选的每一个元素,传参可以为函数方法;

四、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      树形菜单;

posted @ 2018-06-14 23:39  覆手为云p  阅读(273)  评论(0编辑  收藏  举报
停止精灵球