最后的锋利jQuery笔记
第四章 jQuery事件和动画
4.1 jQuery中的事件
4.1.1加载DOM
在常规的JavaScript代码中,通常使用wiondow.onload方法,而在jQuery中,使用的是
$(document).ready()方法。
$(document).ready(function(){
//
})
简写:
$(fuuction(){
//
})
4.1.2事件绑定
bind(type [,data],fn);
bind()方法有3个参数
第1个参数是事件类型
第2个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。
4.1.3合成事件
jQuery有两个合成事件--hover()和toggle()方法。属于jQuery自定义的方法。
hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind("mouseleave")
而不是替代bind("mouseover")和bind("mouseout");因此当需要触发hover()方法的第2个函数时,
需要用trigger("mouseleave")来触发,而不是trigger("mouseout");
toggle()方法:toggle(fn1,fn2,...fnN):用于模拟鼠标连续单击事件。
还有另外一个作用:切换元素的可见状态。
4.1.4事件冒泡
停止冒泡事件:stopPropagation();
阻止默认行为:preventDefault()
事件捕获:和事件冒泡刚好相反,从最顶端往下开始触发。
并非所有主流浏览器都支持事件捕获,jQuery不支持事件捕获,请直接使用原生的javascript
4.1.5事件对象的属性
event.type()方法:可以获取事件的类型。
event.preventDefault():
event.stopPropagation():
event.target():获取到触发事件的元素。
event.relatedTarget():
event.pageX()/event.pageY()方法:获取到光标相对于页面的x坐标和y坐标。
event.which():鼠标单击事件中获取到鼠标的左,中,右键;在键盘事件中获取键盘的按键。
$(function(){
$("body").mousedown(function(e){
alert(e.which) //1=鼠标左键left;2=鼠标中键;3=鼠标右键
})
})
event.metaKey():方法
event.metaKey():为键盘事件中获取<ctrl>按键。
event.originalEvent():指向原始的事件对象。
4.1.6移除事件
1. $("#delAll").click(function(){
$("#btn").unbind("click");
})
2.移除<button>元素的其中一个事件
4.1.7模拟操作
1.常用模拟
使用trigger()来完成模拟。
2.触发自定义事件
$('#btn').bind("myClick",function(){
$('#test').append("<p>我的自定义事件.</p>");
});
//触发
$('#btn').trigger("myClick");
3.传递数据
trigger(type,[data]):
4.执行默认操作。
4.2 jQuery中的动画
4.2.1 show()方法和hide()方法
4.2.2 fadeln()方法和fadeOut()方法:改变元素的不透明度。
4.2.3 slideUp()方法和slideDown()方法:只会改变元素的高度。
4.2.4 自定义动画方法animate():
语法结构 :animate(params,speed,callback);
params:一个包含样式属性及值的映射,比如 {property1 :"value1",property2:"value2"}
speed:速度参数,
callback:在动画完成时执行的函数。可选
1.自定义简单动画
2.累加,累减动画
3.多重动画
4.综合动画
4.2.5动画回调函数
4.2.6停止动画和判断是否处于动画状态
1.停止元素的动画
stop([clearQueue][,gotoEnd]);
参数clearQueue和gotoEnd都是可选参数,为Boolean值。
clearQueue代表是否要清空未执行完的动画队列,
gotoEnd代表是否直接将正在执行的动画跳转到末状态。
2.判断元素是否处于动画状态
3.期货动画方法
toggle(speed,[callback])
slideToggle(speed,[callback])
fadeTo(speed,opacity,[callback])
第5章 jQuery对表单,表格的操作及更多应用.
5.1表单应用
一个表单有3个基本组成部分。
(1)表单标签
(2)表单域:
(3)表单按钮:
5.1.1单行文本框应用。
5.1.2多行文本框应用.
5.1.3复选框
5.1.4下拉列表
5.1.5表单验证
5.2表格应用
5.2.1表格变色
1.普通的隔行变色
2.单选框控制表格行高亮
3.复选框控制表格行高亮
5.2.2表格展开关闭
5.2.3表格内容筛选
第6章jQuery与Ajax的应用
6.5 jQuery中的Ajax
6.5.1 load()方法
1.载入HTML文档
load(url[,data][,callback])
url String 请求HTML页面的url地址
data Object 发送至服务器的key/value数据
callback Function 请求完成时的回调函数,无论请求成功或失败