web前端入门到实战：jQuery中的事件、动画、表单应用
什么是事件?
页面对不一样访问者的响应叫作事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中常用术语 " 触发 " （或 " 激发 " ）经常使用click(）方法触发javascript
DOM的加载
$(document).ready() 方法与 window.onload () 方法的区别：css
事件绑定
使用bind（）方法为每一个匹配元素的特定事件绑定事件处理函数。bind() 方法的调用格式： bind(type,[data], fn )html
• type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。好比 "click" 或 "submit" ，还能够是自定义事件名。
• data: 做为 event.data 属性值传递给事件对象的额外数据对象
• fn : 绑定到每一个匹配元素的事件上面的处理函数前端
实例：java
//事件绑定
$("#btn1").bind("click",function(){
alert("点我触发bind函数");
})
<button id="btn1">点我触发bind函数</button>
使用 jQuery 的 is()方法判断元素是否可见，使用is()方法:jquery
alert($("button").parent().is("body"));
/*
* $("#b1").is(":visible") 判断id为d1的元素是否可见
* 可见返回true，不可见就返回false
*
* next($("#b1").is(":visible"));
*/
alert("#btn2").is(":visible");
$("#btn2").click(function(){
if($("#b1").is(":visible")){
//$(this).next().css();
$(this).next().hide();
}else{
$(this).next().show();
}
})
合成事件-hover()web
hover()模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数。正则表达式
hover() 方法语法结构为： hover([over,]out)服务器
• over: 鼠标移到元素上要触发的函数
• out: 鼠标移出元素要触发的函数app
实例：
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和须要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
$(function(){
/*
* 合成事件hover()方法的语法结构:
* hover(enter,leave);
*
* */
$("#btn2").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
<button id="btn1">点我触发bind函数</button>
<button id="btn2">隐藏或者显示</button>
<div id="b1" style="display: none;">
<img src="img/log.jpg"/>
</div>
合成事件-toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 若是有更多个函数, 则依次触发, 直到最后一个。
$(function(){
/*
* 合成事件toggle()方法的语法结构:
* toggle(f1,f2,f3,f4....);
*
* 有俩个功能:
* 1：模拟连续点击(自动点击，不是你手动点击);
* 2.若是元素自己可见，则会自动隐藏，若是自己是隐藏的，则会自动显示
* */
/* $("#btn1").toggle(function(){
alert("触发toggle函数");
});*/
//带俩个参数的toggle方法
$("#btn1").toggle(function(){
$("#btn1").css("color","turquoise");
//alert("触发toggle函数");
},function(){
//alert("触发toggle2函数")
$("#btn1").css("background-color","deepskyblue");
})
})
事件冒泡：
在页面上能够有多个事件，也能够多个元素响应同一个事件。
假设网页上有两个元素，其中一个嵌套在另外一个元素里，而且都被绑定了 click 事件，同时 body 元素上也绑定了 click事件。
事件会按照 DOM 层次结构像水泡同样不断向上直至顶端
<style type="text/css">
#body1{
background-color: deepskyblue;
}
#div1{
background-color: white;
}
#span1{
background-color: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*
*演示事件冒泡
* 当一个元素的自己和父类都绑定了相同事件时，它自己触发该事件，则父类也会触发该事件
* 解决方法：中止冒泡
* 方法1:自己return false；
* 方法2:stopPropagation(); [event是事件对象]
*/
$("#body1").click(function(){
alert("body的click方法");
})
$("#div1").click(function(){
alert("div的click方法");
})
$("#span1").click(function(){
alert("span的click方法");
// return false;
event.stopPropagation();
})
})
</script>
</head>
<body id="body1">
body
<div id="div1">
div
<span id="span1">
span
</span>
</div>
</body>
</html>
阻止默认行为
网页中的元素有本身默认的行为，例如，单击超连接后会跳转、单击提交按钮后表单会提交，有时须要阻止元素的默认行为。
在 jQuery 中，提供了 preventDefault () 方法来阻止元素的默认行为。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//阻止点击以后跳转
$("#a1").click(function(){
alert("你正在阻止a标签的默认行为");
//return false; //方法一
event.preventDefault(); //方法二
})
/*
* 写一个登陆表单，设置若是用户名不知足正则表达式的要求，阻止请求服务
* 正则判断是否知足符合规则
*
*/
$(":submit").click(function(){
var na=$("#na").val();
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
if(!uPattern.test(na)){
alert("你正在阻止a标签的默认行为");
return false;
}
})
})
</script>
</head>
<body>
<a href="http://baidu.com" id="a1">跳转百度</a>
<form action="http://baidu.com" method="post">
用户名<input type="text" id="na"/><br/>
密码<input type="password" id="pa" /><br/>
<button type="submit">登陆</button>
</form>
</body>
</html>
事件对象的属性
事件对象: 当触发事件时, 事件对象就被建立了. 在程序中使用事件只须要为函数添加一个参数
event.type : 获取事件的类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*
* 事件对象：对事件对象的经常使用属性进行封装
* 1.event.type获取事件的类型(也就是事件名称)
* 2\. event.preventDefault(); 阻止默认的事件行为 (在IE中无效)
* 3\. event.stopPropagation() 阻止事件冒泡
* 4.event.target 获取触发事件的元素（获取触发的目标）
* 5.event.pageX / event.pageY 获取事件光标的X和Y的坐标
* 6.event.which 获取鼠标的按键(左键返回1，中键返回2，右键返回3)
*/
$("#a1").click(function(){
//alert(event.pageX+","+event.pageY);
alert(event.which);
return false;
})
})
</script>
</head>
<body>
<a href="http://baidu.com" id="a1">查看事件对象的属性</a>
</body>
</html>
移除事件:
在绑定事件的过程当中，不只能够为同一个元素绑定多个事件，也能够为多个元素绑定同一个事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").one("click", function() {
$("#test").append("<p>个人绑定函数1</p>");
}).one("click", function() {
$("#test").append("<p>个人绑定函数2</p>");
}).one("click", function() {
$("#test").append("<p>个人绑定函数3</p>");
})
})
</script>
</head>
<body>
<button id="btn1">绑定函数</button>
<div id="test">
</div>
</body>
</html>
One()方法
one(): 该方法能够为元素绑定处理函数. 当处理函数触发一次后, 当即被删除. 即在每一个对象上, 事件处理函数只会被执行一次.
on()与bind()的差异
jQuery从1.7+版本开始，提供了on()和off()进行事件处理函数的绑定和取消。
二者的区别就在因而否支持selector这个参数值。若是使用on的时候，不设置selector,那么on与bind就没有区别了。
jQuery的动画
隐藏和显示元素-show()方法和hide()方法
hide(): 在HTML文档中，为一个元素调用hide()方法会将该元素的display样式改成 none，代码功能同css("display", "none")。
show(): 把元素隐藏后，可使用show ()方法将元素的 display 样式改成先前的显示状态("block"或"inline"或其余除了"none"以外的值)。
$(function(){
$("div").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
淡入和淡出-fadeIn()方法和fadeout()方法
fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut()会在指定的一段时间内下降元素的不透明度,直到元素彻底消失(“display:none”)，fadeIn()则相反。
滑上和滑下-slideUp()方法和slideDown()方法
slideDown()，slideUp():只会改变元素的高度，若是一个元素的display属性为 none，当调用slideDown()方法时，这个元素将由上至下延伸显示，slideUp()方法正好相反，元素由下至上缩短隐藏。
自定义动画方法animate()
使用animate()方法来自定义动画，其语法结构为：
animate(params,[speed],[fn]) •params:一组包含做为动画属性和终值的样式属性和及其值的集合，好比{property1:”value1”, property2:”value2”,..}
•speed:三种预约速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每一个元素执行一次
toggle()方法
toggle()方法能够切换元素的可见状态。若是元素是可见的, 则切换为隐藏; 若是元素时隐藏的, 则切换为可见的。
toggle()会同时改变元素的高度、宽度和透明度
slideToggle()方法
slideToggle()方法经过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。
fadeTo()方法
fadeTo()方法能够把元素的不透明度以渐近的方式调整到指定的值(0–1之间)。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。
fadeToggle()方法
fadeToggle()方法经过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度
动画方法说明：
属性自定义动画的方法，以上各类动画方法实质内部都调用了animate()方法。此外，直接使用animate()方法还能自定义其余的样式属性，例如：“left”、”marginLeft”,”scrollTop”等
表单应用：
一个表单有3个基本组成部分：
•表单标签：包含处理表单数据所用的服务器程序URL以及数据提交到服务器的方法。
•表单域：包含文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
•表单按钮：包括提交按钮、复位按钮和通常按钮，用于将数据传送到服务器上或者取消传送，还能够用来控制其余定义了处理脚本的处理工做。
attr()和prop()方法区别:
attr的返回值要么是checked要么是undefined，prop的返回值只有true和false。
prop()**函数的结果**:
1.若是有相应的属性，返回指定属性值。 2.若是没有相应的属性，返回值是空字符串。
attr**()函数的结果:**
1.若是有相应的属性，返回指定属性值。 2.若是没有相应的属性，返回值是undefined。
对于HTML元素自己就带有的固有属性，在处理时，使用prop方法。
对于HTML元素咱们本身自定义的DOM属性，在处理时，使用attr方法。
具备 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
- 1. web前端入门到实战：CSS3 动画的实现
- 2. Web前端JQuery入门实战案例
- 3. web前端入门到实战：css3 过渡和动画
- 4. web前端入门到实战：css3动画 Transition
- 5. web前端入门到实战：HTML5表单标签
- 6. web前端入门到实战：好用的Js图表库
- 7. web前端入门到实战：JavaScript 事件冒泡与事件委托
- 8. web前端入门到实战：CSS实现雨滴动画效果
- 9. web前端入门到实战：CSS中的cursor属性
- 10. web前端入门到实战：CSS3 建立简单的网页动画 – 实现弹跳球动
- 更多相关文章...
- • Redis在Java Web中的应用 - Redis教程
- • jQuery Mobile 表单滑动条 - jQuery Mobile 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。