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