jQuery能够绑定的事件主要包括:
鼠标事件
- click: 鼠标单击时触发;
- dblclick:鼠标双击时触发;
- mouseenter:鼠标进入时触发;
- mouseleave:鼠标移出时触发;
- mousemove:鼠标在DOM内部移动时触发;
- hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上,通常是<input>
和<textarea>
。
- keydown:键盘按下时触发;
- keyup:键盘松开时触发;
- keypress:按一次键后触发。
其他事件
- focus:当DOM获得焦点时触发;
- blur:当DOM失去焦点时触发;
- change:当
<input>
、<select>
或<textarea>
的内容改变时触发; - submit:当
<form>
提交时触发; - ready:当页面被载入并且DOM树完成初始化后触发。
其中,ready
仅作用于document
对象。由于ready
事件在DOM完成初始化后触发,且只触发一次
使用jQuery实现动画
show / hide
直接以无参数形式调用show()
和hide()
,会显示和隐藏DOM元素。
toggle()
方法则根据当前状态决定是show()
还是hide()
。
show()
和hide()
是从左上角逐渐展开或收缩的,而slideUp()
和slideDown()
则是在垂直方向逐渐展开或收缩的。
fadeIn()
和fadeOut()
的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity
属性来实现,而fadeToggle()
则根据元素是否可见来决定下一步动作。
animate()
,它可以实现任意动画效果,我们需要传入的参数就是DOM元素最终的CSS状态和时间。
Query的动画效果还可以串行执行,通过delay()
方法还可以实现暂停。
不是block性质的DOM元素,对它们设置height
根本就不起作用,所以动画也就没有效果。
ajax
jQuery在全局对象jQuery
(也就是$
)绑定了ajax()
函数,可以处理AJAX请求。ajax(url, settings)
函数需要接收一个URL和一个可选的settings
对象,常用的选项如下:
-
async:是否异步执行AJAX请求,默认为
true
,千万不要指定为false
; -
method:发送的Method,缺省为
'GET'
,可指定为'POST'
、'PUT'
等; -
contentType:发送POST请求的格式,默认值为
'application/x-www-form-urlencoded; charset=UTF-8'
,也可以指定为text/plain
、application/json
; -
data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;
-
headers:发送的额外的HTTP头,必须是一个object;
-
dataType:接收的数据格式,可以指定为
'html'
、'xml'
、'json'
、'text'
等,缺省情况下根据响应的Content-Type
猜测。
编写一个jQuery插件的原则:
- 给
$.fn
绑定函数,实现插件的代码逻辑; - 插件函数最后要
return this;
以支持链式调用; - 插件函数要有默认值,绑定在
$.fn.<pluginName>.defaults
上; - 用户在调用时可传入设定值以便覆盖默认值。