一、基本介绍
1、jQuery是个JavaScript函数库,它很大程度的简化了JavaScript的编程;
2、主要包括:HTML元素选择和操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX、Utilities等功能,同时还提供大量插件;
3、基础语法:$(selector).action()
是
固
定
选
择
符
号
,
s
e
l
e
c
t
o
r
是
要
操
作
的
元
素
,
选
择
方
法
是
X
P
a
t
h
与
C
S
S
选
择
器
语
法
的
组
合
,
a
c
t
i
o
n
(
)
是
选
择
到
元
素
后
要
执
行
的
方
法
;
4
、
一
般
所
有
的
操
作
都
位
于
是固定选择符号,selector是要操作的元素, 选择方法是XPath 与 CSS 选择器语法的组合,action()是选择到元素后要执行的方法; 4、一般所有的操作都位于
是固定选择符号,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;
六、常用方法
.
n
o
C
o
n
f
l
i
c
t
(
)
释
放
对
.noConflict() 释放对
.noConflict()释放对符号的控制,但能使用“jQuery”实现相同的功能;或者使用jQuery(document).ready(function(KaTeX parse error: Expected '}', got 'EOF' at end of input: ){//可以在这里边使用符号})
$.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 树形菜单;