jQuery是为事件处理特别设计的。
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当HTML中发生某些事件时所调用的方法
在事件中经常使用术语"触发”(或"激发")例如:"当您按下按键时触发keypress事件"。
jQuery事件的分类
鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有:
事件绑定
除了使用事件名绑定事件外,还可以通过其他方式绑定事件:
bind事件绑定>>delegate事件绑定>>on事件绑定。
bind绑定事件
//第一个参数:事件类型
//第二个参数:事件处理程序
$("p").bind("click" ,function(){
//事件响应方法
});
缺点:不支持动态事件绑定
delegate注册委托事件
//第一个参数: selector,要绑定事件的元素
//第二个参数:事件类型
//第三个参数:事件处理函数
$ (".parentBox").delegate("p","click",function({
//.parentBox下面的所有的p标签绑定事件
});
缺点:只能注册委托事件,因此注册时间需要记得方法太多了
on绑定事件
on注册事件语法
//第一个参数: events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
//第二个参数: selector,执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
//第三个参数: data,传递给处理函数的数据,事件触发的时候通过event. data来使用(不常使用)
//第四个参数: handler,事件处理函数
$(selector).on(events[,selector][ , data] , handler);
on注册简单事件
1/表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件
//表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on("click","span",function() {});
事件解绑
unbind方式(不用)与bind对应
$(selector).unbind();//解绑所有的事件
$(selector).unbind("click");//解绑指定的事件
undelegate方式(不用)与delegate对应
$(selector).undelegate();//解绑所有的delegate事件
$(selector).undelegate("c1ick”);//解绑所有的click事件
off方式(推荐)与on对应
//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有click事件
$(selector).off("click");
动画
显示隐藏
show():显示隐藏的元素.
参数有slow表示慢慢的,fast表示快点,normal表示中间速度.还可以设置具体的时间数.
参数单位是毫秒。
$("#btn").click(function() {
$("div").show(1000)
})
hide();隐藏显示的元素.参数和show一样。
$("#btn2").click(function() {
$("div").hide(1000)
})
toggle(): hide()和show()方法之间的切换
$("#btn3").click(function() {
$("div").toggle(1000)
})
淡入淡出
他们的参数和show/hide—样.
参数1是速度(fast,normal,slow或者写一个时间数,单位毫秒)参数2是透明度.值是一个0-1的数字.
fadeIn()把隐藏的元素慢慢显示出来。
$("#btn4").click(function() {
$("div").fadeIn(1000)
})
fadeOut()把显示的元素通过慢慢变淡隐藏起来。
$("#btn5").click(function() {
$("div").fadeOut(1000)
})
fadeToggle()在淡入和淡出之间切换,如果事显示就淡入,如果是隐藏就是淡出。
$("#btn6").click(function() {
$("div").fadeToggle(1000)
})
滑动
slideUp():把元素使用往上收的方式隐藏起来,参数也是三个单词或者写时间数。
$("#btn7").click(function() {
$("div").slideUp(1000)
})
slideDown():把元素使用向下展开的方式显示出来,参数同上,把div缓慢的显示出来。
$("#btn8").click(function() {
$("div").slideDown(1000)
})
slideToggle():在向上卷和向下卷之间切换,如果是显示的,就卷上去隐藏,如果是隐藏的就向下卷显示。
$("#btn9").click(function() {
$("div").slideToggle(1000)
})
animate自定义动画
animate()方法用于创建自定义动画。
必需的params参数定义形成动画的CSS属性。
可选的speed参数规定效果的时长。它可以取以下值: "slow""、"fast"或毫秒。
可选的callback参数是动画完成后所执行的函数名称。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jQuery.min.js"></script>
<style>
div {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="动画" id="btn">
<div>你好</div>
<script>
$(function() {
$("#btn").click(function() {
$("div").animate({
"left": "400px",
"top": "400px"
}).animate({
"font-size": "30px"
})
})
})
</script>
</body>
</html>
表单
表单有两个较特殊的属性,一个是method,是规定用于发送表单的HTTP方法(提交表单的方式)﹔还有一个是action,是规定当提交时向何处发送表单的数据(要提交表单的地址)。Form表单有一个自动提交的功能(submit)有时候不写submit也会自动提交。可以默认不写。如果不想要表单自动提交就要写阻止表单自动提交的方法(οnsubmit="return false;")。
表单的提交方式有两种:分别是get提交(为表单的默认提交方式)与post提交。
get提交
请求参数放到请求的地址后面,参数大小受限只能传递几k的数据。由于参数再地址后面安全性不能保证。但是速度较快。
应用场景:地址栏发出的请求/超链接发出的请求。
post请求
请求参数放到请求体里面,参数大小没有限制,请求参数不可见,所以安全性更高,速度慢。
应用场景:当form表单指定请求方式为post时发出请求。
Get与Post的区别
. Get方法是用来向服务器上获取数据;而Post是用来向服务器上传递修改数据。
·两者传递参数的方式不一样,Get是将数据直接添加到action所指向的URL后面;而Post是将数据放在form的数据体中。
·Get是不安全的,因为在传输数据的过程中数据直接暴露在请求的URL上,用户可以在浏览器上看到提交的数据,还有一些系统内部信息也会显示在用户面前;而Post的所有操作用户都是不可见的。
·Get提交传输的数据量少,受限于URL的长度限制;而Post提交没有数据量限制。
.Get提交方式获取数据后刷新不会有负面影响;而Post提交刷新页面重复提交可能会产生不良的后果。
表单提交的原则
表单提交主要是通过表单元素的name值等于value值进行传递数据的,但是表单提交时需要注意一下原则:
name相同的表单提交格式
如果name值相同的表单提交,该name值会出现多次,且对应不同表单的值。
没有name的表单、disabled的表单元素
表单元素没有name属性、含有disabled属性都会被禁止提交。
在进行表单控制时,如果某一个表单即不可以被编辑但同时也需要被提交,可以设置readonly属性,通过给含有readonly属性的表单添加特定的css样式来模拟disabled的样式。
radio、checkbox选中值却没有value属性
radio、checkbox选中值却没有value属性,提交时只会提示当前name表单为on,不会自动获取text的值。如果没有选中值,就不会提交该表单元素,即不会出现当前name表单为off的情况。
同理select标签的被选中的option没有value属性值也获取不到传递的值。
表单提交事件
当提交表单时,会发生submit事件。
该事件只适用于<form>元素。
submit()方法触发submit事件,或规定当发生submit事件时运行的函数